# Les 4: Effectief Prompting, Iteratief Werken & Skills

> 📋 **Lesmateriaal nog niet uitgewerkt**
>
> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
> - Les04-Slide-Overzicht.md
> - Les04-Lesplan.md
> - Les04-Bijlage-A-Lesopdracht.md
> - Les04-Bijlage-B-Huiswerkopdracht.md

---

## Hoofdstuk
**Deel 1: AI Foundations** (Les 1-4)

## Beschrijving
Geavanceerde prompt engineering technieken en introductie tot Skills.sh voor herbruikbare AI best practices.

---

## Te Behandelen

### Groepsdiscussie (15 min)
Bespreek klassikaal de security/privacy bevindingen uit Les 3 - welke issues vonden jullie in AI-gegenereerde code? Hoe zien jullie AI Safety Checklists eruit?

### Geavanceerde Prompt Engineering
- Zero-shot vs few-shot prompting
- Chain-of-thought reasoning
- Role prompting
- Constraint-based prompting

### Skills.sh Introductie
- Wat zijn Skills (herbruikbare best-practices packages)
- Hoe Skills werken (procedurele kennis voor AI agents)
- Skills installeren via CLI (`npx skills add <skill-name>`)
- Skills gebruiken in OpenCode/WebStorm
- Hoe Skills de kwaliteit verhogen zonder extra prompting

### Iteratief Werken
- Start simpel → voeg complexiteit toe
- Context effectief gebruiken

---

## Tools
- OpenCode/WebStorm
- Skills.sh
- vercel-react-best-practices skill

---

## Lesopdracht (2 uur)

### Deel 1: Skills Setup (30 min)

**Installatie:**
- Installeer Skills CLI
- Add "vercel-react-best-practices" skill

**Vergelijking:**
- Bouw component ZONDER skill active
- Bouw zelfde component WITH skill active
- Zie het verschil in code quality

**Documenteer concrete verschillen:**
- Types
- Error handling
- Accessibility
- Performance patterns

### Deel 2: Iterative Build Challenge met Skills (1u 30min)

**Bouw data filtering systeem voor productlijst in 4 iteraties (~25 min elk):**

| Iteratie | Focus |
|----------|-------|
| 1 | Basis filter dropdown (category) |
| 2 | Meer filters (price range slider, brand checkboxes, rating stars) met Skills guidance |
| 3 | UX polish (clear all filters button, active filter chips, mobile responsive, loading states) |
| 4 | URL state management & advanced features (sorting, search) |

**Documenteer per iteratie:**
- Hoe hielpen Skills?
- Welke best practices werden automatisch toegepast?

---

## Huiswerk (2 uur)

### Deel 1: Prompt Library (1 uur)

Maak persoonlijke "prompt library" met 8 herbruikbare, geoptimaliseerde prompts voor:
1. Component creation
2. Bug fixing
3. Refactoring
4. Testing
5. API integration
6. Form validation
7. Responsive layout
8. Performance optimization

**Vereisten:**
- Test elk met ChatGPT EN Claude
- Verfijn tot consistent goede output
- Format: Markdown document met prompt templates

### Deel 2: Skills Exploration (1 uur)

**Installeer 3 relevante Skills:**
1. "web-design-guidelines"
2. "frontend-design"
3. "supabase-postgres-best-practices" OF andere relevante skill

**Per skill:**
- Bouw klein component/feature met de skill active
- Documenteer wat de skill doet
- Concrete voorbeelden van hoe ze AI output beïnvloeden

**Bonus:** Bekijk "skill-creator" skill

**Delen:** Als GitHub gist

---

## Leerdoelen
Na deze les kan de student:
- Geavanceerde prompt technieken toepassen (zero-shot, few-shot, chain-of-thought)
- Skills installeren en gebruiken
- Het verschil zien tussen output met en zonder Skills
- Iteratief werken (simpel → complex)
- Een persoonlijke prompt library opbouwen