novi-lessons/Samenvattingen/Les10-Samenvatting.md

Les 10: Introduction to Cursor

---

Hoofdstuk

Hoofdstuk 3: Advanced (Les 10-18)

Beschrijving

Kennismaking met Cursor - de professionele AI code editor. Leer de core features en ontdek waarom dit de tool is voor serieuze AI-assisted development.

---

Te Behandelen

Waarom Cursor?

Tot nu toe gebruikten we:

• OpenCode (gratis, goed voor leren)
• Claude Desktop (voor agents en projects)

Cursor is de volgende stap:

• Purpose-built voor AI-assisted coding
• Professionele editor (gebaseerd op VS Code)
• Superieure AI integratie
• Free tier beschikbaar (voldoende voor de cursus)

---

Free vs Pro

Aspect	Free Tier	Pro ($20/maand)
Tab completion	✅	✅
CMD+K edits	Beperkt	Onbeperkt
Chat	Beperkt	Onbeperkt
Composer	Beperkt	Onbeperkt
Models	GPT-4, Claude	Alle modellen

Voor deze cursus: Free tier is voldoende!

---

Installatie

1. Ga naar cursor.sh
2. Download voor jouw OS
3. Installeer
4. Open Cursor
5. Sign in met GitHub

Eerste keer:

• Cursor vraagt om settings te importeren van VS Code (optioneel)
• Accept default keybindings

---

Core Features

1. Tab Completion

AI-powered autocomplete die hele blokken code voorspelt.

Hoe het werkt:

• Begin met typen
• Cursor suggereert code in grijs
• Druk Tab om te accepteren
• Druk Escape om te negeren

Tip: Schrijf een comment over wat je wilt, en Tab completion vult de code in.

// Function that calculates the total price with tax
// [Tab completion vult de functie in]

2. CMD+K (Inline Editing)

Selecteer code en vraag AI om het aan te passen.

Hoe het werkt:

1. Selecteer code (of zet cursor op een regel)
2. Druk CMD+K (Mac) of Ctrl+K (Windows)
3. Typ je instructie
4. Enter om te genereren
5. Accept of Reject de wijziging

Voorbeelden:

• "Add error handling"
• "Convert to TypeScript"
• "Make this responsive"
• "Add loading state"

3. Chat (Sidebar)

Converseer met AI over je code.

Hoe het werkt:

1. CMD+Shift+L opent Chat
2. Stel je vraag
3. AI heeft context van je open file

Voorbeelden:

• "Explain what this function does"
• "How can I optimize this?"
• "What's wrong with this code?"

4. @ Mentions

Refereer naar files, folders, of documentatie.

Syntax:

• @filename.tsx - specifieke file
• @folder/ - hele folder
• @Docs - officiële docs zoeken
• @Web - web zoeken

Voorbeeld:

@components/Button.tsx - How can I add a loading prop to this?

5. Composer Mode

Multi-file generatie in één keer.

Hoe het werkt:

1. CMD+I opent Composer
2. Beschrijf wat je wilt bouwen
3. AI genereert meerdere files tegelijk
4. Review en accept changes

Wanneer gebruiken:

• Nieuwe features met meerdere components
• Refactoring over meerdere files
• Boilerplate code genereren

---

Workflow Vergelijking

Taak	OpenCode	Cursor
Snelle fix	Chat	CMD+K
Nieuwe component	Chat	Tab completion + CMD+K
Multi-file feature	Meerdere chats	Composer
Code uitleg	Chat	Chat + @ mentions
Refactoring	Chat	CMD+K of Composer

---

Tips voor Beginners

1. Start met Tab completion

   • Gewoon typen en kijken wat er gebeurt
   • Comments zijn je vriend

2. CMD+K voor snelle edits

   • Selecteer precies wat je wilt aanpassen
   • Wees specifiek in je instructie

3. Chat voor vragen

   • Als je iets niet begrijpt
   • Als je opties wilt vergelijken

4. @ mentions voor context

   • AI weet niet automatisch over andere files
   • Voeg relevante files toe met @

---

Keyboard Shortcuts Cheat Sheet

Actie	Mac	Windows
Tab completion accept	Tab	Tab
Inline edit	CMD+K	Ctrl+K
Open Chat	CMD+Shift+L	Ctrl+Shift+L
Open Composer	CMD+I	Ctrl+I
Accept suggestion	CMD+Y	Ctrl+Y
Reject suggestion	CMD+N	Ctrl+N

---

Tools

• Cursor
• GitHub

---

Lesopdracht (2 uur)

Cursor Verkennen

Deel 1: Setup (20 min)

1. Download en installeer Cursor
2. Sign in met GitHub
3. Open je Todo app project
4. Verken de interface

Deel 2: Tab Completion (30 min)

Maak nieuwe file src/components/LoadingSpinner.tsx:

1. Typ comment: // Loading spinner component with size prop
2. Laat Tab completion de rest doen
3. Itereer met meer comments
4. Noteer: hoe goed is de completion?

Deel 3: CMD+K Oefenen (30 min)

Open je TodoList component:

1. Selecteer de list rendering code
2. CMD+K → "Add loading state with skeleton"
3. Selecteer een button
4. CMD+K → "Add disabled state while loading"
5. Selecteer een function
6. CMD+K → "Add try-catch with error toast"

Noteer wat werkt en wat niet.

Deel 4: Chat + @ Mentions (20 min)

1. Open Chat (CMD+Shift+L)
2. Vraag: "@TodoList.tsx What could I improve in this component?"
3. Vraag: "@lib/supabase.ts How do I add real-time subscriptions?"
4. Probeer @Docs voor Next.js documentatie

Deel 5: Composer Proberen (20 min)

1. Open Composer (CMD+I)
2. Vraag: "Create a Settings page with dark mode toggle and notification preferences. Use our existing component style."
3. Review de gegenereerde files
4. Accept of reject

Deliverable

• Screenshot van werkende Tab completion
• 3 voorbeelden van CMD+K edits
• Notities: wat werkt wel/niet goed

---

Huiswerk (2 uur)

Bouw Feature met Cursor

Deel 1: Feature Bouwen (1.5 uur)

Voeg "Due Dates" toe aan je Todo app:

1. Elk todo kan een due date hebben
2. Toon due date in de lijst
3. Sorteer op due date
4. Markeer overdue items in rood

Gebruik ALLE Cursor features:

• Tab completion voor nieuwe code
• CMD+K voor aanpassingen
• Chat voor vragen
• Composer voor multi-file changes

Deel 2: Reflectie (30 min)

Schrijf vergelijking (400 woorden):

• Cursor vs OpenCode: wat is beter?
• Welke feature gebruik je het meest?
• Is free tier voldoende?
• Ga je overstappen?

Deliverable

• Werkende Due Dates feature
• GitHub commit met de changes
• Reflectie (400 woorden)

---

Leerdoelen

Na deze les kan de student:

• Cursor installeren en configureren
• Tab completion effectief gebruiken
• CMD+K gebruiken voor inline edits
• Chat gebruiken met @ mentions voor context
• Composer mode gebruiken voor multi-file generatie
• Het verschil beoordelen tussen Cursor en OpenCode
• De juiste Cursor feature kiezen per taak