Files
novi-lessons/Samenvattingen/Les09-Samenvatting.md
2026-04-22 07:05:35 +02:00

3.1 KiB
Raw Blame History

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:0009:10 Welkom + terugblik Klassikaal
09:1009:35 Theorie: Agent Harness, Rules, Plan/Debug/Review Mode Klassikaal
09:3509:55 Setup: nieuw project + 3 .cursor/rules bestanden Samen
09:5510:15 Plan Mode: plan LinkVault → review → Build Klassikaal
10:1510:30 Pauze
10:3011:05 Agent Mode: features bouwen Klassikaal
11:0511:25 Debug Mode: deterministische bug vinden en fixen Klassikaal
11:2511:45 Code Review & Testing + semantic commits + git push Klassikaal
11:4511:55 (Optioneel) PR review met Cursor Klassikaal
11:5512: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