132 lines
3.4 KiB
Markdown
132 lines
3.4 KiB
Markdown
# 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
|