novi-lessons/Samenvattingen/Les16-Samenvatting.md

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:

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

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