fix: better order
This commit is contained in:
Tim Rijkse
@@ -1,174 +1,284 @@
|
||||
# Les 13: Mastering Cursor met Claude Opus & Advanced Skills
|
||||
|
||||
> 📋 **Lesmateriaal nog niet uitgewerkt**
|
||||
>
|
||||
> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
|
||||
> - Les13-Slide-Overzicht.md
|
||||
> - Les13-Lesplan.md
|
||||
> - Les13-Bijlage-A-Lesopdracht.md
|
||||
> - Les13-Bijlage-B-Huiswerkopdracht.md
|
||||
# Les 13: Mastering Cursor
|
||||
|
||||
---
|
||||
|
||||
## Hoofdstuk
|
||||
**Hoofdstuk 3: Advanced** (Les 8-18)
|
||||
**Hoofdstuk 3: Advanced** (Les 10-18)
|
||||
|
||||
## Beschrijving
|
||||
Geavanceerde technieken met Cursor en high-end models.
|
||||
Verdieping in Cursor's geavanceerde features. Leer model keuze, Composer Mode, @ mentions, en .cursorrules optimaal gebruiken.
|
||||
|
||||
---
|
||||
|
||||
## Te Behandelen
|
||||
|
||||
### Model Deep Dive
|
||||
### Model Keuze
|
||||
|
||||
**Waarom Claude Opus voor Complex:**
|
||||
- Superieure reasoning
|
||||
- 200K context
|
||||
- Beste multi-file orchestration
|
||||
**Wanneer welk model?**
|
||||
|
||||
**Wanneer Welk Model? (Complexity Matrix)**
|
||||
| Model | Gebruik voor | Kosten |
|
||||
|-------|-------------|--------|
|
||||
| **Haiku** | Simpele taken, autocomplete | Goedkoop |
|
||||
| **Sonnet** | Dagelijks werk, de meeste taken | Medium |
|
||||
| **Opus** | Complexe architectuur, multi-file | Duur |
|
||||
|
||||
| Complexiteit | Model |
|
||||
|--------------|-------|
|
||||
| Simpel | Haiku |
|
||||
| Gemiddeld | Sonnet |
|
||||
| Complex | Opus |
|
||||
**Vuistregels:**
|
||||
- Tab completion: Haiku (automatisch)
|
||||
- CMD+K: Sonnet (default)
|
||||
- Composer: Sonnet of Opus
|
||||
- Complexe debugging: Opus
|
||||
|
||||
### Composer Mode Mastery
|
||||
- Multi-file generatie
|
||||
- Agent-like planning
|
||||
- Autonome iteratie
|
||||
---
|
||||
|
||||
### Wanneer Composer vs Chat
|
||||
- Composer: nieuwe features
|
||||
- Chat: begrip/vragen
|
||||
### Composer Mode Diepgaand
|
||||
|
||||
### @ Mentions Deep Dive
|
||||
**Wat is Composer?**
|
||||
Multi-file generatie in één keer. Cursor plant en voert wijzigingen uit over meerdere bestanden.
|
||||
|
||||
**Alle Types:**
|
||||
- @Files
|
||||
- @Folders
|
||||
- @Code
|
||||
- @Docs
|
||||
- @Web
|
||||
**Wanneer Composer gebruiken:**
|
||||
- Nieuwe feature met meerdere components
|
||||
- Refactoring over meerdere files
|
||||
- Boilerplate generatie
|
||||
- Complexe wijzigingen
|
||||
|
||||
**Advanced patterns**
|
||||
**Composer Workflow:**
|
||||
1. CMD+I opent Composer
|
||||
2. Beschrijf je doel duidelijk
|
||||
3. Voeg context toe met @ mentions
|
||||
4. Laat Cursor plannen
|
||||
5. Review het plan
|
||||
6. Accept of reject per file
|
||||
7. Itereer met feedback
|
||||
|
||||
**Voorbeeld prompt:**
|
||||
```
|
||||
Create a user profile page with:
|
||||
- @components/ui/ style components
|
||||
- Profile header with avatar
|
||||
- Edit form with validation
|
||||
- Save to @lib/supabase.ts
|
||||
- Loading and error states
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### @ Mentions Systeem
|
||||
|
||||
**Alle types:**
|
||||
|
||||
| Mention | Wat het doet | Voorbeeld |
|
||||
|---------|--------------|-----------|
|
||||
| `@file.tsx` | Specifieke file | `@Button.tsx` |
|
||||
| `@folder/` | Hele folder | `@components/` |
|
||||
| `@codebase` | Zoek in codebase | `@codebase auth logic` |
|
||||
| `@Docs` | Officiële docs | `@Docs Next.js routing` |
|
||||
| `@Web` | Web zoeken | `@Web Supabase auth setup` |
|
||||
|
||||
**Best practices:**
|
||||
- Wees specifiek met file mentions
|
||||
- Gebruik folder mentions voor context
|
||||
- @Docs voor up-to-date informatie
|
||||
- Combineer mentions voor betere context
|
||||
|
||||
---
|
||||
|
||||
### .cursorrules Advanced
|
||||
|
||||
**Meerdere rules files:**
|
||||
|
||||
```
|
||||
.cursor/
|
||||
└── rules/
|
||||
├── general.mdc # Project-brede regels
|
||||
├── components.mdc # Component conventies
|
||||
├── api.mdc # API route regels
|
||||
└── testing.mdc # Test conventies
|
||||
```
|
||||
|
||||
**Effectieve rules schrijven:**
|
||||
|
||||
```markdown
|
||||
# Component Rules
|
||||
|
||||
## Structure
|
||||
Alle components moeten volgen:
|
||||
1. Props interface bovenaan
|
||||
2. Component function
|
||||
3. Named export onderaan
|
||||
|
||||
## Example
|
||||
\`\`\`tsx
|
||||
interface ButtonProps {
|
||||
label: string
|
||||
onClick: () => void
|
||||
variant?: 'primary' | 'secondary'
|
||||
}
|
||||
|
||||
export function Button({ label, onClick, variant = 'primary' }: ButtonProps) {
|
||||
return (
|
||||
<button onClick={onClick} className={...}>
|
||||
{label}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
\`\`\`
|
||||
|
||||
## DON'Ts
|
||||
- Geen default exports
|
||||
- Geen inline styles
|
||||
- Geen any types
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Codebase Indexing
|
||||
- Hoe Cursor indexeert
|
||||
- Optimaliseren
|
||||
|
||||
### .cursorrules Files
|
||||
- Project-specifieke instructies die persistent zijn
|
||||
- Powerful patterns
|
||||
- Hoe effectieve rules schrijven
|
||||
**Hoe Cursor indexeert:**
|
||||
- Scant alle files in je project
|
||||
- Bouwt semantic understanding
|
||||
- Gebruikt voor autocomplete en context
|
||||
|
||||
### Skills + Composer
|
||||
- Hoe Skills Composer krachtiger maken
|
||||
**Optimaliseren:**
|
||||
1. Goede `.cursorignore` (node_modules, .next, etc.)
|
||||
2. Semantische naming
|
||||
3. Duidelijke file structuur
|
||||
4. Comments waar nodig
|
||||
|
||||
**Re-indexeren:**
|
||||
CMD+Shift+P → "Reindex"
|
||||
|
||||
---
|
||||
|
||||
### Cost Management
|
||||
- Token usage monitoren
|
||||
- Free tier strategies
|
||||
- Wanneer Pro worth it
|
||||
|
||||
**Token gebruik monitoren:**
|
||||
- Cursor toont token count in chat
|
||||
- Check monthly usage in settings
|
||||
|
||||
**Bespaartips:**
|
||||
1. Gebruik Haiku voor simpele taken
|
||||
2. Beperk context (niet hele codebase)
|
||||
3. Wees specifiek in prompts
|
||||
4. Fresh chat voor nieuwe onderwerpen
|
||||
|
||||
**Free tier strategie:**
|
||||
- Focus op Tab completion (onbeperkt)
|
||||
- Gebruik CMD+K spaarzaam
|
||||
- Composer alleen voor grote taken
|
||||
|
||||
---
|
||||
|
||||
## Tools
|
||||
- Cursor
|
||||
- Claude Opus/Sonnet/Haiku
|
||||
- Skills.sh
|
||||
- Claude models (Haiku/Sonnet/Opus)
|
||||
- .cursorrules
|
||||
|
||||
---
|
||||
|
||||
## Lesopdracht (2 uur)
|
||||
|
||||
### Complexe Feature met Cursor Composer + Claude + Skills
|
||||
### Multi-Step Form Wizard
|
||||
|
||||
**Bouw Multi-Step Form Wizard:**
|
||||
**Bouw met Composer:**
|
||||
|
||||
| Stap | Features |
|
||||
|------|----------|
|
||||
| 1 | Personal info met avatar |
|
||||
| 2 | Company info met autocomplete |
|
||||
| 3 | Preferences (dynamic based on previous) |
|
||||
| 4 | Review & confirm met edit |
|
||||
| 1 | Personal info (naam, email) |
|
||||
| 2 | Preferences (theme, notifications) |
|
||||
| 3 | Review & confirm |
|
||||
| 4 | Success animation |
|
||||
|
||||
**Extra Requirements:**
|
||||
- Progress indicator met validation visualization
|
||||
- Per-step validation
|
||||
**Requirements:**
|
||||
- Progress indicator
|
||||
- Per-stap validatie
|
||||
- localStorage persistence
|
||||
- Success animation met confetti
|
||||
- Error handling throughout
|
||||
- TypeScript strict
|
||||
- Shadcn components
|
||||
- Tailwind styling
|
||||
- Mobile responsive
|
||||
|
||||
### Process
|
||||
1. Install/verify Skills
|
||||
2. Use Composer met Opus/Sonnet - comprehensive prompt
|
||||
3. Let orchestrate
|
||||
4. CMD+K voor refinements
|
||||
5. Chat met @ mentions voor vragen
|
||||
**Process:**
|
||||
|
||||
### Track
|
||||
- Welk model wanneer
|
||||
- Composer iterations
|
||||
- Skills impact
|
||||
- @ mentions patterns
|
||||
- Cost estimate
|
||||
**Deel 1: Composer Setup (30 min)**
|
||||
1. Open Composer (CMD+I)
|
||||
2. Schrijf comprehensive prompt
|
||||
3. Include @ mentions naar relevante files
|
||||
4. Kies Sonnet of Opus
|
||||
|
||||
**Deel 2: Generatie & Review (45 min)**
|
||||
1. Laat Composer genereren
|
||||
2. Review elke file
|
||||
3. Accept wat goed is
|
||||
4. Reject wat niet past
|
||||
|
||||
**Deel 3: Refinement (45 min)**
|
||||
1. Gebruik CMD+K voor kleine fixes
|
||||
2. Chat voor vragen
|
||||
3. Itereer tot het werkt
|
||||
|
||||
### Deliverable
|
||||
- Working wizard
|
||||
- Analyse document
|
||||
- Werkende form wizard
|
||||
- Notities: welk model wanneer, hoeveel iteraties
|
||||
|
||||
---
|
||||
|
||||
## Huiswerk (2 uur)
|
||||
|
||||
### Maak Perfect .cursorrules File
|
||||
### Perfecte .cursorrules
|
||||
|
||||
### Deel 1: Research (30 min)
|
||||
- Bestudeer 3-5 .cursorrules voorbeelden online
|
||||
- Analyseer wat effectief maakt
|
||||
**Deel 1: Research (30 min)**
|
||||
- Zoek 3-5 .cursorrules voorbeelden online
|
||||
- Analyseer wat ze effectief maakt
|
||||
|
||||
### Deel 2: Write Comprehensive (1 uur)
|
||||
**Deel 2: Write Comprehensive Rules (1 uur)**
|
||||
|
||||
Maak definitieve .cursorrules voor JOUW stack.
|
||||
Maak complete .cursorrules voor je eindproject:
|
||||
|
||||
**Include:**
|
||||
- Project context
|
||||
- Code style
|
||||
- TypeScript conventions
|
||||
- React/Next.js patterns
|
||||
- Styling guidelines
|
||||
- Error handling
|
||||
- Accessibility
|
||||
- Testing
|
||||
- Security
|
||||
- Common pitfalls
|
||||
- Skills reference
|
||||
```markdown
|
||||
# [Project Naam]
|
||||
|
||||
### Deel 3: Test & Iterate (30 min)
|
||||
- Nieuw project met .cursorrules
|
||||
- Use Composer
|
||||
- Verifieer Cursor volgt rules
|
||||
- Itereer
|
||||
## Tech Stack
|
||||
[Jouw stack]
|
||||
|
||||
## Code Conventions
|
||||
[Jouw conventies]
|
||||
|
||||
## File Naming
|
||||
[Jouw regels]
|
||||
|
||||
## Component Structure
|
||||
[Jouw patterns]
|
||||
|
||||
## Styling
|
||||
[Tailwind regels]
|
||||
|
||||
## API Routes
|
||||
[Route conventies]
|
||||
|
||||
## Error Handling
|
||||
[Error patterns]
|
||||
|
||||
## DON'Ts
|
||||
[Wat te vermijden]
|
||||
```
|
||||
|
||||
**Deel 3: Test (30 min)**
|
||||
1. Start nieuw component
|
||||
2. Vraag Cursor om het te bouwen
|
||||
3. Check: volgt Cursor je regels?
|
||||
4. Itereer indien nodig
|
||||
|
||||
### Deliverable
|
||||
- .cursorrules file
|
||||
- Uitleg document
|
||||
- Test results
|
||||
- Deel als gist
|
||||
- Complete .cursorrules file
|
||||
- Screenshot van Cursor die regels volgt
|
||||
- Korte analyse: wat werkt goed, wat niet
|
||||
|
||||
---
|
||||
|
||||
## Leerdoelen
|
||||
Na deze les kan de student:
|
||||
- Het juiste Claude model kiezen per complexiteit
|
||||
- Composer mode effectief gebruiken voor complexe features
|
||||
- @ mentions strategisch inzetten
|
||||
- .cursorrules files schrijven voor consistent gedrag
|
||||
- Skills combineren met Composer voor betere output
|
||||
- Token usage monitoren en kosten beheren
|
||||
- Het juiste Claude model kiezen per taak
|
||||
- Composer Mode effectief gebruiken voor multi-file features
|
||||
- @ mentions strategisch inzetten voor context
|
||||
- Geavanceerde .cursorrules files schrijven
|
||||
- Codebase indexing optimaliseren
|
||||
- Token gebruik monitoren en kosten beheren
|
||||
|
||||
Reference in New Issue
Block a user