Studio Hyra University

Claude Code onder de knie

Opzetten, werken en shippen zoals een professionele studio. Stap voor stap.

12 lessen · ~60 min · Expert

Les 01

Installeer alles

Voordat je ook maar één regel code schrijft, moet je omgeving op orde zijn. In deze les installeer en controleer je alles wat je nodig hebt. Reken op 30 tot 45 minuten de eerste keer.

VS Code en de terminal openen

Open VS Code. Klik op Terminal → New Terminal in de menubalk. Er verschijnt een paneel onderaan.

Claude Code installeren

Terminal

npm install -g @anthropic-ai/claude-code

Als je "npm. command not found" ziet: ga naar nodejs.org, download en installeer Node.js, sluit de terminal (klik op de X), open een nieuwe (Terminal → New Terminal) en probeer het opnieuw.

Claude Code starten

Typ claude, druk op Enter. Je browser opent de inlogpagina. Log in, klik op Authorize, en je bent terug in VS Code.

Laat Claude de rest installeren

Zeg tegen Claude

Kijk welke ontwikkeltools ik al heb geïnstalleerd. Ik heb Docker Desktop, Git, GitHub CLI, Supabase CLI en Vercel CLI nodig. Installeer wat er nog ontbreekt. Als ik nog geen accounts heb voor GitHub, Supabase of Vercel, loop ik je daar stap voor stap doorheen.

Claude checkt je systeem en installeert wat ontbreekt. Het stelt je onderweg vragen, beantwoord ze en laat Claude zijn werk doen.

Als Claude zegt "Docker Desktop needs to be running": open Docker Desktop via Programma's (Mac) of het Startmenu (Windows). Wacht tot het walvisicoon in je menubalk verschijnt. Laat Claude weten dat het actief is.

Controleer je AI-output

Zeg tegen Claude

Controleer of alles goed staat. Laat me zien wat werkt en wat niet.

Note

Dit is de enige les over setup. Alles wat daarna komt, gaat over het gebruiken van de tools, niet het installeren ervan.

Doe dit nu

Doe nu alle vijf de versiechecks. Maak een screenshot. Dat is je ontwikkelomgeving, geverifieerd.

Les 02

Je eerste CLAUDE.md

CLAUDE.md is het eerste bestand dat Claude leest. Elke regel erin bepaalt hoe Claude code schrijft. Zet het goed op en Claude werkt als een senior developer die jouw project door en door kent.

Bij het starten van een sessie leest Claude als eerste het CLAUDE.md-bestand. Daarin beschrijf je het project, de regels en de huidige voortgang.

Open je project in VS Code

Ga naar File → Open Folder en selecteer je projectmap.

Claude Code starten

Terminal → New Terminal. Typ claude, druk op Enter.

Maak het met Claude

Zeg tegen Claude

Maak een CLAUDE.md aan voor dit project. Beschrijf wat het project inhoudt, waar we nu staan, wat er al af is en wat er nog op de planning staat. Leg ook onze kernafspraken vast: design tokens voor alle kleuren, alle tekst via het vertaalsysteem, gebruikersinvoer altijd valideren, en een build draaien voordat je commit. Voeg tot slot de regel toe dat je na iedere commit de status bijwerkt. Baseer alles op wat je in het project aantreft.

Bekijk het

Klik op CLAUDE.md in de linker zijbalk. Lees het. Pas aan wat niet bij jouw project past.

Probeer het uit

Zeg tegen Claude

Wat is het project? Wat zijn de spelregels?

Claude werkt vanuit jouw CLAUDE.md.

Important

Houd het statusgedeelte bij na elke commit. Een verouderde CLAUDE.md is erger dan helemaal geen, omdat Claude het als waarheid behandelt.

Doe dit nu

Maak het bestand nu aan. Vul Status in, drie regels, en twee kritieke bestanden. Stel Claude een vraag over je project. Zie het verschil.

Les 03

Koppel je MCPs

MCPs geven Claude directe toegang tot je database, je deployment en je documentatie. In plaats van dat jij steeds informatie tussen tools kopieert, doet Claude dat zelf.

MCPs laten Claude rechtstreeks met je diensten communiceren, zonder dat jij steeds informatie tussen tools heen en weer hoeft te kopiëren.

Supabase koppelen

Zeg tegen Claude

Zet de Supabase MCP op zodat je rechtstreeks met mijn database kunt praten.

Claude vraagt om je inloggegevens. Die vind je op supabase.com → je project → Settings → API. Kopieer de Project URL en de servicerolsleutel (klik op "Reveal") en plak ze in Claude.

Probeer het:

Zeg tegen Claude

Welke tabellen staan er in mijn database?

Context7 koppelen

Zeg tegen Claude

Zoek in de actuele Next.js-documentatie op hoe je een pagina met dynamische routes maakt.

Als Claude naar actuele documentatie verwijst, doet Context7 het goed.

Vercel koppelen

Zeg tegen Claude

Zet de Vercel MCP op zodat je direct kunt deployen.

Controleer alle verbindingen

Zeg tegen Claude

Welke MCP's heb je tot je beschikking? Ga ze allemaal langs.

Doe dit nu

Installeer de Supabase MCP. Vraag Claude om je database te inspecteren. Zodra het je echte tabellen opsomt, begrijp je waarom dit ertoe doet.

Les 04

Maak je eerste skills

Skills zijn herbruikbare instructiebestanden die Claude consistent maken. In deze les maak je er drie die je meteen in gebruik neemt.

Skills zijn instructiebestanden die Claude vertellen hoe JÍJ dingen wilt aanpakken.

Startvaardigheden opbouwen

Zeg tegen Claude

Maak een skills-map aan op `.claude/skills/` met drie starterskills. De eerste heet "critical" en bevat onze vaste spelregels: design tokens voor kleuren, tekst via het vertaalsysteem, gebruikersinput valideren, nooit secrets committen, en een build draaien voor je commit. De tweede heet "page-build" en beschrijft de conventies voor paginabouw: bestandsstructuur, spacing, typografie, testchecklist. De derde heet "eod" (end of day) en is je dagafsluiting: CLAUDE.md bijwerken, committen, pushen, samenvatten.

Controleer ze

Klik op .claude/skills/critical/SKILL.md in de linkerzijbalk. Lees de regels door. Vul aan wat mist en haal weg wat niet klopt.

Zet ze op de proef

Zeg tegen Claude

Welke skills heb je in huis?

Test het daarna met een echte taak:

Zeg tegen Claude

Ik wil een nieuwe About-pagina maken.

Claude volgt jouw manier van pagina's bouwen.

Vaardigheden toevoegen doe je later wel

Zeg tegen Claude

Maak een nieuwe skill aan met de naam "security" met regels voor authenticatie, databasebeveiliging en invoervalidatie in dit project.

Tip

Vaardigheden komen van fouten. Elke keer dat er iets misgaat waar een regel voor had kunnen zorgen, voeg je die regel toe. Na een paar maanden is dit je meest waardevolle projectbestand.

Doe dit nu

Maak die drie bestanden nu meteen aan. Tien minuten werk. Vraag daarna aan Claude om iets kleins te bouwen en zie hoe het vanaf de eerste regel jouw patronen volgt.

Les 05

Hoe je je dag begint

De eerste 2 minuten van een Claude Code-sessie bepalen de kwaliteit van alles wat daarna komt.

Doe dit elke keer als je begint. 2 minuten.

Open je project en start Claude Code

Open VS Code. Bestand → Map openen → je project. Terminal → Nieuwe terminal. Typ claude.

Important

Werk je aan meerdere projecten? Vraag het aan Claude: "In welk project zitten we?" Noemt het de verkeerde naam, dan heb je de verkeerde map geopend.

Controleer de status

Zeg tegen Claude

Waar staan we nu? Wat hebben we de vorige keer gedaan en wat staat er op de planning?

Als de status niet klopt:

Zeg tegen Claude

De contactpagina is klaar. Pas de status aan. we beginnen nu aan de Insights-pagina.

Bepaal wat je aanpakt

Zeg tegen Claude

Waar beginnen we vandaag mee?

Doe dit nu

Doe morgenochtend de 3 stappen voordat je ook maar een regel code aanraakt. Let op hoe Claude meteen met iets bruikbaars komt.

Les 06

Hoe je een feature bouwt

Het stapsgewijze proces om iets te bouwen. Plannen, stukje voor stukje werken, tussendoor testen, een tweede ronde, en dan vastzetten.

Begin met een plan

Druk op Shift+Tab. Controleer of linksonder Plan Mode staat.

Zeg tegen Claude

Ik wil een contactformulier toevoegen aan de site. Plan eerst de aanpak voordat je begint. Wat hebben we nodig? Hoe moet het werken?

Lees het plan. Pas aan wat niet klopt:

Zeg tegen Claude

Ik wil ook dat het me een e-mail stuurt. En dat telefoonnummer veld kan eruit, gewoon naam, e-mail en bericht.

Druk op Shift+Tab om de planmodus te verlaten.

Stap voor stap bouwen

Zeg tegen Claude

Begin met het formuliercomponent. Velden voor naam, e-mail en bericht. Gebruik onze design tokens.

Controleer het resultaat in de browser. Daarna:

Zeg tegen Claude

Zorg nu dat het formulier echt iets doet. Stuur me een mail zodra iemand het invult.

Geef feedback

Zeg tegen Claude

De velden staan te krap op elkaar. Geef ze meer ruimte. De verzendknop moet groter en moet qua stijl overeenkomen met de knop op de homepage.

Tweede ronde

Zeg tegen Claude

Controleer alles wat je net hebt gebouwd. Werkt het op een telefoon? Gebruik je design tokens voor de kleuren? Staat er tekst hardcoded in de code? Zitten er beveiligingsproblemen in het formulier? Los op wat je tegenkomt.

Opslaan

Zeg tegen Claude

Ziet er goed uit. Commit maar.

Claude commit en push het werk, en werkt de status in CLAUDE.md bij.

Doe dit nu

Probeer het bij je volgende feature. doe stap 1 (plan) en stap 4 (tweede ronde). Alleen die twee. Het plan maakt de bouw scherper. De tweede ronde pakt op wat je over het hoofd zag.

Les 07

Hoe je kwaliteit beoordeelt

Twee kwaliteitschecks. een snelle voor elke commit, een grondige aan het einde van elke fase.

Snelle check (voor elke commit)

Zeg tegen Claude

Bouw het project en zorg dat er geen fouten zijn.

Grondige check (na het afronden van een grote feature)

Zeg tegen Claude

Doe een grondige kwaliteitscheck. Controleer of er hardcoded kleuren staan die design tokens zouden moeten gebruiken, of tekst in vertaalbestanden hoort, of invoervelden validatie missen, of pagina's op mobiel haperen, en of er beveiligingsproblemen zijn. Los alles op wat je tegenkomt.

Waar deze checks op letten

Kleuren hardcoded in plaats van via design tokens (breekt zodra je het thema wisselt)
Tekst staat direct in de component, niet in het vertaalbestand (andere talen breken hierdoor)
Formulieren die alles doorlaten zonder te checken of het klopt
Pagina's die er op desktop goed uitzien maar op je telefoon buiten beeld lopen
Endpoints die iedereen op internet kan misbruiken

Tip

Hoe vaker je quality checks doet, hoe minder ze opleveren. Je voorkomt de meeste problemen al voordat ze ontstaan.

Doe dit nu

Zoek nu in je src/ map naar hex-kleuren. Staan er een paar in je componentbestanden? Vervang ze door CSS-variabelen. Zo heb je meteen één kwaliteitscheck erop zitten.

Les 08

Zo sluit je je dag af

De laatste 5 minuten van je sessie bepalen hoe goed morgen begint.

5 minuten aan het einde van elke sessie.

De status bijwerken

Zeg tegen Claude

We zijn klaar voor vandaag. Werk CLAUDE.md bij met wat we hebben afgerond, wat nog loopt, en waar we de volgende keer mee beginnen.

Commit en push

Zeg tegen Claude

Commit alles en push naar GitHub.

Controleer je werk

Zeg tegen Claude

Is de push gelukt? Staat alles gecommit?

Note

Morgen ochtend leest Claude de CLAUDE.md die je net hebt bijgewerkt. Het weet precies wat er af is en wat er nog openstaat. Geen "waar was ik gebleven?" meer.

Doe dit nu

Doe het vanavond. Status bijwerken, aantekeningen schrijven voor morgen, committen, pushen. Morgenochtend lees je die terug en merk je hoeveel sneller je op gang komt.

Les 09

Je skills library opbouwen

Je begon met drie vaardigheden. Zo bouw je die uit tot een kennisbank die Claude elke week scherper maakt.

Voeg een regel toe elke keer dat er iets misgaat

Voorbeeld. je deployt en de Nederlandse vertaling ontbreekt.

Zeg tegen Claude

Voeg een nieuwe regel toe aan onze critical skill. controleer vóór elke commit of alle vertaalbestanden de nieuwe keys hebben.

Maak nieuwe skills aan zodra er patronen ontstaan

Zeg tegen Claude

Maak een nieuwe skill aan met de naam "database" met regels voor hoe we databasewerk aanpakken. Voeg toe: altijd beveiligingsbeleid aanmaken voor nieuwe tabellen, altijd bestaande tabellen controleren voor je wijzigingen doorvoert, altijd testen of data correct wordt opgeslagen.

Bekijk je skills elke maand opnieuw

Zeg tegen Claude

Geef me een overzicht van al onze huidige skills. Zijn er verouderd? Overlappen er een paar? Stel verbeteringen voor.

Tip

Na drie maanden heeft je kernvaardigheid 15 tot 20 regels. Elke regel staat voor een fout die nooit meer terugkomt. Nieuwe teamleden nemen al die kennis meteen over.

Doe dit nu

Denk aan de laatste drie dingen die misliepen. Schrijf de oplossing voor elk op als een regel in je kritische skill. Drie debugging-sessies, samengevat in drie zinnen.

Les 10

Testen dat zich opstapelt

Hoe meer je bouwt, hoe meer Playwright je dekt. Elke pagina, elke taal, elk schermformaat.

Laat Claude tests schrijven

Zeg tegen Claude

Schrijf tests voor onze contactpagina en voer ze uit. Controleer het volgende: de pagina laadt in al onze talen, het formulier toont foutmeldingen bij een lege of ongeldige inzending, een geldige inzending werkt, en niets loopt over op een telefoonscherm. Vertel me wat slaagt en wat niet.

Fouten aanpakken

Zeg tegen Claude

De telefoontest is mislukt. Wat klopt er niet? Pas het aan en probeer opnieuw.

Alle tests draaien voor je commit

Zeg tegen Claude

Draai alle tests om te checken of alles nog werkt.

Alles groen? Deze tests blijven staan. Gebruik ze voor elke grote wijziging.

Tip

Je omschrijft wat het moet doen. Claude schrijft de tests, draait ze, en lost op wat stukloopt.

Doe dit nu

Pak de pagina met de minste tests. Vraag Claude om tests te schrijven met de vierledige structuur. Draai ze. Fix wat faalt. Commit.

Les 11

Docker vanaf nul

Consistente omgevingen in 15 minuten. Van nul naar werkende Docker-container.

Wanneer heb je Docker nodig?

Alleen jij. leuk, maar niet urgent. Bewaar voor later.
Jij en iemand anders zetten het op. Zo voorkom je "bij mij werkt het wel."
Live gaan. echt aan te raden.

Controleer of Docker Desktop actief is

Open Docker Desktop. Wacht tot het walvisje in je menubalk verschijnt.

Vraag Claude om Docker in te stellen

Zeg tegen Claude

Zet Docker op voor ons project. Ik wil het tijdens development in een container draaien zodat wijzigingen direct zichtbaar zijn in de browser. Maak alle benodigde bestanden aan.

Begin hier

Zeg tegen Claude

Start het project in Docker.

Claude start Docker op en geeft je het adres. Open het in je browser. Pas een bestand aan in VS Code, de browser ververst automatisch.

Stop ermee

Zeg tegen Claude

Stop de Docker-containers.

Doe dit nu

Maak een Dockerfile.dev en docker-compose.yml aan. Run `docker compose up dev`. En je project draait in Docker. Meer is het niet.

Les 12

Het systeem na 30 dagen

Hoe je project eruitziet na een maand werken met deze aanpak. Het cumulatieve effect.

Dag 1 vs dag 30

Dag 1

CLAUDE.md heeft 5 basisregels
3 starterskills
Geen tests
Je legt het project elke keer opnieuw uit
"Ik vind het er wel goed uitzien"

DAG 30

CLAUDE.md heeft 15+ regels, altijd kloppend
8-10 vaardigheden, elk uit de praktijk
100+ tests, in 30 seconden klaar
Claude kent het project meteen
Systematische kwaliteitscheck bij elke commit

Meer vaardigheden, een scherpere Claude. Meer tests, minder risico bij elke aanpassing. Een bijgewerkte CLAUDE.md en je volgende ochtend begint beter. Gebruik het systeem, en het groeit mee.

Tip

Niet elke gewoonte pakt meteen aan. Het ochtendritme kost een week om te landen. Die tweede check voelt duur, tot je er een bug mee vangt. Een skill lijkt tijdverspilling, tot je voor de derde keer dezelfde fout voorkomt. Geef het 30 dagen.

Doe dit nu

Zet een reminder voor over 30 dagen. Open deze les opnieuw. Kijk waar je nu staat ten opzichte van toen.

Nu bouwen.

Je setup is productieklaar. Je workflow is op orde. Tijd om iets echts te bouwen.

Workshop. Geef mijn website de grond inWorkshop. Geef mijn website de grond in Laten we pratenLaten we praten