97 lines
3.1 KiB
Markdown
97 lines
3.1 KiB
Markdown
# 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*
|