fix: implement lessons feedback
This commit is contained in:
Tim Rijkse
@@ -1,284 +1,287 @@
|
||||
# Les 13: Mastering Cursor
|
||||
# Les 13: AI Agents & Custom GPTs
|
||||
|
||||
---
|
||||
|
||||
## Hoofdstuk
|
||||
**Hoofdstuk 3: Advanced** (Les 10-18)
|
||||
**Deel 4: Advanced AI Features** (Les 13-18)
|
||||
|
||||
## Beschrijving
|
||||
Verdieping in Cursor's geavanceerde features. Leer model keuze, Composer Mode, @ mentions, en .cursorrules optimaal gebruiken.
|
||||
Leer werken met AI agents en custom GPTs. Bouw je eigen gespecialiseerde AI assistenten en begrijp hoe agents autonome taken kunnen uitvoeren.
|
||||
|
||||
---
|
||||
|
||||
## Te Behandelen
|
||||
|
||||
### Model Keuze
|
||||
### Groepsdiscussie (15 min)
|
||||
Bespreek klassikaal de Cursor reflecties uit Les 12 - welke features werken het beste voor welke taken?
|
||||
|
||||
**Wanneer welk model?**
|
||||
### Wat zijn AI Agents?
|
||||
|
||||
| Model | Gebruik voor | Kosten |
|
||||
|-------|-------------|--------|
|
||||
| **Haiku** | Simpele taken, autocomplete | Goedkoop |
|
||||
| **Sonnet** | Dagelijks werk, de meeste taken | Medium |
|
||||
| **Opus** | Complexe architectuur, multi-file | Duur |
|
||||
**Definitie:** AI systemen die autonoom taken kunnen uitvoeren, niet alleen antwoorden geven.
|
||||
|
||||
**Vuistregels:**
|
||||
- Tab completion: Haiku (automatisch)
|
||||
- CMD+K: Sonnet (default)
|
||||
- Composer: Sonnet of Opus
|
||||
- Complexe debugging: Opus
|
||||
**Verschil Chat vs Agent:**
|
||||
|
||||
| Aspect | Chat | Agent |
|
||||
|--------|------|-------|
|
||||
| Gedrag | Beantwoordt vragen | Voert taken uit |
|
||||
| Autonomie | Wacht op input | Kan zelf beslissingen nemen |
|
||||
| Tools | Alleen tekst | Kan tools gebruiken |
|
||||
| Voorbeeld | "Hoe maak ik X?" | "Maak X voor mij" |
|
||||
|
||||
---
|
||||
|
||||
### Composer Mode Diepgaand
|
||||
### Claude Projects
|
||||
|
||||
**Wat is Composer?**
|
||||
Multi-file generatie in één keer. Cursor plant en voert wijzigingen uit over meerdere bestanden.
|
||||
**Wat is een Claude Project?**
|
||||
- Verzameling van context specifiek voor één doel
|
||||
- Blijft behouden over conversaties
|
||||
- Kan bestanden bevatten
|
||||
|
||||
**Wanneer Composer gebruiken:**
|
||||
- Nieuwe feature met meerdere components
|
||||
- Refactoring over meerdere files
|
||||
- Boilerplate generatie
|
||||
- Complexe wijzigingen
|
||||
**Wanneer gebruiken:**
|
||||
- Terugkerend werk aan hetzelfde project
|
||||
- Consistente coding style nodig
|
||||
- Documentatie die AI moet kennen
|
||||
|
||||
**Composer Workflow:**
|
||||
1. CMD+I opent Composer
|
||||
2. Beschrijf je doel duidelijk
|
||||
3. Voeg context toe met @ mentions
|
||||
4. Laat Cursor plannen
|
||||
5. Review het plan
|
||||
6. Accept of reject per file
|
||||
7. Itereer met feedback
|
||||
**Project aanmaken:**
|
||||
1. Ga naar claude.ai → Projects
|
||||
2. Klik "New Project"
|
||||
3. Voeg project knowledge toe (files, instructies)
|
||||
4. Start conversaties binnen het project
|
||||
|
||||
**Voorbeeld prompt:**
|
||||
**Voorbeeld Project Instructions:**
|
||||
```
|
||||
Create a user profile page with:
|
||||
- @components/ui/ style components
|
||||
- Profile header with avatar
|
||||
- Edit form with validation
|
||||
- Save to @lib/supabase.ts
|
||||
- Loading and error states
|
||||
Je bent een expert React/Next.js developer.
|
||||
|
||||
Technologie stack:
|
||||
- Next.js 14 met App Router
|
||||
- TypeScript strict mode
|
||||
- Tailwind CSS
|
||||
- Supabase voor backend
|
||||
|
||||
Coding conventions:
|
||||
- Functional components met TypeScript
|
||||
- Named exports (geen default exports)
|
||||
- Error handling met try/catch
|
||||
- Nederlandse comments in code
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### @ Mentions Systeem
|
||||
### Custom GPTs
|
||||
|
||||
**Alle types:**
|
||||
**Wat zijn Custom GPTs?**
|
||||
Gespecialiseerde ChatGPT versies met:
|
||||
- Specifieke instructies
|
||||
- Eigen kennis (uploaded files)
|
||||
- Optioneel: Actions (API calls)
|
||||
|
||||
| Mention | Wat het doet | Voorbeeld |
|
||||
|---------|--------------|-----------|
|
||||
| `@file.tsx` | Specifieke file | `@Button.tsx` |
|
||||
| `@folder/` | Hele folder | `@components/` |
|
||||
| `@codebase` | Zoek in codebase | `@codebase auth logic` |
|
||||
| `@Docs` | Officiële docs | `@Docs Next.js routing` |
|
||||
| `@Web` | Web zoeken | `@Web Supabase auth setup` |
|
||||
**Wanneer een Custom GPT maken:**
|
||||
- Repetitieve taken met dezelfde context
|
||||
- Specifieke expertise nodig
|
||||
- Delen met anderen
|
||||
|
||||
**Best practices:**
|
||||
- Wees specifiek met file mentions
|
||||
- Gebruik folder mentions voor context
|
||||
- @Docs voor up-to-date informatie
|
||||
- Combineer mentions voor betere context
|
||||
|
||||
---
|
||||
|
||||
### .cursorrules Advanced
|
||||
|
||||
**Meerdere rules files:**
|
||||
**Custom GPT maken:**
|
||||
1. Ga naar chat.openai.com/gpts
|
||||
2. Klik "Create"
|
||||
3. Configureer in "Create" tab OF gebruik "Configure"
|
||||
|
||||
**Voorbeeld: Code Review GPT**
|
||||
```
|
||||
.cursor/
|
||||
└── rules/
|
||||
├── general.mdc # Project-brede regels
|
||||
├── components.mdc # Component conventies
|
||||
├── api.mdc # API route regels
|
||||
└── testing.mdc # Test conventies
|
||||
```
|
||||
Instructions:
|
||||
Je bent een code reviewer gespecialiseerd in React/Next.js.
|
||||
|
||||
**Effectieve rules schrijven:**
|
||||
Bij elke code review check je:
|
||||
1. TypeScript best practices
|
||||
2. React hooks correct gebruik
|
||||
3. Performance (unnecessary re-renders)
|
||||
4. Accessibility basics
|
||||
5. Error handling
|
||||
|
||||
```markdown
|
||||
# Component Rules
|
||||
|
||||
## Structure
|
||||
Alle components moeten volgen:
|
||||
1. Props interface bovenaan
|
||||
2. Component function
|
||||
3. Named export onderaan
|
||||
|
||||
## Example
|
||||
\`\`\`tsx
|
||||
interface ButtonProps {
|
||||
label: string
|
||||
onClick: () => void
|
||||
variant?: 'primary' | 'secondary'
|
||||
}
|
||||
|
||||
export function Button({ label, onClick, variant = 'primary' }: ButtonProps) {
|
||||
return (
|
||||
<button onClick={onClick} className={...}>
|
||||
{label}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
\`\`\`
|
||||
|
||||
## DON'Ts
|
||||
- Geen default exports
|
||||
- Geen inline styles
|
||||
- Geen any types
|
||||
Geef feedback in dit format:
|
||||
- ✅ Goed: [wat goed is]
|
||||
- ⚠️ Suggestie: [verbeterpunten]
|
||||
- ❌ Issue: [problemen die gefixed moeten worden]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Codebase Indexing
|
||||
### Agent Capabilities
|
||||
|
||||
**Hoe Cursor indexeert:**
|
||||
- Scant alle files in je project
|
||||
- Bouwt semantic understanding
|
||||
- Gebruikt voor autocomplete en context
|
||||
**Wat kunnen agents:**
|
||||
- Code schrijven en testen
|
||||
- Files aanmaken en bewerken
|
||||
- Terminal commands uitvoeren
|
||||
- Web searches doen
|
||||
- Meerdere stappen plannen
|
||||
|
||||
**Optimaliseren:**
|
||||
1. Goede `.cursorignore` (node_modules, .next, etc.)
|
||||
2. Semantische naming
|
||||
3. Duidelijke file structuur
|
||||
4. Comments waar nodig
|
||||
**Cursor als Agent:**
|
||||
- Composer mode plant en voert multi-file changes uit
|
||||
- @ mentions geven context
|
||||
- Tab completion voorspelt volgende stappen
|
||||
|
||||
**Re-indexeren:**
|
||||
CMD+Shift+P → "Reindex"
|
||||
**Claude als Agent (met MCP):**
|
||||
- Kan tools gebruiken
|
||||
- Filesystem access
|
||||
- Database queries
|
||||
- External APIs
|
||||
|
||||
---
|
||||
|
||||
### Cost Management
|
||||
### Best Practices voor Agent Instructies
|
||||
|
||||
**Token gebruik monitoren:**
|
||||
- Cursor toont token count in chat
|
||||
- Check monthly usage in settings
|
||||
**Wees specifiek:**
|
||||
```
|
||||
❌ "Help me met mijn project"
|
||||
✅ "Review de auth logic in src/lib/auth.ts en check voor security issues"
|
||||
```
|
||||
|
||||
**Bespaartips:**
|
||||
1. Gebruik Haiku voor simpele taken
|
||||
2. Beperk context (niet hele codebase)
|
||||
3. Wees specifiek in prompts
|
||||
4. Fresh chat voor nieuwe onderwerpen
|
||||
**Geef constraints:**
|
||||
```
|
||||
❌ "Maak het beter"
|
||||
✅ "Refactor naar max 50 regels, behoud dezelfde functionaliteit"
|
||||
```
|
||||
|
||||
**Free tier strategie:**
|
||||
- Focus op Tab completion (onbeperkt)
|
||||
- Gebruik CMD+K spaarzaam
|
||||
- Composer alleen voor grote taken
|
||||
**Definieer output format:**
|
||||
```
|
||||
Geef je antwoord in dit format:
|
||||
1. Samenvatting (1 zin)
|
||||
2. Gevonden issues (bullet points)
|
||||
3. Voorgestelde fix (code)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Prompt Templates
|
||||
|
||||
**Code Generation Template:**
|
||||
```
|
||||
Context: [beschrijf je project/stack]
|
||||
Taak: [wat moet er gemaakt worden]
|
||||
Requirements:
|
||||
- [requirement 1]
|
||||
- [requirement 2]
|
||||
Constraints:
|
||||
- [constraint 1]
|
||||
Output: [gewenst format]
|
||||
```
|
||||
|
||||
**Debugging Template:**
|
||||
```
|
||||
Error message:
|
||||
[plak error]
|
||||
|
||||
Relevante code:
|
||||
[plak code]
|
||||
|
||||
Wat ik verwacht:
|
||||
[gewenst gedrag]
|
||||
|
||||
Wat er gebeurt:
|
||||
[actueel gedrag]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Tools
|
||||
- Cursor
|
||||
- Claude models (Haiku/Sonnet/Opus)
|
||||
- .cursorrules
|
||||
- ChatGPT Custom GPTs
|
||||
- Claude Projects
|
||||
- Cursor (Composer mode)
|
||||
|
||||
---
|
||||
|
||||
## Lesopdracht (2 uur)
|
||||
|
||||
### Multi-Step Form Wizard
|
||||
### Bouw Je Eigen AI Assistant
|
||||
|
||||
**Bouw met Composer:**
|
||||
**Deel 1: Claude Project (45 min)**
|
||||
|
||||
| Stap | Features |
|
||||
|------|----------|
|
||||
| 1 | Personal info (naam, email) |
|
||||
| 2 | Preferences (theme, notifications) |
|
||||
| 3 | Review & confirm |
|
||||
| 4 | Success animation |
|
||||
Maak een Claude Project voor je eindproject:
|
||||
1. Ga naar claude.ai → Projects → New Project
|
||||
2. Schrijf project instructions:
|
||||
- Tech stack
|
||||
- Coding conventions
|
||||
- Project specifieke regels
|
||||
3. Upload relevante files (schema, README)
|
||||
4. Test met 3 verschillende vragen
|
||||
|
||||
**Requirements:**
|
||||
- Progress indicator
|
||||
- Per-stap validatie
|
||||
- localStorage persistence
|
||||
- TypeScript strict
|
||||
- Tailwind styling
|
||||
- Mobile responsive
|
||||
**Deel 2: Custom GPT (45 min)**
|
||||
|
||||
**Process:**
|
||||
Maak een Custom GPT voor code review:
|
||||
1. Ga naar chat.openai.com/gpts
|
||||
2. Klik "Create"
|
||||
3. Schrijf instructions voor jouw stack
|
||||
4. Test met code uit je project
|
||||
|
||||
**Deel 1: Composer Setup (30 min)**
|
||||
1. Open Composer (CMD+I)
|
||||
2. Schrijf comprehensive prompt
|
||||
3. Include @ mentions naar relevante files
|
||||
4. Kies Sonnet of Opus
|
||||
**Deel 3: Vergelijking (30 min)**
|
||||
|
||||
**Deel 2: Generatie & Review (45 min)**
|
||||
1. Laat Composer genereren
|
||||
2. Review elke file
|
||||
3. Accept wat goed is
|
||||
4. Reject wat niet past
|
||||
|
||||
**Deel 3: Refinement (45 min)**
|
||||
1. Gebruik CMD+K voor kleine fixes
|
||||
2. Chat voor vragen
|
||||
3. Itereer tot het werkt
|
||||
Test dezelfde taak met beide:
|
||||
- "Review deze component op best practices"
|
||||
- Noteer verschillen in output
|
||||
- Welke is beter voor welk doel?
|
||||
|
||||
### Deliverable
|
||||
- Werkende form wizard
|
||||
- Notities: welk model wanneer, hoeveel iteraties
|
||||
- Claude Project URL
|
||||
- Custom GPT (als je ChatGPT Plus hebt) of instructies doc
|
||||
- Vergelijkingsnotities
|
||||
|
||||
---
|
||||
|
||||
## Huiswerk (2 uur)
|
||||
|
||||
### Perfecte .cursorrules
|
||||
### Optimaliseer Je AI Assistants
|
||||
|
||||
**Deel 1: Research (30 min)**
|
||||
- Zoek 3-5 .cursorrules voorbeelden online
|
||||
- Analyseer wat ze effectief maakt
|
||||
**Deel 1: Iteratie (1 uur)**
|
||||
|
||||
**Deel 2: Write Comprehensive Rules (1 uur)**
|
||||
Verbeter je Claude Project:
|
||||
1. Test met 5 verschillende taken
|
||||
2. Noteer waar instructies tekortschieten
|
||||
3. Pas instructies aan
|
||||
4. Test opnieuw
|
||||
|
||||
Maak complete .cursorrules voor je eindproject:
|
||||
Documenteer in `docs/AI-ASSISTANTS.md`:
|
||||
- Originele instructies
|
||||
- Wat niet werkte
|
||||
- Verbeterde instructies
|
||||
- Resultaat verschil
|
||||
|
||||
**Deel 2: Prompt Library (30 min)**
|
||||
|
||||
Maak een persoonlijke prompt library:
|
||||
```markdown
|
||||
# [Project Naam]
|
||||
# Mijn Prompt Templates
|
||||
|
||||
## Tech Stack
|
||||
[Jouw stack]
|
||||
## Code Generation
|
||||
[template]
|
||||
|
||||
## Code Conventions
|
||||
[Jouw conventies]
|
||||
## Debugging
|
||||
[template]
|
||||
|
||||
## File Naming
|
||||
[Jouw regels]
|
||||
## Code Review
|
||||
[template]
|
||||
|
||||
## Component Structure
|
||||
[Jouw patterns]
|
||||
|
||||
## Styling
|
||||
[Tailwind regels]
|
||||
|
||||
## API Routes
|
||||
[Route conventies]
|
||||
|
||||
## Error Handling
|
||||
[Error patterns]
|
||||
|
||||
## DON'Ts
|
||||
[Wat te vermijden]
|
||||
## Refactoring
|
||||
[template]
|
||||
```
|
||||
|
||||
**Deel 3: Test (30 min)**
|
||||
1. Start nieuw component
|
||||
2. Vraag Cursor om het te bouwen
|
||||
3. Check: volgt Cursor je regels?
|
||||
4. Itereer indien nodig
|
||||
**Deel 3: Reflectie (30 min)**
|
||||
|
||||
Schrijf reflectie (300 woorden):
|
||||
- Welke AI assistant gebruik je waarvoor?
|
||||
- Wat is het verschil tussen Claude Projects en Custom GPTs?
|
||||
- Hoe heeft dit je workflow verbeterd?
|
||||
|
||||
### Deliverable
|
||||
- Complete .cursorrules file
|
||||
- Screenshot van Cursor die regels volgt
|
||||
- Korte analyse: wat werkt goed, wat niet
|
||||
- Geoptimaliseerde AI assistant instructies
|
||||
- Prompt library document
|
||||
- Reflectie (300 woorden)
|
||||
|
||||
---
|
||||
|
||||
## Leerdoelen
|
||||
Na deze les kan de student:
|
||||
- Het juiste Claude model kiezen per taak
|
||||
- Composer Mode effectief gebruiken voor multi-file features
|
||||
- @ mentions strategisch inzetten voor context
|
||||
- Geavanceerde .cursorrules files schrijven
|
||||
- Codebase indexing optimaliseren
|
||||
- Token gebruik monitoren en kosten beheren
|
||||
- Het verschil uitleggen tussen chat en agent
|
||||
- Een Claude Project aanmaken en configureren
|
||||
- Een Custom GPT maken met specifieke instructies
|
||||
- Effectieve agent instructies schrijven
|
||||
- Prompt templates gebruiken voor consistente resultaten
|
||||
- De juiste AI assistant kiezen per taak
|
||||
|
||||
Reference in New Issue
Block a user