# 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

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

```bash
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
```

```bash
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:**

```text
# .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:**

```text
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.