341 lines
6.7 KiB
Markdown
341 lines
6.7 KiB
Markdown
# Les 16: Mastering Cursor
|
|
|
|
---
|
|
|
|
## Hoofdstuk
|
|
**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.
|
|
|
|
---
|
|
|
|
## Te Behandelen
|
|
|
|
### Groepsdiscussie (15 min)
|
|
Bespreek klassikaal de context management ervaringen uit Les 15 - welke strategieën werkten het beste?
|
|
|
|
### Model Keuze
|
|
|
|
**Wanneer welk model?**
|
|
|
|
| Model | Gebruik voor | Kosten |
|
|
|-------|-------------|--------|
|
|
| **Haiku** | Simpele taken, autocomplete | Goedkoop |
|
|
| **Sonnet** | Dagelijks werk, de meeste taken | Medium |
|
|
| **Opus** | Complexe architectuur, multi-file | Duur |
|
|
|
|
**Vuistregels:**
|
|
- Tab completion: Haiku (automatisch)
|
|
- CMD+K: Sonnet (default)
|
|
- Composer: Sonnet of Opus
|
|
- Complexe debugging: Opus
|
|
|
|
---
|
|
|
|
### Composer Mode Diepgaand
|
|
|
|
**Wat is Composer?**
|
|
Multi-file generatie in één keer. Cursor plant en voert wijzigingen uit over meerdere bestanden.
|
|
|
|
**Wanneer Composer gebruiken:**
|
|
- Nieuwe feature met meerdere components
|
|
- Refactoring over meerdere files
|
|
- Boilerplate generatie
|
|
- Complexe wijzigingen
|
|
|
|
**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
|
|
|
|
**Voorbeeld prompt:**
|
|
```
|
|
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
|
|
```
|
|
|
|
---
|
|
|
|
### @ Mentions Systeem
|
|
|
|
**Alle types:**
|
|
|
|
| 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` |
|
|
|
|
**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:**
|
|
|
|
```
|
|
.cursor/
|
|
└── rules/
|
|
├── general.mdc # Project-brede regels
|
|
├── components.mdc # Component conventies
|
|
├── api.mdc # API route regels
|
|
└── testing.mdc # Test conventies
|
|
```
|
|
|
|
**Effectieve rules schrijven:**
|
|
|
|
```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
|
|
```
|
|
|
|
---
|
|
|
|
### Codebase Indexing
|
|
|
|
**Hoe Cursor indexeert:**
|
|
- Scant alle files in je project
|
|
- Bouwt semantic understanding
|
|
- Gebruikt voor autocomplete en context
|
|
|
|
**Optimaliseren:**
|
|
1. Goede `.cursorignore` (node_modules, .next, etc.)
|
|
2. Semantische naming
|
|
3. Duidelijke file structuur
|
|
4. Comments waar nodig
|
|
|
|
**Re-indexeren:**
|
|
CMD+Shift+P → "Reindex"
|
|
|
|
---
|
|
|
|
### Cost Management
|
|
|
|
**Token gebruik monitoren:**
|
|
- Cursor toont token count in chat
|
|
- Check monthly usage in settings
|
|
|
|
**Bespaartips:**
|
|
1. Gebruik Haiku voor simpele taken
|
|
2. Beperk context (niet hele codebase)
|
|
3. Wees specifiek in prompts
|
|
4. Fresh chat voor nieuwe onderwerpen
|
|
|
|
**Free tier strategie:**
|
|
- Focus op Tab completion (onbeperkt)
|
|
- Gebruik CMD+K spaarzaam
|
|
- Composer alleen voor grote taken
|
|
|
|
---
|
|
|
|
### Debugging met Cursor
|
|
|
|
**AI-Assisted Debugging:**
|
|
|
|
**Stap 1: Error identificeren**
|
|
```
|
|
@file-met-error.tsx
|
|
Ik krijg deze error: [plak error]
|
|
Wat gaat er mis?
|
|
```
|
|
|
|
**Stap 2: Context toevoegen**
|
|
```
|
|
@file-met-error.tsx
|
|
@gerelateerde-file.ts
|
|
De error treedt op wanneer ik X doe.
|
|
Console log toont: [data]
|
|
```
|
|
|
|
**Stap 3: Fix implementeren**
|
|
- Selecteer code met error
|
|
- CMD+K → "Fix this error: [beschrijving]"
|
|
- Review en test
|
|
|
|
---
|
|
|
|
### Refactoring met Cursor
|
|
|
|
**Pattern 1: Extract Component**
|
|
```
|
|
Selecteer JSX block → CMD+K
|
|
"Extract this into a separate component called ProductCard"
|
|
```
|
|
|
|
**Pattern 2: Extract Hook**
|
|
```
|
|
Selecteer state + useEffect → CMD+K
|
|
"Extract this into a custom hook called useProductData"
|
|
```
|
|
|
|
**Pattern 3: Improve Performance**
|
|
```
|
|
@Component.tsx
|
|
"Optimize this component:
|
|
- Add memoization waar nodig
|
|
- Fix unnecessary re-renders
|
|
- Improve loading performance"
|
|
```
|
|
|
|
---
|
|
|
|
## Tools
|
|
- Cursor
|
|
- Claude models (Haiku/Sonnet/Opus)
|
|
- .cursorrules
|
|
|
|
---
|
|
|
|
## Lesopdracht (2 uur)
|
|
|
|
### Multi-Step Form Wizard
|
|
|
|
**Bouw met Composer:**
|
|
|
|
| Stap | Features |
|
|
|------|----------|
|
|
| 1 | Personal info (naam, email) |
|
|
| 2 | Preferences (theme, notifications) |
|
|
| 3 | Review & confirm |
|
|
| 4 | Success animation |
|
|
|
|
**Requirements:**
|
|
- Progress indicator
|
|
- Per-stap validatie
|
|
- localStorage persistence
|
|
- TypeScript strict
|
|
- Tailwind styling
|
|
- Mobile responsive
|
|
|
|
**Process:**
|
|
|
|
**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 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
|
|
|
|
### Deliverable
|
|
- Werkende form wizard
|
|
- Notities: welk model wanneer, hoeveel iteraties
|
|
|
|
---
|
|
|
|
## Huiswerk (2 uur)
|
|
|
|
### Perfecte .cursorrules
|
|
|
|
**Deel 1: Research (30 min)**
|
|
- Zoek 3-5 .cursorrules voorbeelden online
|
|
- Analyseer wat ze effectief maakt
|
|
|
|
**Deel 2: Write Comprehensive Rules (1 uur)**
|
|
|
|
Maak complete .cursorrules voor je eindproject:
|
|
|
|
```markdown
|
|
# [Project Naam]
|
|
|
|
## Tech Stack
|
|
[Jouw stack]
|
|
|
|
## Code Conventions
|
|
[Jouw conventies]
|
|
|
|
## File Naming
|
|
[Jouw regels]
|
|
|
|
## Component Structure
|
|
[Jouw patterns]
|
|
|
|
## Styling
|
|
[Tailwind regels]
|
|
|
|
## API Routes
|
|
[Route conventies]
|
|
|
|
## Error Handling
|
|
[Error patterns]
|
|
|
|
## DON'Ts
|
|
[Wat te vermijden]
|
|
```
|
|
|
|
**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
|
|
|
|
### Deliverable
|
|
- Complete .cursorrules file
|
|
- Screenshot van Cursor die regels volgt
|
|
- Korte analyse: wat werkt goed, wat niet
|
|
|
|
---
|
|
|
|
## 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
|
|
- AI-assisted debugging toepassen
|
|
- Refactoring uitvoeren met Cursor
|