# Les 13: Mastering Cursor

---

## Hoofdstuk
**Hoofdstuk 3: Advanced** (Les 10-18)

## Beschrijving
Verdieping in Cursor's geavanceerde features. Leer model keuze, Composer Mode, @ mentions, en .cursorrules optimaal gebruiken.

---

## Te Behandelen

### 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

---

## 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