# Les 9: Cursor Deep Dive (Student Plan)

---

## Hoofdstuk
**Deel 2: Technical Foundations** (Les 4-9)

## Beschrijving
Studenten hebben Cursor met het Student Plan. Tijd voor een deep dive in de 5 professionele workflows: **Rules & Skills, Plan Mode, Agent Mode, Debug Mode, en Code Review & Testing**. We bouwen een nieuwe app from scratch: **LinkVault** (bookmark manager, in-memory, Next.js 16 + TypeScript + Tailwind).

---

## Lesopbouw (3 uur)

| Tijd | Onderwerp | Vorm |
|------|-----------|------|
| 09:00–09:10 | Welkom + terugblik | Klassikaal |
| 09:10–09:35 | Theorie: Agent Harness, Rules, Plan/Debug/Review Mode | Klassikaal |
| 09:35–09:55 | Setup: nieuw project + 3 `.cursor/rules` bestanden | Samen |
| 09:55–10:15 | Plan Mode: plan LinkVault → review → Build | Klassikaal |
| 10:15–10:30 | Pauze | — |
| 10:30–11:05 | Agent Mode: features bouwen | Klassikaal |
| 11:05–11:25 | Debug Mode: deterministische bug vinden en fixen | Klassikaal |
| 11:25–11:45 | Code Review & Testing + semantic commits + git push | Klassikaal |
| 11:45–11:55 | (Optioneel) PR review met Cursor | Klassikaal |
| 11:55–12:00 | Afsluiting + huiswerk | Klassikaal |

---

## De 5 Kernvaardigheden

### 1. Rules & Skills
- `.cursor/rules/` directory met `.mdc` bestanden (YAML frontmatter)
- 3 bestanden: `project.mdc` (alwaysApply), `components.mdc` (globs: tsx), `styles.mdc` (globs: css/tsx)
- Houd rules kort, specifiek, en wijs naar voorbeelden

### 2. Plan Mode
- `Shift+Tab` → agent researcht, stelt vragen, maakt interactief plan
- Plan bewerken in markdown → "Build" klikken
- Start elke feature met een plan

### 3. Agent Mode
- Agent = uitvoeren (files, terminal, multi-file). Ask = alleen vragen.
- Goede context geven: `@file`, `@folder`, `@codebase`, `@docs`
- Itereren met screenshots en feedback

### 4. Debug Mode
- Voor complexe bugs: hypotheses → logging → reproduceren → analyseren → fix
- Tim introduceert bug handmatig (deterministic) → studenten debuggen

### 5. Code Review & Testing
- "Find Issues" voor self-review
- Tests schrijven met Agent Mode
- Semantic commits: achteraf changes opdelen in logische groepen
- (Optioneel) PR review met Cursor

---

## Tools
- Cursor (Student Plan)
- Next.js 16
- TypeScript
- Tailwind CSS

---

## Lesmateriaal
- `Les09-Slide-Overzicht.md`
- `Les09-Docenttekst.md`
- `Les09-Huiswerk.md`

---

## Leerdoelen
Na deze les kan de student:
- Uitleggen hoe een coding agent werkt (harness: instructions + tools + model)
- `.cursor/rules` opzetten met meerdere bestanden (alwaysApply, globs)
- Plan Mode gebruiken om een feature te plannen
- Agent Mode inzetten voor multi-file feature development
- Debug Mode gebruiken voor systematisch debuggen
- Code review doen met "Find Issues" en tests schrijven
- Semantic commits maken en een PR aanmaken
- Een app from scratch bouwen met alle 5 technieken

---

## Voorbereiding docent
- [ ] `npx create-next-app@latest` getest
- [ ] 3 `.cursor/rules` bestanden voorbereid
- [ ] Plan Mode demo doorgelopen
- [ ] Bug voor Debug Mode voorbereid (tag.toUpperCase() in filter)
- [ ] GitHub repo klaar voor push demo

---

*Laatste update: april 2026*