rubberducky/novi-lessons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: les 9

Browse Source
This commit is contained in:
Tim Rijkse
2026-04-22 07:05:35 +02:00
parent d5599a601c
commit 4606e96dcc
9 changed files with 3125 additions and 763 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1545
Les09-Cursor-Deep-Dive/Les09-Docenttekst.md Normal file
View File

File diff suppressed because it is too large Load Diff

314
Les09-Cursor-Deep-Dive/Les09-Huiswerk.md Normal file
View File

@@ -0,0 +1,314 @@
# Les 9 Huiswerk: Bouw je eigen app met de 5 Cursor-technieken
**Vak:** AI-Assisted Development
**Opleiding:** NOVI Hogeschool Utrecht
**Deadline:** Voor de volgende les
---
## Overzicht
In de les heb je 5 Cursor-technieken geleerd en toegepast op LinkVault. Nu is het tijd om te laten zien dat je deze technieken zelfstandig kunt toepassen. Je gaat een **eigen app** bouwen van scratch -- geen LinkVault!
---
## Kies je app
Kies een van de volgende projecten (of bedenk er zelf een):
| Optie | Omschrijving |
|-------|-------------|
| **Recepten app** | Recepten opslaan met ingredienten, bereidingswijze en tags |
| **Film tracker** | Films bijhouden met rating, genre en watchlist |
| **Notitie app** | Notities met categorieen en zoekfunctie |
| **Eigen idee** | Overleg dit eerst met Tim voordat je begint! |
**Tech stack:** Next.js 16, TypeScript, Tailwind CSS (net als in de les).
---
## Checklist: Wat moet je opleveren?
Gebruik deze checklist om te controleren of je alles hebt gedaan. Elk punt is **verplicht** (tenzij anders aangegeven).
- [ ] **1. Cursor Rules** -- `.cursor/rules/` map aangemaakt met minimaal 2 rule bestanden (met YAML frontmatter!)
- [ ] **2. Plan Mode** -- Plan Mode gebruikt om je app te plannen (maak een screenshot van je plan)
- [ ] **3. Agent Mode** -- Agent Mode gebruikt om minimaal 2 features te bouwen
- [ ] **4. Debug Mode** -- Debug Mode gebruikt voor minstens 1 bug (maak een screenshot van je debug sessie)
- [ ] **5. Tests** -- Tests geschreven met de agent (minimaal 3 unit tests)
- [ ] **6. Code Review** -- "Find Issues" gedraaid en eventuele issues gefixt
- [ ] **7. Semantic Commits** -- Semantic commits gemaakt (feat:, fix:, docs:, etc.)
- [ ] **8. GitHub** -- Alles gepusht naar een GitHub repository
- [ ] **9. (Bonus)** -- Pull Request aangemaakt en door Cursor laten reviewen
---
## Wat lever je in?
1. **GitHub repository link** -- Zorg dat de repo public is (of nodig Tim uit als collaborator)
2. **Korte reflectie (200 woorden)** -- Beantwoord deze vragen:
- Welke Cursor-technieken werkten het beste voor jou?
- Waar liep je vast?
- Wat doe je de volgende keer anders?
3. **Screenshots** van:
- Je Plan Mode plan
- Een Debug Mode sessie
- Je test resultaten (terminal output)
---
## Tips
- Begin met Plan Mode! Laat Cursor eerst een plan maken voordat je gaat bouwen.
- Commit vroeg en vaak. Gebruik semantic commits vanaf het begin.
- Loop je vast? Gebruik Debug Mode -- beschrijf de fout en laat Cursor helpen.
- Houd je prompt requests in de gaten. Je hebt 500 fast requests per maand op het Student Plan.
---
## Appendix A: Keyboard Shortcuts Reference
Alle belangrijke Cursor sneltoetsen op een rij:
| Actie | Windows / Linux | macOS |
|-------|----------------|-------|
| Chat openen | `Ctrl+L` | `Cmd+L` |
| Plan Mode toggle | `Shift+Tab` | `Shift+Tab` |
| Inline Edit | `Ctrl+K` | `Cmd+K` |
| Composer | `Ctrl+I` | `Cmd+I` |
| Autocomplete accepteren | `Tab` | `Tab` |
| Terminal openen | `` Ctrl+` `` | `` Ctrl+` `` |
| Command Palette | `Ctrl+Shift+P` | `Cmd+Shift+P` |
---
## Appendix B: .cursor/rules Templates
Maak een `.cursor/rules/` map in je project root en voeg daar `.mdc` bestanden toe. Hieronder staan templates die je kunt kopieren en aanpassen voor je eigen project.
### project.mdc (algemene projectregels)
```markdown
---
description: Algemene projectregels en conventies
alwaysApply: true
---
# Project Regels
## Tech Stack
- Next.js 16 met App Router
- TypeScript (strict mode)
- Tailwind CSS voor styling
## Conventies
- Gebruik functionele componenten met TypeScript interfaces
- Bestandsnamen in kebab-case
- Componenten in PascalCase
- Gebruik `async/await` in plaats van `.then()` chains
## Mappenstructuur
- `src/app/` -- App Router pagina's en layouts
- `src/components/` -- Herbruikbare componenten
- `src/lib/` -- Utility functies en types
- `src/types/` -- TypeScript type definities
```
### components.mdc (componentregels)
```markdown
---
description: Regels voor React componenten
globs:
- "src/components/**/*.tsx"
- "src/app/**/*.tsx"
---
# Component Regels
## Structuur
- Elke component heeft een eigen map met index.tsx
- Props worden gedefinieerd als TypeScript interface boven de component
- Gebruik `"use client"` alleen wanneer nodig (interactieve componenten)
## Styling
- Gebruik Tailwind utility classes
- Geen inline styles
- Gebruik `cn()` helper voor conditionele classes
## Toegankelijkheid
- Alle images hebben een alt attribuut
- Interactieve elementen hebben aria-labels
- Gebruik semantische HTML elementen
```
### styles.mdc (styling regels)
```markdown
---
description: Regels voor styling en Tailwind gebruik
globs:
- "src/**/*.css"
- "src/**/*.tsx"
---
# Styling Regels
## Tailwind CSS
- Gebruik de standaard Tailwind kleurenpalet
- Definieer custom kleuren in `tailwind.config.ts`
- Gebruik `dark:` variant voor dark mode support
- Responsive design: mobile-first (`sm:`, `md:`, `lg:`)
## CSS Bestanden
- Gebruik `globals.css` alleen voor CSS variabelen en base styles
- Geen component-specifieke CSS bestanden -- gebruik Tailwind classes
```
---
## Appendix C: Prompt Templates
Goede prompts maken het verschil. Hieronder staan templates die je kunt gebruiken voor elke techniek.
### 1. Plan Mode prompt
```
Ik wil een [app naam] bouwen met Next.js 16, TypeScript en Tailwind CSS.
De app moet het volgende kunnen:
- [Feature 1]
- [Feature 2]
- [Feature 3]
Maak een gedetailleerd plan met:
1. Mappenstructuur
2. Benodigde componenten
3. Data model / types
4. Stappen om te bouwen (in volgorde)
Gebruik de App Router en server components waar mogelijk.
```
### 2. Agent Mode feature prompt
```
Bouw de [feature naam] feature voor mijn app.
Wat het moet doen:
- [Beschrijving van de feature]
- [Verwacht gedrag]
- [Edge cases]
Gebruik bestaande types uit src/types/ en componenten uit src/components/.
Volg de regels in .cursor/rules/.
```
### 3. Debug Mode prompt
```
Ik krijg de volgende fout:
[Plak hier de foutmelding of beschrijf het onverwachte gedrag]
Wat ik verwacht: [beschrijf het verwachte gedrag]
Wat er gebeurt: [beschrijf wat er daadwerkelijk gebeurt]
Het relevante bestand is [bestandsnaam]. Kun je de bug vinden en fixen?
```
### 4. Test writing prompt
```
Schrijf unit tests voor [component/functie naam].
Test minimaal:
- Het happy path (normaal gebruik)
- Edge cases (lege input, lange strings, etc.)
- Error handling
Gebruik de bestaande test setup in het project.
```
### 5. Semantic commits prompt
```
Maak een semantic commit message voor de huidige wijzigingen.
Gebruik dit formaat:
- feat: voor nieuwe features
- fix: voor bugfixes
- docs: voor documentatie
- style: voor opmaak (geen code wijzigingen)
- refactor: voor code refactoring
- test: voor tests
- chore: voor overige taken
Houd de message kort en beschrijvend in het Engels.
```
### 6. Code review prompt
```
Review de code in [bestandsnaam of map].
Let op:
- TypeScript best practices
- Performance issues
- Security problemen
- Toegankelijkheid
- Code duplicatie
Geef concrete suggesties voor verbeteringen.
```
---
## Appendix D: Troubleshooting
### Plan Mode verschijnt niet
| Probleem | Oplossing |
|----------|----------|
| Plan Mode optie niet zichtbaar | Zorg dat je Cursor versie up-to-date is (Help > Check for Updates) |
| Toggle doet niets | Probeer `Shift+Tab` in het chat venster, niet in de editor |
| Plan wordt niet gegenereerd | Zorg dat je prompt duidelijk genoeg is -- geef context over wat je wilt bouwen |
### Agent Mode voert niets uit
| Probleem | Oplossing |
|----------|----------|
| Agent maakt geen bestanden aan | Controleer of Agent Mode actief is (niet Ask Mode) in de chat dropdown |
| Agent stopt halverwege | Druk op "Continue" of geef een follow-up prompt |
| Agent maakt fouten | Wees specifieker in je prompt, verwijs naar bestaande bestanden |
### .cursor/rules worden niet opgepikt
| Probleem | Oplossing |
|----------|----------|
| Rules hebben geen effect | Controleer dat de map `.cursor/rules/` heet (niet `.cursor/rule/`) |
| YAML frontmatter fout | Controleer de `---` blokken bovenaan elk `.mdc` bestand |
| Globs matchen niet | Check je glob patronen -- `src/**/*.tsx` matcht alles onder src/ |
| Bestanden staan verkeerd | De `.cursor/` map moet in je project root staan |
### Tests draaien niet
| Probleem | Oplossing |
|----------|----------|
| `npm test` geeft fout | Controleer of Vitest of Jest is geinstalleerd: `npm install -D vitest` |
| Tests worden niet gevonden | Bestandsnaam moet eindigen op `.test.ts` of `.test.tsx` |
| Import errors in tests | Controleer je `tsconfig.json` paths en test configuratie |
| Module not found | Voer `npm install` uit om dependencies te installeren |
### Git / GitHub problemen
| Probleem | Oplossing |
|----------|----------|
| `git push` geeft permission denied | Controleer of je SSH key of personal access token is ingesteld |
| Repo niet gevonden op GitHub | Maak eerst een repo aan op github.com en volg de instructies |
| Merge conflicts | Gebruik `git status` om conflicten te zien, los ze op in Cursor |
| Vergeten te committen | `git add .` en daarna `git commit -m "feat: beschrijving"` |
---
Veel succes en plezier met bouwen! Kom je er niet uit, stel je vraag in het les-kanaal.

943
Les09-Cursor-Deep-Dive/Les09-Slide-Overzicht.md Normal file
View File

@@ -0,0 +1,943 @@
# Les 9 -- Slide-overzicht
## Cursor Deep Dive: Van Agent Harness tot Code Review (18 slides)
**Cursus:** AI Developer -- NOVI Hogeschool Utrecht
**Duur:** 3 uur (180 minuten) | 09:00 - 12:00
**Project:** LinkVault -- een bookmark manager (in-memory, geen database)
> **Voorkennis studenten:** Cursor basics uit Les 3 (Chat, Inline Edit, Composer, Tab, @ Mentions, .cursorrules, Skills/Docs). Next.js 16, TypeScript, Tailwind uit eerdere lessen. Studenten hebben Cursor al geinstalleerd met een actief abonnement.
---
## Timing-overzicht
| Tijd | Duur | Onderwerp | Slide(s) | Vorm |
|------|------|-----------|----------|------|
| 09:00 - 09:10 | 10 min | Welkom + terugblik | 1 - 2 | Klassikaal |
| 09:10 - 09:35 | 25 min | Theorie: Agent Harness, Rules, Plan Mode, Debug Mode, Code Review | 3 - 9 | Klassikaal |
| 09:35 - 09:55 | 20 min | Setup: nieuw project + 3 .cursor/rules bestanden | 10 - 11 | Samen |
| 09:55 - 10:15 | 20 min | Plan Mode: plan LinkVault, review, Build | 12 | Klassikaal |
| 10:15 - 10:30 | 15 min | Pauze | -- | -- |
| 10:30 - 11:05 | 35 min | Agent Mode: features bouwen | 13 | Klassikaal |
| 11:05 - 11:25 | 20 min | Debug Mode: Tim's bug vinden en fixen | 14 | Klassikaal |
| 11:25 - 11:45 | 20 min | Code Review & Testing + Semantic commits + Git push | 15 - 16 | Klassikaal |
| 11:45 - 11:55 | 10 min | (Optioneel) PR review met Cursor | 16 | Klassikaal |
| 11:55 - 12:00 | 5 min | Afsluiting + huiswerk | 17 - 18 | Klassikaal |
---
## Slide-indeling
---
### Slide 1: Titelslide
**Timing:** 09:00 - 09:05 (5 min)
**Titel:** Les 9 -- Cursor Deep Dive
**Ondertitel:** Van Agent Harness tot Code Review -- LinkVault bouwen
```
+========================================================+
| |
| LES 9: CURSOR DEEP DIVE |
| |
| Van Agent Harness tot Code Review |
| LinkVault bouwen met 5 Agent-technieken |
| |
| Tim -- NOVI Hogeschool Utrecht |
| |
+========================================================+
```
**Spreektekst:**
- Welkom bij les 9. Vandaag gaan we diep in Cursor.
- We bouwen een complete app: LinkVault, een bookmark manager.
- Jullie hebben Cursor al draaien met een abonnement -- we gaan er direct mee aan de slag.
---
### Slide 2: Planning Vandaag
**Timing:** 09:05 - 09:10 (5 min)
```
+========================================================+
| PLANNING VANDAAG |
| |
| 09:00 Welkom + terugblik |
| 09:10 Theorie: hoe werkt een coding agent? |
| 09:35 Setup: project + rules |
| 09:55 Plan Mode: LinkVault plannen |
| 10:15 -- PAUZE -- |
| 10:30 Agent Mode: features bouwen |
| 11:05 Debug Mode: bug opsporen |
| 11:25 Code Review + commits + push |
| 11:45 (Optioneel) PR review |
| 11:55 Afsluiting + huiswerk |
+========================================================+
LEERDOELEN:
+----------------------------------------------------+
| 1. Agent Harness begrijpen (rules + tools + model) |
| 2. .cursor/rules met YAML frontmatter schrijven |
| 3. Plan Mode workflow beheersen |
| 4. Debug Mode systematisch toepassen |
| 5. Code Review + semantic commits + push |
+----------------------------------------------------+
```
**Spreektekst:**
- Dit is het programma. We bouwen alles stap voor stap in Cursor.
- Aan het eind hebben jullie een werkende LinkVault-app met nette commits op GitHub.
- De PR review is optioneel -- alleen als we tijd over hebben.
---
### Slide 3: Hoe werkt een Coding Agent?
**Timing:** 09:10 - 09:15 (5 min)
```
+========================================================+
| HOE WERKT EEN CODING AGENT? |
| |
| Een coding agent is een LLM met een "harness": |
| een systeem dat het model aanstuurt. |
| |
| +--------------------------------------------------+ |
| | AGENT HARNESS | |
| | | |
| | +------------+ +----------+ +--------+ | |
| | |INSTRUCTIONS| | TOOLS | | MODEL | | |
| | | | | | | | | |
| | | .cursor/ | | file edit| | Claude | | |
| | | rules/ | | search | | GPT-4o | | |
| | | prompts | | terminal | | etc. | | |
| | +-----+------+ +----+-----+ +---+----+ | |
| | | | | | |
| | +-------+-------+------+-------+ | |
| | | | | |
| | [ AGENT LOOP ] | |
| | think -> act -> observe -> repeat | |
| +--------------------------------------------------+ |
+========================================================+
```
**Kernpunten:**
- **Instructions:** regels die je meegeeft (system prompt + rules bestanden)
- **Tools:** wat de agent KAN doen (bestanden lezen/schrijven, terminal, zoeken)
- **Model:** het LLM dat beslissingen neemt (Claude, GPT-4o, etc.)
- De agent draait in een **loop**: denken, actie, observeren, herhalen
- Cursor IS zo'n harness. Jij geeft de instructions, Cursor levert tools + model.
**Spreektekst:**
- Een coding agent is meer dan een chatbot. Het is een LLM dat in een harness draait — een systeem met drie onderdelen.
- Instructions: dat zijn de regels die je meegeeft. Jouw rules-bestanden plus de system prompt van Cursor zelf.
- Tools: de agent kan bestanden lezen, bewerken, door je code zoeken, en commando's uitvoeren in de terminal. Dat is het verschil met ChatGPT — hij kan daadwerkelijk dingen doen in je project.
- Model: het AI-model dat de beslissingen neemt. Claude, GPT-4o, et cetera.
- De agent werkt in een loop: denken, actie uitvoeren, het resultaat bekijken, en herhalen. Net zoals jij als developer zou doen.
- Cursor IS zo'n harness. Jij levert de instructions via rules-bestanden, Cursor levert de tools en het model.
---
### Slide 4: Rules & Skills
**Timing:** 09:15 - 09:20 (5 min)
```
+========================================================+
| RULES & SKILLS |
| |
| .cursor/rules/ directory -- drie types: |
| |
| +--------------------------------------------------+ |
| | TYPE | HOE? | VOORBEELD | |
| |-----------------|----------------|----------------| |
| | Always-on | alwaysApply: | project.mdc | |
| | | true | (tech stack, | |
| | | | conventies) | |
| |-----------------|----------------|----------------| |
| | Auto-attached | globs: | components.mdc | |
| | | "src/**/*.tsx" | (component | |
| | | | regels) | |
| |-----------------|----------------|----------------| |
| | Agent-requested | description: | api-design.mdc | |
| | | "use when..." | (wordt opge- | |
| | | | vraagd) | |
| +--------------------------------------------------+ |
| |
| VUISTREGEL: Houd rules MINIMAAL en SPECIFIEK. |
| Te veel regels = ruis = slechtere output. |
| |
| SKILLS = dynamische rules (bv. @docs, @web). |
| Cursor kan zelf beslissen welke skills te gebruiken. |
+========================================================+
```
**Kernpunten:**
- Elke `.mdc` file heeft YAML frontmatter bovenaan
- **alwaysApply: true** = altijd meegestuurd naar het model
- **globs** = alleen meegestuurd als je werkt in bestanden die matchen
- **description** = agent kan het zelf ophalen als het relevant lijkt
- Minder is meer. 3-5 regels per bestand. Geen roman schrijven.
**Spreektekst:**
- In Les 3 hadden jullie een enkel .cursorrules bestand. Dat werkt nog steeds, maar Cursor heeft nu een veel krachtiger systeem: de .cursor/rules directory.
- Elk bestand is een .mdc file — Markdown Configuration — met YAML frontmatter bovenaan.
- Er zijn drie types. Always-on rules met alwaysApply: true — die staan altijd aan. Gebruik dit voor je project.mdc met tech stack en conventies.
- Auto-attached rules met een globs patroon. Werk je in een TSX-bestand? Dan laadt Cursor automatisch je components.mdc. Slim en efficiënt.
- En agent-requested rules: de agent kan zelf rules opvragen als hij denkt dat ze relevant zijn. Dat gebruiken we vandaag niet actief.
- Vuistregel: houd je rules kort en specifiek. Teveel regels is ruis, en ruis levert slechtere output.
- Skills zijn dynamische rules die Cursor automatisch kan laden. Die laten we even voor wat het is vandaag.
---
### Slide 5: Context Management
**Timing:** 09:20 - 09:25 (5 min)
```
+========================================================+
| CONTEXT MANAGEMENT |
| |
| Het model heeft BEPERKT werkgeheugen (context window). |
| Elk gesprek begint "leeg". Nieuwe feature = NIEUWE CHAT.|
| |
| CONTEXT TOEVOEGEN: |
| +--------------------------------------------------+ |
| | @file | specifiek bestand meegeven | |
| | @folder | hele map als context | |
| | @codebase | Cursor doorzoekt je project | |
| | @web | zoekt het internet | |
| | @docs | doorzoekt documentatie | |
| +--------------------------------------------------+ |
| |
| TIPS: |
| +--------------------------------------------------+ |
| | - Combineer: @file layout.tsx + @docs Next.js | |
| | - Nieuwe feature? Start ALTIJD een nieuwe chat | |
| | - Lang gesprek? Context raakt vervuild | |
| | - Geef RELEVANTE context, niet ALLES | |
| +--------------------------------------------------+ |
+========================================================+
```
**Kernpunten:**
- Context window = werkgeheugen van het model. Alles wat je toevoegt kost ruimte.
- Nieuwe feature = nieuwe chat. Dit is de belangrijkste tip van vandaag.
- @codebase laat Cursor zoeken, maar wees specifiek in je vraag.
- Combineer @ mentions voor maximale relevantie.
**Spreektekst:**
- Context is misschien het allerbelangrijkste concept. De agent weet alleen wat je hem vertelt.
- Denk aan de agent als een briljante developer die net op je project begint. Hij kent de taal en frameworks, maar JOUW code kent hij niet. Jij moet hem vertellen waar hij moet kijken.
- Met @ mentions voeg je context toe: @file voor een specifiek bestand, @folder voor een hele map, @codebase om Cursor je project te laten doorzoeken.
- Je kunt ze combineren: '@data.ts @BookmarkCard.tsx — voeg een edit knop toe'. Dan heeft de agent precies de bestanden die hij nodig heeft.
- De allerbelangrijkste tip: nieuwe feature, nieuwe chat. Na teveel heen-en-weer raakt de context vervuild en gaat de agent afdwalen.
---
### Slide 6: Plan Mode
**Timing:** 09:25 - 09:30 (5 min)
```
+========================================================+
| PLAN MODE (Shift+Tab) |
| |
| Start ELKE feature met een plan! |
| |
| WORKFLOW: |
| +--------------------------------------------------+ |
| | | |
| | 1. RESEARCH Vraag Cursor om te onderzoeken | |
| | | (bestaande code, docs, structuur) | |
| | v | |
| | 2. VRAGEN Stel vragen, krijg opties | |
| | | | |
| | v | |
| | 3. PLAN Cursor schrijft plan in markdown | |
| | | | |
| | v | |
| | 4. EDIT JIJ reviewt en past het plan aan | |
| | | | |
| | v | |
| | 5. BUILD Tab terug naar Agent Mode | |
| | en voer het plan uit | |
| | | |
| +--------------------------------------------------+ |
| |
| WAAROM? Voorkomt dat de agent meteen gaat bouwen |
| zonder na te denken. Jij houdt de controle. |
+========================================================+
```
**Kernpunten:**
- Shift+Tab schakelt naar Plan Mode
- De agent denkt NA maar voert NIET uit -- geen file edits
- Jij reviewt het plan voordat er code geschreven wordt
- Na goedkeuring: Tab terug naar Agent Mode om het plan uit te voeren
- Dit is hoe professionals met agents werken
**Spreektekst:**
- Dit is DE belangrijkste workflow van vandaag. Plan Mode. Begin ALTIJD met een plan.
- Hoe werkt het? Open de chat met Ctrl+L, druk Shift+Tab om naar Plan Mode te schakelen. De agent gaat dan NIET meteen code schrijven — hij doet eerst research en maakt een stap-voor-stap plan.
- Dat plan is bewerkbaar. Jij kunt stappen schrappen, toevoegen, herschrijven. Agent te ambitieus? Schrap die stappen.
- Pas als je tevreden bent, schakel je terug naar Agent Mode en laat je het plan uitvoeren.
- Waarom zo belangrijk? Geen plan betekent dat de agent z'n eigen gang gaat. Dan ben je uren bezig met fixen. Een goed plan levert gerichte output en minder iteraties. Dat spaart je requests.
---
### Slide 7: Agent Mode vs Ask Mode
**Timing:** 09:30 - 09:33 (3 min)
```
+========================================================+
| AGENT MODE vs ASK MODE |
| |
| +------------------------+ +----------------------+ |
| | AGENT MODE | | ASK MODE | |
| | (Tab) | | (Tab Tab) | |
| | | | | |
| | - VOERT UIT | | - ANTWOORDT ALLEEN | |
| | - Edit bestanden | | - Geen file edits | |
| | - Draait terminal | | - Geen terminal | |
| | - Maakt nieuwe files | | - Alleen uitleg | |
| | | | | |
| | Gebruik voor: | | Gebruik voor: | |
| | - Features bouwen | | - Code begrijpen | |
| | - Refactoring | | - Concepten leren | |
| | - Bug fixen | | - Architectuur- | |
| | - Tests schrijven | | beslissingen | |
| +------------------------+ +----------------------+ |
| |
| VUISTREGEL: |
| "Moet er code veranderen?" -> Agent Mode |
| "Wil ik iets begrijpen?" -> Ask Mode |
+========================================================+
```
**Kernpunten:**
- Agent Mode is de standaard -- hier bouw je mee
- Ask Mode is voor vragen stellen zonder dat er iets verandert
- Wisselen met Tab (Agent) of dubbel Tab (Ask)
- Plan Mode (Shift+Tab) is een derde optie: denken zonder uitvoeren
**Spreektekst:**
- In Cursor heb je twee modes in de chat: Agent en Ask. Het verschil is simpel.
- Ask Mode is voor vragen. 'Hoe werkt useEffect?' of 'Leg deze code uit.' De agent leest, maar raakt niks aan.
- Agent Mode is voor actie. De agent kan bestanden aanmaken, bewerken, verwijderen, en terminal commando's uitvoeren. Multi-file edits, refactoring, nieuwe features — dat doe je in Agent Mode.
- Vuistregel: moet er code veranderen? Agent Mode. Wil je iets begrijpen? Ask Mode.
- Vandaag werken we vooral in Agent Mode en Plan Mode.
---
### Slide 8: Debug Mode
**Timing:** 09:33 - 09:36 (3 min)
```
+========================================================+
| DEBUG MODE |
| |
| NIET: error kopieer-plakken en hopen op het beste. |
| WEL: systematisch debuggen met de agent. |
| |
| WORKFLOW: |
| +--------------------------------------------------+ |
| | | |
| | 1. HYPOTHESES "Wat kan dit veroorzaken?" | |
| | | | |
| | v | |
| | 2. LOGGING Voeg console.log / breakpoints | |
| | | toe op strategische plekken | |
| | v | |
| | 3. REPRODUCE Reproduceer de bug | |
| | | | |
| | v | |
| | 4. ANALYZE Bekijk output, beperk scope | |
| | | | |
| | v | |
| | 5. TARGETED FIX Pas alleen aan wat nodig is | |
| | | |
| +--------------------------------------------------+ |
| |
| TIP: Geef Cursor de CONTEXT. Welk bestand? |
| Welke functie? Wat verwacht je? Wat gebeurt er? |
+========================================================+
```
**Kernpunten:**
- Debug Mode is een mindset, niet een knop
- Stuur de agent met hypotheses, niet met "fix this"
- Voeg logging toe VOORDAT je gaat fixen
- Gerichte fix > shotgun approach
**Spreektekst:**
- Debug Mode is een aanpak, niet een knop. Het verschil: bij een simpele bug plak je de error in de chat en de agent fixt het. Dat werkt voor de makkelijke gevallen.
- Maar bij complexe bugs heb je een systematische aanpak nodig. De agent genereert hypotheses over wat er mis kan zijn, voegt logging toe op strategische plekken, vraagt jou om de bug te reproduceren, analyseert de logs, en stelt dan een gerichte fix voor.
- Niet gokken, maar bewijzen. Dat is het verschil.
- We gaan dit straks live doen. Ik ga bewust een bug in onze code plaatsen en dan laten zien hoe je die systematisch opspoort.
---
### Slide 9: Code Review & Testing
**Timing:** 09:36 - 09:40 (4 min -- afronden theorie)
```
+========================================================+
| CODE REVIEW & TESTING |
| |
| 1. FIND ISSUES (Cursor's built-in feature) |
| Cursor scant je code op problemen |
| |
| 2. TESTS SCHRIJVEN |
| Vraag Agent Mode om tests te genereren |
| Prompt: "Schrijf unit tests voor [bestand]" |
| |
| 3. SEMANTIC COMMITS |
| +--------------------------------------------------+ |
| | WORKFLOW: Bouw ALLES eerst. Aan het eind: | |
| | | |
| | feat: nieuwe feature | |
| | fix: bugfix | |
| | refactor: code verbetering | |
| | test: tests toevoegen | |
| | docs: documentatie | |
| | chore: overig (config, deps) | |
| | | |
| | -> Bouw alles in 1 sessie | |
| | -> Aan het einde: splits in logische commits | |
| | -> Dan pas push naar GitHub | |
| +--------------------------------------------------+ |
| |
| 4. PR REVIEW (optioneel, als tijd het toelaat) |
| Cursor kan een PR reviewen als code reviewer |
+========================================================+
```
**Kernpunten:**
- Find Issues = Cursor's self-review feature
- Tests schrijven met Agent Mode (niet handmatig)
- Semantic commits: NIET na elke wijziging committen
- Realistisch: bouw alles, splits achteraf in nette commits
- PR review is optioneel vandaag
**Spreektekst:**
- Het laatste theorieblok, en misschien het belangrijkste voor je professionele ontwikkeling.
- Voordat je iemand anders vraagt om je code te reviewen, doe je altijd eerst een self-review. Dat geldt ook voor AI-geschreven code. Cursor heeft een Find Issues feature die je code scant op problemen.
- Daarnaast kun je de agent vragen om tests te schrijven. Tests zijn je vangnet.
- En dan semantic commits. In plaats van een grote commit met 'app gebouwd', verdeel je je wijzigingen in logische groepen met prefixes als feat:, fix:, test:.
- Maar — en dit is belangrijk — je hoeft niet na elke stap te committen. Vandaag bouwen we alles eerst af, en aan het eind splitsen we de diff op in nette commits. Dat is een realistische workflow.
- Dezelfde standaard voor AI-code als voor handgeschreven code.
---
> **CHECKPOINT THEORIE**
> Vraag aan de klas: "Noem de drie onderdelen van een Agent Harness."
> Verwacht antwoord: Instructions, Tools, Model.
---
### Slide 10: Setup -- Nieuw Project
**Timing:** 09:40 - 09:50 (10 min -- samen doen)
```
+========================================================+
| SETUP: NIEUW PROJECT |
| |
| STAP 1: Maak een nieuw Next.js 16 project |
| |
| $ npx create-next-app@latest linkvault |
| |
| TypeScript? Yes |
| ESLint? Yes |
| Tailwind CSS? Yes |
| src/ directory? Yes |
| App Router? Yes |
| Import alias? @/* (default) |
| |
| STAP 2: Open in Cursor |
| |
| $ cd linkvault |
| $ cursor . |
| |
| STAP 3: Maak de rules directory |
| |
| $ mkdir -p .cursor/rules |
| |
+========================================================+
```
**Spreektekst:**
- We maken een nieuw project. Next.js 16, de nieuwste versie.
- Iedereen doet dit samen. Als je vast zit, steek je hand op.
- Na het project openen we het in Cursor.
> **CHECKPOINT SETUP PROJECT**
> Iedereen moet `linkvault` open hebben in Cursor voordat we verder gaan.
---
### Slide 11: Setup -- .cursor/rules
**Timing:** 09:50 - 09:55 (5 min -- samen doen)
```
+========================================================+
| SETUP: .cursor/rules (3 bestanden) |
| |
| .cursor/ |
| rules/ |
| project.mdc <- altijd actief |
| components.mdc <- bij .tsx bestanden |
| styles.mdc <- bij .css en .tsx bestanden |
+========================================================+
BESTAND 1: .cursor/rules/project.mdc
+------------------------------------------------------+
| --- |
| description: General project rules for LinkVault |
| alwaysApply: true |
| --- |
| |
| # LinkVault Project Rules |
| |
| - Tech stack: Next.js 16, TypeScript, Tailwind CSS |
| - Use App Router (src/app/) |
| - All components in src/components/ |
| - Use English for code, Dutch for UI text |
| - Prefer server components unless interactivity |
| is needed |
+------------------------------------------------------+
BESTAND 2: .cursor/rules/components.mdc
+------------------------------------------------------+
| --- |
| description: Rules for TSX component files |
| globs: "src/components/**/*.tsx" |
| --- |
| |
| # Component Rules |
| |
| - Functional components only (no class components) |
| - Define Props interface above the component |
| - Use PascalCase for component names |
| - Export as named export, not default |
| - Keep components under 80 lines |
+------------------------------------------------------+
BESTAND 3: .cursor/rules/styles.mdc
+------------------------------------------------------+
| --- |
| description: Tailwind and styling rules |
| globs: "**/*.css,**/*.tsx" |
| --- |
| |
| # Styling Rules |
| |
| - Tailwind utility-first: use className, not |
| inline styles |
| - No custom CSS unless absolutely necessary |
| - Color scheme: slate-50 bg, blue-600 primary, |
| slate-800 text |
| - Responsive: mobile-first with sm:/md:/lg: |
| - Dark mode: use dark: variant where applicable |
+------------------------------------------------------+
```
**Spreektekst:**
- Maak deze drie bestanden aan in `.cursor/rules/`.
- Let op de YAML frontmatter bovenaan (tussen de `---`).
- `project.mdc` is altijd actief door `alwaysApply: true`.
- `components.mdc` wordt automatisch geladen als je in `.tsx` bestanden werkt.
- `styles.mdc` geldt voor zowel `.css` als `.tsx` bestanden.
- Houd regels kort en concreet. Geen lange verhalen.
> **CHECKPOINT RULES**
> Iedereen opent `.cursor/rules/` en laat zien: 3 bestanden met YAML frontmatter.
---
### Slide 12: Plan Mode Demo
**Timing:** 09:55 - 10:15 (20 min)
```
+========================================================+
| PLAN MODE: LINKVAULT PLANNEN |
| |
| STAP 1: Open een NIEUWE chat in Cursor |
| STAP 2: Druk Shift+Tab (Plan Mode) |
| STAP 3: Gebruik deze prompt: |
| |
| +--------------------------------------------------+ |
| | "Plan een bookmark manager app genaamd LinkVault. | |
| | Features: | |
| | - Bookmarks toevoegen (URL + titel + tags) | |
| | - Bookmarks weergeven in een lijst | |
| | - Filteren op tags | |
| | - Bookmarks verwijderen | |
| | - In-memory opslag (geen database) | |
| | Maak een gedetailleerd implementatieplan." | |
| +--------------------------------------------------+ |
| |
| WAT TE VERWACHTEN: |
| - Cursor maakt een markdown plan |
| - Bestandsstructuur, componenten, types |
| - GEEN code -- alleen het plan |
| |
| HOE TE REVIEWEN: |
| - Klopt de bestandsstructuur? |
| - Zijn alle features meegenomen? |
| - Past het bij onze rules? |
| - Pas het plan AAN als iets niet klopt |
| |
| NA REVIEW: Tab terug -> Agent Mode -> "Voer het |
| plan uit" |
+========================================================+
```
**Spreektekst:**
- We doen dit samen. Ik laat het voor zien, jullie volgen mee.
- Let op hoe Cursor nadenkt ZONDER code te schrijven.
- Dit is het moment om het plan aan te passen. Straks is het te laat.
- Na review schakelen we naar Agent Mode om het plan uit te laten voeren.
- Cursor bouwt dan de basis: types, componenten, pagina.
> **CHECKPOINT PLAN MODE**
> Iedereen heeft een plan gereviewed en de basis van LinkVault draait lokaal.
> Test: `npm run dev` -> open `localhost:3000` -> je ziet de app.
---
### Slide 13: Agent Mode -- Features bouwen
**Timing:** 10:30 - 11:05 (35 min, na pauze)
```
+========================================================+
| AGENT MODE: FEATURES BOUWEN |
| |
| We bouwen nu extra features met Agent Mode. |
| Start ELKE feature met een NIEUWE CHAT. |
| |
| FEATURE 1: Edit Bookmark |
| +--------------------------------------------------+ |
| | "Voeg een edit-functie toe aan bookmarks. | |
| | Een gebruiker moet de titel, URL en tags van | |
| | een bestaande bookmark kunnen wijzigen. | |
| | Gebruik een modal of inline edit." | |
| +--------------------------------------------------+ |
| |
| FEATURE 2: Tag Filtering |
| +--------------------------------------------------+ |
| | "Voeg tag filtering toe. Toon alle unieke tags | |
| | als klikbare chips boven de lijst. Als een tag | |
| | geselecteerd is, toon alleen bookmarks met die | |
| | tag. Toon ook een 'Alles' optie." | |
| +--------------------------------------------------+ |
| |
| ITEREREN: |
| - Niet tevreden? Geef feedback in DEZELFDE chat |
| - "Maak de chips kleiner" |
| - "Voeg een hover effect toe" |
| - "De filter werkt niet als er spaties in tags staan" |
| |
| NIEUWE FEATURE = NIEUWE CHAT (context management!) |
+========================================================+
```
**Spreektekst:**
- Na de pauze gaan we bouwen.
- Elke feature in een nieuwe chat -- dit is belangrijk voor context management.
- Ik laat Feature 1 voor zien, dan doen jullie Feature 2 zelf.
- Itereer in dezelfde chat als je kleine aanpassingen wilt.
- Niet tevreden met het resultaat? Geef specifieke feedback.
---
### Slide 14: Debug Mode -- Tim's Bug
**Timing:** 11:05 - 11:25 (20 min)
```
+========================================================+
| DEBUG MODE: TIM'S BUG |
| |
| Tim heeft HANDMATIG een bug geintroduceerd in de |
| filter-logica. |
| |
| DE BUG: In het filter-component is |
| tag |
| veranderd naar |
| tag.toUpperCase() |
| in de vergelijking. |
| |
| EFFECT: Tags worden opgeslagen als "react" maar |
| gefilterd als "REACT" -> geen match -> filter "werkt |
| niet". |
| |
| +--------------------------------------------------+ |
| | STAP 1: Reproduceer | |
| | Voeg bookmark toe met tag "react" | |
| | Klik op filter "react" | |
| | -> Geen resultaten! | |
| | | |
| | STAP 2: Debug prompt | |
| | "De tag filter werkt niet. Als ik klik op | |
| | de tag 'react' worden geen bookmarks | |
| | getoond, terwijl er bookmarks zijn met die | |
| | tag. Onderzoek de filter-logica." | |
| | | |
| | STAP 3: Volg Cursor's analyse | |
| | - Cursor onderzoekt het filter-component | |
| | - Vindt de toUpperCase() mismatch | |
| | - Stelt een fix voor | |
| | | |
| | STAP 4: Review de fix | |
| | Klopt de fix? Accept of pas aan. | |
| +--------------------------------------------------+ |
+========================================================+
```
**Spreektekst (voor Tim):**
- Voordat jullie gaan debuggen, introduceer ik even een bug.
- Ik verander in het filter-component `tag` naar `tag.toUpperCase()`.
- Dit is een realistische bug: case-sensitivity in vergelijkingen.
- Jullie taak: gebruik Debug Mode om de bug te vinden en te fixen.
- Geef Cursor goede context: wat werkt niet, wat verwacht je, wat gebeurt er?
> **CHECKPOINT DEBUG**
> Iedereen heeft de bug gevonden en gefixt. De filter werkt weer.
---
### Slide 15: Code Review & Tests
**Timing:** 11:25 - 11:40 (15 min)
```
+========================================================+
| CODE REVIEW & TESTS |
| |
| STAP 1: Find Issues |
| +--------------------------------------------------+ |
| | Gebruik Cursor's "Find Issues" feature | |
| | Cursor scant je code en rapporteert problemen | |
| | -> Fix wat je vindt | |
| +--------------------------------------------------+ |
| |
| STAP 2: Tests schrijven (nieuwe chat!) |
| +--------------------------------------------------+ |
| | "Schrijf unit tests voor de bookmark filter | |
| | logica. Test dat: | |
| | - Filteren op een bestaande tag werkt | |
| | - 'Alles' toont alle bookmarks | |
| | - Case-insensitive filtering werkt" | |
| +--------------------------------------------------+ |
| |
| STAP 3: Semantic Commits |
| +--------------------------------------------------+ |
| | Nu pas committen! Splits je werk in logische | |
| | commits met semantic prefixes: | |
| | | |
| | $ git add src/types/ | |
| | $ git commit -m "feat: add bookmark types | |
| | and interfaces" | |
| | | |
| | $ git add src/components/BookmarkForm.tsx | |
| | $ git commit -m "feat: add bookmark creation | |
| | form with tag support" | |
| | | |
| | $ git add src/components/TagFilter.tsx | |
| | $ git commit -m "feat: add tag filtering | |
| | with chip-based UI" | |
| | | |
| | $ git add src/components/__tests__/ | |
| | $ git commit -m "test: add unit tests for | |
| | tag filter logic" | |
| | | |
| | $ git add src/components/TagFilter.tsx | |
| | $ git commit -m "fix: resolve case-sensitivity | |
| | bug in tag filtering" | |
| +--------------------------------------------------+ |
+========================================================+
```
**Spreektekst:**
- Nu gaan we ons werk opschonen.
- Eerst: Find Issues -- laat Cursor je code scannen.
- Dan: tests schrijven voor de filter-logica.
- Tot slot: alles committen. NIET alles in een commit!
- We splitsen in logische, semantische commits.
- Dit is hoe het in de echte wereld werkt: je bouwt eerst, dan maak je de history netjes.
---
### Slide 16: Git Push + PR
**Timing:** 11:40 - 11:55 (15 min, waarvan 10 min optioneel)
```
+========================================================+
| GIT PUSH + PR |
| |
| STAP 1: Push naar GitHub |
| +--------------------------------------------------+ |
| | $ git remote add origin | |
| | https://github.com/[jouw-username]/linkvault | |
| | $ git push -u origin main | |
| +--------------------------------------------------+ |
| |
| STAP 2: Maak een PR (als je op een branch werkt) |
| +--------------------------------------------------+ |
| | $ git checkout -b feature/linkvault-v1 | |
| | $ git push -u origin feature/linkvault-v1 | |
| | -> Open GitHub -> Create Pull Request | |
| +--------------------------------------------------+ |
| |
| ============= OPTIONEEL (als tijd het toelaat) ====== |
| |
| STAP 3: PR Review met Cursor |
| +--------------------------------------------------+ |
| | Cursor kan PRs reviewen als code reviewer. | |
| | Open de PR URL in Cursor en vraag: | |
| | "Review deze PR. Focus op code kwaliteit, | |
| | mogelijke bugs, en best practices." | |
| | | |
| | Dit is OPTIONEEL. Alleen doen als er tijd is. | |
| +--------------------------------------------------+ |
| |
+========================================================+
```
**Spreektekst:**
- Push je werk naar GitHub. Maak een repo aan als je die nog niet hebt.
- Als we tijd over hebben, laat ik zien hoe Cursor een PR kan reviewen.
- Dit is optioneel -- het belangrijkste is dat je code gepusht is.
---
### Slide 17: Samenvatting
**Timing:** 11:55 - 11:58 (3 min)
```
+========================================================+
| SAMENVATTING: 5 KEY TAKEAWAYS |
| |
| +--------------------------------------------------+ |
| | | |
| | 1. AGENT HARNESS | |
| | Instructions + Tools + Model = Agent | |
| | Jij controleert de instructions (rules) | |
| | | |
| | 2. RULES MINIMAAL HOUDEN | |
| | 3 bestanden, YAML frontmatter, korte regels | |
| | Te veel regels = slechtere output | |
| | | |
| | 3. PLAN VOOR JE BOUWT | |
| | Shift+Tab -> Plan Mode -> review -> build | |
| | Elke feature begint met een plan | |
| | | |
| | 4. CONTEXT MANAGEMENT | |
| | Nieuwe feature = nieuwe chat | |
| | Geef relevante @ mentions mee | |
| | | |
| | 5. SYSTEMATISCH DEBUGGEN | |
| | Hypothese -> logging -> reproduce -> | |
| | analyze -> targeted fix | |
| | | |
| +--------------------------------------------------+ |
+========================================================+
```
**Spreektekst:**
- Dit zijn de vijf dingen die ik wil dat jullie onthouden.
- Het gaat niet om welk model je gebruikt, maar hoe je de agent aanstuurt.
- Goede rules, goede plannen, goede context = goede output.
---
### Slide 18: Huiswerk
**Timing:** 11:58 - 12:00 (2 min)
```
+========================================================+
| HUISWERK |
| |
| Zie: Les09-Huiswerk.md |
| |
| +--------------------------------------------------+ |
| | De opdracht staat volledig beschreven in | |
| | Les09-Huiswerk.md. | |
| | | |
| | Kort samengevat: | |
| | - Breid LinkVault uit met eigen features | |
| | - Gebruik Plan Mode + Agent Mode + Debug Mode | |
| | - Maak nette semantic commits | |
| | - Push naar GitHub | |
| | | |
| | Deadline en inleverinstructies staan in het | |
| | huiswerkbestand. | |
| +--------------------------------------------------+ |
| |
| VRAGEN? Stel ze nu of via Teams. |
| |
| Volgende les: we gaan verder met AI-assisted |
| development workflows. |
| |
+========================================================+
```
**Spreektekst:**
- Het huiswerk staat in `Les09-Huiswerk.md`. Lees dat bestand goed door.
- Jullie gaan LinkVault uitbreiden met eigen features.
- Gebruik alles wat je vandaag geleerd hebt: Plan Mode, Agent Mode, Debug Mode.
- Vragen? Nu stellen of via Teams.
---
## Troubleshooting
### Veelvoorkomende problemen tijdens de les
| Probleem | Oorzaak | Oplossing |
|----------|---------|-----------|
| `npx create-next-app` faalt | Node.js niet geinstalleerd of verouderd | `node -v` checken, minimaal v18. Installeer via nodejs.org |
| Cursor herkent .mdc bestanden niet | Verkeerde directory structuur | Check: `.cursor/rules/project.mdc` (niet `.cursor/project.mdc`) |
| Plan Mode doet niets | Verkeerde modus | Check linksboven in chat: moet "Plan" zeggen, niet "Agent" |
| Agent Mode maakt geen bestanden | Permissions of path probleem | Check dat je in de juiste directory bent (`pwd` in terminal) |
| Filter bug is al gefixt door Cursor | Cursor heeft het vanzelf opgelost | Tim moet de bug opnieuw introduceren NA de build stap |
| `npm run dev` geeft errors | Ontbrekende dependencies | `npm install` opnieuw draaien |
| Git push faalt | Geen remote of geen rechten | `git remote -v` checken, GitHub repo aanmaken |
| Semantic commits zijn verwarrend | Studenten weten niet wat waar hoort | Laat de voorbeelden van slide 15 zien, doe het samen |
| Context window vol | Te lang in dezelfde chat gebleven | Nieuwe chat starten, relevante bestanden opnieuw @-mentionen |
| Cursor genereert andere code dan verwacht | Model-variatie is normaal | Dit is OK -- focus op het PROCES, niet op identieke output |
### Tim's Bug -- exacte stappen
1. Wacht tot ALLE features gebouwd zijn (na slide 13)
2. Open het tag filter component (waarschijnlijk `src/components/TagFilter.tsx` of vergelijkbaar)
3. Zoek de filter-logica waar tags vergeleken worden
4. Verander `tag` naar `tag.toUpperCase()` in de vergelijking (bijv. in een `.filter()` of `.includes()` call)
5. Sla op, NIET committen
6. Laat studenten de bug vinden met Debug Mode
---
## Timing-samenvatting (verificatie)
| Blok | Start | Eind | Duur | Inhoud |
|------|-------|------|------|--------|
| 1 | 09:00 | 09:10 | 10 min | Welkom + terugblik (slides 1-2) |
| 2 | 09:10 | 09:35 | 25 min | Theorie (slides 3-9) |
| 3 | 09:35 | 09:55 | 20 min | Setup project + rules (slides 10-11) |
| 4 | 09:55 | 10:15 | 20 min | Plan Mode demo (slide 12) |
| -- | 10:15 | 10:30 | 15 min | PAUZE |
| 5 | 10:30 | 11:05 | 35 min | Agent Mode features (slide 13) |
| 6 | 11:05 | 11:25 | 20 min | Debug Mode (slide 14) |
| 7 | 11:25 | 11:45 | 20 min | Code Review + commits (slides 15-16) |
| 8 | 11:45 | 11:55 | 10 min | (Optioneel) PR review (slide 16) |
| 9 | 11:55 | 12:00 | 5 min | Afsluiting + huiswerk (slides 17-18) |
| **Totaal** | **09:00** | **12:00** | **180 min** | |
---
## Checklist voor Tim (voor de les)
- [ ] Next.js 16 beschikbaar (`npx create-next-app@latest` geeft v16)
- [ ] Cursor werkt op docentlaptop
- [ ] Drie `.mdc` bestanden voorbereid (kopieer van slide 11)
- [ ] Git/GitHub werkt
- [ ] Weet waar de bug geintroduceerd moet worden (filter component)
- [ ] `Les09-Huiswerk.md` is klaar en beschikbaar voor studenten
- [ ] Backup plan als Cursor offline is: theorie doornemen + pair programming

BIN
Les09-Cursor-Deep-Dive/Les09-Slides.key Executable file
View File

Binary file not shown.

BIN
Les09-Cursor-Deep-Dive/Les09-Slides.pptx Normal file
View File

Binary file not shown.