Context geven aan Claude

12 min Beginner Gratis

Context geven aan Claude

De kwaliteit van wat Claude Code oplevert hangt voor 80% af van de context die je geeft. In deze les leer je de twee krachtigste tools daarvoor: CLAUDE.md bestanden en @-mentions.

Waarom context zo belangrijk is

Stel je voor dat je een aannemer inhuurt om je keuken te verbouwen. Als je alleen zegt “maak het mooi”, krijg je misschien iets wat jij niet mooi vindt. Maar als je zegt “ik wil een moderne keuken, met wit marmer, een kookeiland, en een budget van €15.000” — dan weet de aannemer precies wat je bedoelt.

Met Claude Code werkt het net zo. Hoe meer context, hoe beter het resultaat.

CLAUDE.md: je project handleiding

Een CLAUDE.md bestand is een Markdown-bestand dat Claude automatisch leest wanneer het in je project werkt. Het is als een instructiehandleiding voor je AI-assistent.

Waar zet je het neer?

Er zijn drie niveaus:

  1. ~/CLAUDE.md — Geldt voor al je projecten (persoonlijke voorkeuren)
  2. ./CLAUDE.md — In de root van je project (projectspecifiek)
  3. ./src/CLAUDE.md — In een submap (mapspecifiek)

Claude leest ze allemaal, van globaal naar specifiek.

Wat zet je erin?

Hier is een voorbeeld voor een webproject:

# Mijn Portfolio Site

## Tech Stack
- HTML, CSS, JavaScript
- Geen frameworks — vanilla alleen
- Hosting op Netlify

## Stijl
- Donker thema
- Kleurenpalet: #0d1117 (achtergrond), #58a6ff (accent)
- Font: Inter voor tekst, JetBrains Mono voor code

## Regels
- Schrijf comments in het Nederlands
- Gebruik geen externe libraries tenzij ik het vraag
- Mobile-first design
- Bestanden max 200 regels
Tip

Begin simpel. Je kunt je CLAUDE.md altijd uitbreiden. Het belangrijkste is dat de tech stack en je voorkeuren erin staan. Claude past zich daarop aan.

CLAUDE.md aanmaken

De makkelijkste manier:

/init

Claude maakt een CLAUDE.md aan op basis van je bestaande project. Je kunt het daarna aanpassen.

Of maak het handmatig:

Maak een CLAUDE.md bestand aan voor dit project.
Het is een React website met Tailwind CSS.
Ik wil TypeScript, Nederlandse comments, en mobile-first design.

@-mentions: bestanden aanwijzen

Soms wil je dat Claude naar een specifiek bestand kijkt. Dat doe je met @:

Bekijk @src/components/Header.tsx en fix de TypeScript errors
Pas @src/styles/global.css aan zodat het kleurenpalet
overeenkomt met het design in @docs/design.png
Info

Claude kan ook afbeeldingen lezen! Als je een screenshot of design file hebt, kun je die met @ meegeven. Claude analyseert de afbeelding en past de code aan.

Wanneer gebruik je @-mentions?

  • Bij specifieke bugs — Wijs Claude naar het exacte bestand
  • Bij design references — Laat Claude een screenshot of mockup zien
  • Bij refactoring — Geef aan welke bestanden moeten veranderen
  • Bij review — Laat Claude specifieke bestanden nakijken

De kracht van goede context

Vergelijk deze twee prompts:

Slecht:

Maak een login pagina

Goed:

Maak een login pagina die past bij de bestaande styling in
@src/styles/global.css. Gebruik een email + wachtwoord formulier.
Voeg client-side validatie toe.
De pagina moet responsive zijn en het bestaande
Header component gebruiken uit @src/components/Header.tsx.

Het verschil in resultaat is enorm. De tweede prompt geeft Claude alles wat het nodig heeft om een login pagina te maken die naadloos past in je bestaande project.

Best practices

1. Wees specifiek over wat je wilt

Niet: “Maak het mooier” Wel: “Vergroot de hero sectie, voeg een gradient toe van blauw naar paars, en maak de tekst groter”

2. Verwijs naar bestaande code

Niet: “Maak een soortgelijke component” Wel: “Maak een component in dezelfde stijl als @src/components/Card.tsx”

3. Geef constraints

Niet: “Bouw een formulier” Wel: “Bouw een formulier met max 5 velden, client-side validatie, en gebruik het bestaande Button component”

4. Vermeld wat je NIET wilt

Maak een navigatiebar. Gebruik GEEN externe libraries,
geen hamburger menu, en geen dropdown menus.
Houd het simpel: logo links, 3 links rechts.
Let op

Een veelgemaakte fout is te weinig context geven en dan gefrustreerd raken over het resultaat. Claude is geen gedachtenlezer — het doet zijn best met de informatie die het heeft. Meer context = beter resultaat.

Hoe Claude je project leest

Als je Claude Code start in een projectmap, leest het automatisch:

  1. CLAUDE.md bestanden — je instructies
  2. Package.json, Cargo.toml, etc. — om je tech stack te herkennen
  3. De bestandsstructuur — om te begrijpen hoe je project is opgebouwd
  4. Git geschiedenis — om recente veranderingen te begrijpen

Claude leest niet automatisch alle bestanden — dat zou te veel tokens kosten. Het leest bestanden wanneer dat nodig is, of wanneer jij ze aanwijst met @.

Checkpoint bereikt!

Wat je nu moet kunnen:

Je weet nu hoe je Claude effectief context geeft:

  • Gebruik CLAUDE.md voor projectbrede instructies
  • Gebruik @-mentions om specifieke bestanden aan te wijzen
  • Wees specifiek in je prompts
  • Geef constraints en vermeld wat je niet wilt

Dit is de belangrijkste skill in deze hele cursus. Goede context is het verschil tussen frustratie en magie.

Volgende les

In de volgende les gaan we dieper in op bestanden beheren en Git gebruiken met Claude Code.