novi-lessons/Les03-Cursor-Basics/Les03-Slide-Overzicht.md

Les 3 — Cursor Basics

Slide Overzicht (Klas A — fysiek, demo + hands-on)

Lesvorm: Tim demonstreert klassikaal, daarna zelf bouwen. Doel: Cursor installeren + activeren als Student, en de basis-sneltoetsen leren. Vervolg op: Les 2 — OpenCode Aansluit op: Les 4 — TypeScript Fundamentals (en later Les 14 — Cursor + Vercel)

---

Blok-structuur

Blok	Onderwerp	Slides
1	Welkom + Wat is Cursor	1–3
2	Student Plan + Installatie	4–6
3	Skills/Docs + Eerste project	7–9
4	Drie sneltoetsen + request-management	10–14
5	.cursorrules introductie	15
6	Hands-on: bouw je eerste componenten	16–19
7	Afronding + vooruitblik	20

---

Slide 1: Title

Les 3 — Cursor Basics

Visual:

• Background: CREAM
• "Les 3" in BLUE
• "Cursor Basics" in BLACK
• Subtitle: "Je eerste AI-powered editor — gratis voor studenten"
• Iconen onderaan: Cursor-logo, Next.js, Tailwind

---

Slide 2: Vandaag

Wat je aan het eind kunt

Drie dingen:

1. Cursor installeren + Student Plan activeren
2. De drie hoofdsneltoetsen kennen (Tab / Cmd+K / Cmd+L)
3. Een werkend Next.js-project met Hero-component bouwen

Werkwijze: ik demonstreer, jullie kijken mee. Na de pauze bouw je zelf je eerste componenten.

Visual: drie stappen van "blanco scherm" naar "werkende app".

---

Slide 3: Wat is Cursor

VS Code, maar met AI ingebouwd

Wat het is:

• Een fork van Visual Studio Code
• AI is GEEN extensie — het zit in de IDE zelf
• Werkt met Claude, GPT, Gemini en lokale modellen
• Je kunt al je VS Code extensies blijven gebruiken

Waarom relevant voor jou:

• Industry standard voor AI-assisted development
• Vacatures noemen het steeds vaker
• Gratis Pro voor studenten via NOVI e-mail

Visual: Cursor logo + screenshot van de IDE.

---

Slide 4: Student Plan

Gratis Pro voor studenten

Wat je krijgt:

• 500 fast requests per maand (gratis tier: 50)
• Toegang tot premium modellen (Claude, GPT-4, Gemini)
• Onbeperkt gebruik van tab-completion

Hoe activeer je:

1. Ga naar cursor.com/students
2. Log in met je NOVI e-mailadres
3. Bevestig via SheerID (1–2 minuten verificatie)
4. Je account is upgraded naar Pro Student

Visual: cursor.com/students landingspagina.

---

Slide 5: Installeren

Vier stappen

# 1. Download van cursor.com
# 2. Installeer als gewone app
# 3. Open Cursor → kies "Sign in"
# 4. Optioneel: importeer VS Code settings + extensies

Bij eerste start:

• Cursor vraagt of je VS Code instellingen wilt importeren — Ja
• Kies een theme (zelfde als je VS Code)
• Klaar — je staat in Cursor

Visual: download-pagina screenshot.

---

Slide 6: Eerste login + check

Werkt het Student Plan?

Test:

1. Open Cursor → Settings (Cmd+,)
2. Tab General → check "Account"
3. Status moet zijn: "Pro Student"

Als het "Free" zegt: opnieuw inloggen via cursor.com/students en daarna Cursor herstarten.

Visual: Settings → Account screenshot met "Pro Student" label.

---

Slide 7: Skills / Docs configureren

Geef Cursor frameworks-kennis

Wat het doet:

• Cursor indexeert officiële documentatie
• Je kunt erin zoeken via @docs:Next.js in chat
• Belangrijk: framework-specifieke vragen worden veel beter

Setup:

1. Settings → Features → Docs
2. Klik + Add new doc
3. Voeg toe: Next.js, React, Tailwind CSS
4. Wacht tot indexering klaar is (1–2 min)

Visual: Docs-instellingen met drie toegevoegde frameworks.

---

Slide 8: Eerste Next.js project

Met npx create-next-app

cd ~/web
npx create-next-app@latest mijn-eerste-cursor-app

# Beantwoord prompts:
# TypeScript? Ja
# ESLint? Ja
# Tailwind CSS? Ja
# src/ directory? Ja
# App Router? Ja
# Import alias @/* ? Ja

cd mijn-eerste-cursor-app
npm run dev    # → localhost:3000

Visual: terminal met de prompts.

---

Slide 9: Cursor opent het project

Eerste indruk

Wat je ziet:

• Linker zijbalk = file explorer (zoals VS Code)
• Midden = editor
• Onder = terminal
• Rechts: AI-paneel (toggle met Cmd+L)

Wat is anders dan VS Code:

• AI-paneel rechts
• Tab-completion is slimmer (kijkt mee met je hele bestand)
• Cmd+K geeft je een AI-prompt direct in de editor

Visual: Cursor venster met annotaties.

---

Slide 10: De drie sneltoetsen

Onthoud deze drie

Sneltoets	Wat het doet	Kost
Tab	Accept AI auto-completion	Gratis
Cmd+K	Inline edit op selectie	1 request
Cmd+L	Chat-paneel openen	1 request

Eén regel om te onthouden:

• Klein → Tab
• Eén bestand wijzigen → Cmd+K
• Vraag stellen → Cmd+L

Visual: drie iconen + toetsenbord-grafiek.

---

Slide 11: Tab — autocomplete

Gratis, oneindig, slim

Wat het doet:

• Cursor analyseert je hele bestand + recente edits
• Suggereert hele blokken code, niet alleen één woord
• Druk Tab om te accepteren, Esc om te negeren

Wanneer gebruik je het:

• Boilerplate (imports, types, props)
• Herhalende patronen
• Voorspelbare code (CRUD operations, list renders)

Tip: typ een commentaar // render team list — Cursor genereert de hele component eronder.

Visual: code-editor met grijze suggestie-tekst.

---

Slide 12: Cmd+K — inline edit

Specifieke wijziging op selectie

Hoe:

1. Selecteer code (of zet je cursor op een regel)
2. Druk Cmd+K
3. Er opent een input-balkje boven je code
4. Typ wat je wilt — bv. "converteer naar TypeScript"
5. Cursor toont een diff
6. Tab = Accept, Esc = Reject

Wanneer gebruik je het:

• Refactor één functie of component
• Variabele hernoemen
• TypeScript-types toevoegen
• Comment uitleggen

Kost: 1 request per Cmd+K.

Visual: screenshot van inline-prompt boven geselecteerde code.

---

Slide 13: Cmd+L — Chat

Vragen + grotere taken

Hoe:

1. Druk Cmd+L — chat-paneel opent rechts
2. Typ je vraag of taak
3. Optioneel: @file:foo.tsx, @docs:Next.js, @web voor context
4. Cursor antwoordt + kan voorstellen om code te wijzigen

Wanneer gebruik je het:

• Uitleg vragen ("hoe werkt useEffect?")
• Grotere taken die meerdere bestanden raken
• Code-review op een specifieke functie

Kost: 1 request per chat-conversatie (vervolg-berichten gratis tot je een nieuwe context start).

Visual: chat-paneel met @docs:Next.js mention.

---

Slide 14: Request management

Hoe haal je veel uit 500 requests

Tips:

• Combineer taken in 1 Cmd+L: "maak een Hero met titel, ondertitel, twee CTA-knoppen en responsive design"
• Gebruik Tab voor alles wat eenvoudig is — kost niets
• Cmd+K alleen voor gerichte één-bestand-edits
• Cmd+L met @file om Cursor exact te vertellen waar te kijken

Anti-pattern:

• Tien losse Cmd+K's voor één feature
• Cmd+L met te weinig context ("maak iets cools")

Visual: request-budget-meter met "500 / maand".

---

Slide 15: .cursorrules introductie

Per-project instructies

Wat het is:

• Bestand .cursorrules in de project-root
• Cursor leest dit bij elke AI-prompt
• Vertelt "hoe wij hier dingen doen"

Voorbeeld:

# .cursorrules

- Gebruik TypeScript strict mode
- Tailwind voor styling, geen CSS modules
- Server components by default; "use client" alleen waar nodig
- Imports met @/ alias voor src/
- Functional components, geen classes

Genereren: vraag Cursor in chat (Cmd+L): "Maak een .cursorrules voor dit Next.js project". Kost 1 request, je hebt een goede basis.

Visual: code-block met voorbeeld-regels.

---

Slide 16: Hands-on — overzicht

Drie taken na de pauze

Taak 1 — Hero component (via Cmd+L)

• Titel + ondertitel + twee CTA-knoppen
• Gradient achtergrond
• Responsive

Taak 2 — Styling tweak (via Cmd+K)

• Kleur van de knoppen aanpassen
• Spacing tunen

Taak 3 — Extra feature (vrije keuze)

• FeatureCards / ContactForm / Footer

Tot slot: git init && git add . && git commit -m "first cursor build"

Visual: drie taken-kaarten.

---

Slide 17: Taak 1 demo — Hero

Live met Cmd+L

Wat ik live demonstreer:

Prompt in Cmd+L:
"Bouw een Hero-component in app/page.tsx.
Specs:
- Gradient achtergrond (blauw)
- Grote titel + ondertitel
- Twee CTA-knoppen: 'Aan de slag' en 'Meer info'
- Responsive
- Tailwind only"

Cursor maakt diff → ik bekijk → Accept → save → bekijk in browser.

Visual: screenshot van resultaat in browser.

---

Slide 18: Taak 2 demo — Cmd+K tweak

Snelle styling-aanpassing

Wat ik live demonstreer:

1. Selecteer de twee knoppen
2. Cmd+K → "verander primaire knop naar paars gradient, secundaire naar transparant met rand"
3. Tab = accept
4. Bekijk in browser

Effect: zelfde feature, kleine verandering, één request.

Visual: voor/na vergelijking van de knoppen.

---

Slide 19: Hands-on tijd

Nu jullie — 75 minuten

Aan het werk in je eigen project:

1. Open Cursor in je net gescaffolde project
2. Volg de stappen uit Les03-Lesopdracht.pdf
3. Drie taken: Hero / Cmd+K tweak / extra feature naar keuze
4. Eindig met git commit

Vragen? Tim loopt rond.

Visual: opdrachtkaart.

---

Slide 20: Vooruitblik

Wat volgt

Les 4 — TypeScript Fundamentals:

• Strict types, generics, utility types
• TypeScript in je Next.js project

Veel later (Les 14):

• Cursor 3 — Editor Window vs Agents Window
• Agent mode en background agents
• Vercel deployment + preview URLs

Vandaag was de basis — Tab, Cmd+K, Cmd+L. Vanaf nu ga je deze sneltoetsen elke les terugzien.

Visual: roadmap van Les 3 → Les 14.