Hoe Skills, Agents en MCP Servers Samenwerken in Claude Code

    /
    14 min leestijd
    Ing. Patrik Kelemen
    Hoe Skills, Agents en MCP Servers Samenwerken in Claude Code

    Een praktische gids om te begrijpen hoe Claude Code zijn mogelijkheden uitbreidt via skills, sub-agents en MCP-serververbindingen voor webontwikkeling.

    Namiru AI

    AI-klantenservice voor je website

    Plak je URL. Krijg een support-agent in 30 seconden.

    Hoe Skills, Agents en MCP Servers Samenwerken in Claude Code

    Je bent waarschijnlijk eerder tegen deze muur aangelopen: je plakt je hele codebase in een AI-chat, voegt een gedetailleerde prompt toe, en krijgt terug... niets bruikbaars. Of erger nog, het model begint functienamen te hallucineren die niet bestaan omdat het de draad kwijtraakte van wat het 50.000 tokens geleden las.

    Dit is het contextvensterprobleem. En daarom maakt meer code naar een LLM gooien het niet slimmer.

    Claude Code lost dit anders op. Niet door een groter contextvenster te hebben (hoewel dat helpt), maar door slim te zijn in hoe het de beschikbare ruimte gebruikt. Het doet dit door drie dingen die samenwerken: skills, sub-agents en MCP-servers.

    Laat me je laten zien hoe deze stukken in elkaar passen. Als je dit eenmaal begrijpt, stop je met vechten tegen de AI en begin je ermee samen te werken.

    Het Contextvensterprobleem

    Hier is iets wat me even tijd kostte om te internaliseren: LLM's "onthouden" het begin van een lang gesprek niet echt zoals je zou verwachten. Het contextvenster is meer als een spotlight dan een archiefkast. Naarmate je meer tokens toevoegt, krijgt eerdere inhoud minder aandacht. Plak 100.000 tokens code, en het model is in wezen aan het scannen tegen de tijd dat het je vraag bereikt.

    Dit verklaart veel frustrerend AI-gedrag. Het model lijkt eerst slim, wordt dan verward. Het vergeet dingen die je het eerder vertelde. Het hallucineert details uit bestanden die het "las" maar duidelijk niet heeft onthouden.

    De oplossing is geen groter contextvenster. De oplossing is er geen nodig hebben.

    Hoe Claude Code Eigenlijk Denkt

    Claude Code is een agent. Dat klinkt fancy, maar het betekent gewoon dat het kan plannen, uitvoeren, resultaten observeren en itereren. Als je het vraagt om "de falende tests in mijn project te repareren", probeert het niet je hele codebase in één keer te begrijpen. In plaats daarvan werkt het in gerichte stappen:

    1. Lees de projectstructuur om te begrijpen wat waar is
    2. Voer de tests uit om te zien wat er daadwerkelijk faalt
    3. Bekijk de specifieke falende test en de code die het test
    4. Maak een fix
    5. Voer de tests opnieuw uit
    6. Als het nog steeds kapot is, probeer iets anders

    Elke stap werkt met alleen de context die het nodig heeft. De agent houdt een werkende samenvatting bij van wat het heeft geleerd, geen ruwe log van alles wat het heeft gezien. Zo kan Claude Code 20 keer itereren op een complexe bug zonder door de contextruimte heen te raken.

    Denk eraan als hoe je eigenlijk iets zou debuggen. Je houdt niet je hele codebase in je hoofd. Je focust op één gebied, vormt een hypothese, test het en past aan. Claude Code werkt op dezelfde manier.

    Sub-Agents: De Echte Game Changer

    Hier wordt het echt interessant. Claude Code kan sub-agents spawnen.

    Een sub-agent is een aparte Claude-instantie met zijn eigen schone contextvenster. Je kunt Claude Code vertellen er een op te starten, het een gerichte taak geven, het onafhankelijk laten werken en een samenvatting terugkrijgen van wat het vond. De volledige context van de sub-agent vervuilt nooit je hoofdgesprek.

    Dit is enorm. In plaats van één agent die alles probeert vast te houden:

    Jij: "Analyseer deze codebase op beveiligingsproblemen, prestatieproblemen en testdekking"

    Hoofdagent spawnt sub-agents: ├── Sub-agent 1: Beveiligingsanalyse (eigen context, leest beveiligingsrelevante bestanden) ├── Sub-agent 2: Prestatiebeoordeling (eigen context, focust op hot paths)
    └── Sub-agent 3: Testdekking (eigen context, onderzoekt testbestanden)

    Elke sub-agent retourneert een samenvatting naar de hoofdagent Hoofdagent synthetiseert alles tot één reactie

    De sub-agents kunnen elk duizenden regels code lezen. Maar de hoofdagent ontvangt alleen hun verkorte bevindingen. Je hoofdcontext blijft schoon terwijl je toch diepe analyse over meerdere gebieden krijgt.

    Denk eraan als delegeren naar junior developers. Je hoeft niet elke regel te lezen die zij beoordeelden. Je hebt hun conclusies nodig en eventuele rode vlaggen die ze vonden. Sub-agents werken op dezelfde manier.

    Hoe Je Sub-Agents Daadwerkelijk Gebruikt

    Je kunt Claude Code expliciet vragen een sub-agent te spawnen:

    • "Spawn een sub-agent om de authenticatiemodule diepgaand te analyseren"
    • "Gebruik een sub-agent om alle databasequeries te beoordelen op N+1-problemen"
    • "Laat een sub-agent door de testbestanden gaan en rapporteer terug over dekkingsgaten"

    De sub-agent krijgt zijn eigen frisse context, doet het diepe werk en retourneert een samenvatting. Je hoofdgesprek raakt niet opgeblazen met alle ruwe analyse.

    Dit is vooral krachtig voor grote codebases. In plaats van dat Claude Code halverwege dingen kwijtraakt, krijg je gerichte analyse die daadwerkelijk schaalt.

    Waar Skills Binnenkomen

    Dus Claude Code kan taken opsplitsen, sub-agents spawnen en in gerichte stappen werken. Maar hoe weet het hoe het specifieke dingen goed moet doen? Daar komen skills om de hoek kijken.

    Skills zijn verpakte instructies die Claude leest voordat het specifieke soorten taken aanpakt. Als je Claude Code vraagt een PowerPoint-presentatie te maken, leest het eerst het skillbestand op /mnt/skills/public/pptx/SKILL.md. Dit bestand bevat best practices, veelvoorkomende valkuilen en exacte codepatronen die daadwerkelijk werken.

    Een skill bevat typisch:

    • Een SKILL.md-bestand met gedetailleerde instructies
    • Codetemplates en voorbeelden
    • Bekende beperkingen en workarounds
    • Outputformaatspecificaties

    Het belangrijkste inzicht is dat skills on demand worden geladen. Claude verspilt geen contextvensterruimte aan PowerPoint-instructies als je Python aan het debuggen bent. Het laadt de relevante skill wanneer het die nodig heeft, gebruikt die expertise voor de taak en gaat verder.

    Dit is anders dan tools. Tools zijn functies die Claude aanroept om data terug te krijgen, zoals web_search of bash_tool. Skills zijn kennispakketten die veranderen hoe Claude problemen benadert. Het onderscheid is belangrijk omdat tools tokens kosten in de systeemprompt (meer tools = minder ruimte voor je code), terwijl skills alleen worden geladen wanneer relevant.

    AspectToolsSkills
    Hoe het werktRoep functie aan, krijg resultaatLaad instructies, wijzig gedrag
    TokenkostenAltijd aanwezig in contextOn demand geladen
    Best voorDiscrete acties (API-calls, bestandsoperaties)Complexe workflows (documentcreatie)

    Sub-agents kunnen ook skills laden. Een sub-agent die beveiliging analyseert kan beveiligingsspecifieke skills laden zonder dat die instructies je hoofdgesprek vervuilen.

    De Iteratielus

    Eén patroon dat je constant zult zien is de iteratielus. Claude Code genereert iets, controleert of het werkt en repareert problemen totdat het klopt.

    1. Genereer code
    2. Voer het uit (of lint het, of type-check het)
    3. Kijk of het werkt
    4. Zo niet, analyseer de fout en probeer opnieuw
    5. Herhaal totdat het slaagt

    Dit is waarom Claude Code bugs kan repareren die een single-shot prompt zou missen. Het genereert niet alleen code en hoopt. Het test zijn eigen werk en reageert op echte feedback.

    Als Claude Code een React-component maakt en dan de dev-server draait om te controleren op fouten, gebruikt het deze lus. Als het een functie schrijft en de tests draait om te verifiëren dat het werkt, hetzelfde. De generatie- en verificatiestappen werken samen.

    Dit verklaart ook waarom Claude Code soms langer duurt dan je zou verwachten. Het is niet traag. Het is grondig. Het draait je tests, controleert op typefouten en itereert totdat dingen daadwerkelijk werken.

    MCP-Servers: Verbinden met Externe Systemen

    Tot nu toe hebben we gesproken over hoe Claude Code denkt (agentische stappen, sub-agents) en wat het weet (skills). Maar hoe zit het met verbinden met externe systemen? Daar komt MCP om de hoek kijken.

    Het Model Context Protocol is hoe Claude Code praat met databases, GitHub, bestandssystemen, CI/CD-pipelines en vrijwel alles anders. Zie MCP als USB-C voor AI: een standaardinterface die elk compatibel AI-systeem laat verbinden met elke compatibele service.

    MCP-servers bieden drie soorten mogelijkheden:

    Tools: Functies die Claude kan aanroepen, zoals een database bevragen of een pull request maken

    Resources: Databronnen die Claude kan lezen, zoals bestandsinhoud of databaseschema's

    Prompts: Herbruikbare templates voor veelvoorkomende interacties

    Voor webontwikkeling zijn de meest nuttige MCP-servers:

    • Filesystem-server: Lees en schrijf bestanden in je project (sandboxed voor veiligheid)
    • GitHub-server: Beheer repos, PR's, issues en workflows
    • Database-servers: Bevraag PostgreSQL, MySQL, SQLite via natuurlijke taal

    Zo ziet een eenvoudige MCP-server eruit in TypeScript: typescript import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'; import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';

    const server = new McpServer({ name: 'code-analyzer', version: '1.0.0' });

    server.registerTool( 'analyze_complexity', { description: 'Analyze cyclomatic complexity of a file', inputSchema: { filePath: { type: 'string' } } }, async ({ filePath }) => { const result = await analyzeFile(filePath); return { content: [{ type: 'text', text: JSON.stringify(result) }] }; } );

    const transport = new StdioServerTransport(); await server.connect(transport);

    De kracht van MCP-servers komt voort uit hoe ze werken met sub-agents. Een sub-agent kan een database bevragen via MCP, duizenden rijen analyseren en alleen de relevante bevindingen retourneren. De ruwe data raakt nooit je hoofdcontext aan.

    Alles Samenbrengen

    Laten we door een echt voorbeeld lopen. Je vraagt Claude Code: "Beoordeel deze PR en controleer of de databasemigraties veilig zijn."

    Dit is wat er daadwerkelijk gebeurt:

    1. Hoofdagent laadt relevante skills voor codereview
    2. Het spawnt een sub-agent om de PR-wijzigingen diepgaand te analyseren
    3. Die sub-agent roept GitHub MCP-server aan om PR-details op te halen
    4. Een andere sub-agent leest migratiebestanden en bevraagt het huidige databaseschema via MCP
    5. Sub-agents retourneren gerichte samenvattingen: "Migratie voegt index toe, ziet er veilig uit" of "Waarschuwing: dit dropt een kolom waarnaar nog wordt verwezen"
    6. Hoofdagent synthetiseert bevindingen van sub-agents tot een duidelijke reactie

    Merk op hoe het zware werk gebeurt in sub-agents met hun eigen contexten. De hoofdagent orkestreert en vat samen. Je gesprek blijft schoon terwijl je diepe analyse krijgt.

    Waarom Dit Belangrijk Is Voor Je Workflow

    Het begrijpen van deze architectuur verandert hoe je werkt met Claude Code:

    Je stopt met vechten tegen het contextvenster. Als je eenmaal beseft dat sub-agents diepe analyse apart afhandelen, stop je met proberen je hele codebase in het hoofdgesprek te plakken. Laat de sub-agents het zware leeswerk doen.

    Je gebruikt expliciet sub-agents voor grote taken. In plaats van hopen dat Claude Code het uitzoekt, vertel je het: "Gebruik een sub-agent om de betalingsmodule te analyseren" of "Spawn sub-agents voor beveiliging, prestaties en testreview." Je werkt met de architectuur in plaats van ertegen.

    Je begrijpt waarom sommige taken beter werken dan andere. Taken die kunnen worden gedelegeerd naar sub-agents schalen geweldig. Taken die constante heen-en-weer in één context vereisen, bereiken sneller limieten.

    Je vertrouwt de iteratielus. Bij het repareren van bugs, laat Claude itereren. Het zal vaak problemen vinden die je niet had verwacht door daadwerkelijk de code te draaien en fouten te observeren. Onderbreek het niet na de eerste poging.

    Praktische Tips

    Vraag expliciet om sub-agents bij grote taken. "Spawn een sub-agent om het auth-systeem te beoordelen" werkt beter dan hopen dat Claude Code uitzoekt dat het moet delegeren.

    Laat Claude eerst skills lezen. Als je documenten maakt of met specifieke bestandsformaten werkt, presteert Claude beter als het het relevante skillbestand leest voordat het begint.

    Verbind MCP-servers voor repetitieve integraties. In plaats van database-outputs of GitHub PR-details in je prompts te kopiëren en plakken, verbind de relevante MCP-servers. Claude haalt precies op wat het nodig heeft.

    Controleer het ecosysteem voordat je custom tools bouwt. Het MCP-ecosysteem is gegroeid tot meer dan 5.000 community-servers die Stripe, Cloudflare, CI-systemen en de meeste services die je zou willen integreren dekken. Iemand heeft waarschijnlijk al gebouwd wat je nodig hebt.

    Geef feedback als het fout is. Als Claude Code verkeerde resultaten produceert, vertel het wat er fout ging. De iteratielus werkt ook voor jouw feedback.

    Het Grotere Plaatje

    MCP werd onlangs gedoneerd aan de Linux Foundation, met OpenAI, Google en Microsoft die zich aansloten als ondersteunende leden. Dit signaleert dat het protocol industriestandaard infrastructuur wordt, niet alleen een Anthropic-ding.

    De combinatie van sub-agents (parallel werk in aparte contexten), skills (domeinexpertise on demand geladen) en MCP-servers (schone verbindingen met externe systemen) vertegenwoordigt hoe moderne AI-codeerassistenten daadwerkelijk werken. Het is geen magie. Het is goede architectuur die echte beperkingen oplost.

    Het sub-agent-patroon is vooral de moeite waard om diepgaand te begrijpen. Het is het verschil tussen een AI die stikt in grote codebases en een die schaalt. Als je Claude Code vraagt iets groots te analyseren, propt het niet alles in één context en bidt. Het delegeert naar gerichte sub-agents, elk met schone context, en synthetiseert hun bevindingen.

    Het begrijpen van deze stukken helpt je met het systeem te werken in plaats van ertegen. Je krijgt betere resultaten, loopt tegen minder muren aan en weet wanneer je de AI moet vertrouwen versus wanneer je handmatig moet overnemen.

    Gemaakt door Namiru.ai - plug-and-play AI-chat voor je website.

    Patrik Kelemen
    Author
    Ing. Patrik Kelemen
    Founder of Namiru.aiSlovakia, EU

    Senior software engineer with 10+ years of experience, specializing in AI chat widgets and automation. Building Namiru.ai to help businesses leverage AI without complexity.

    AI AgentsAngularReactNodeJSAWSAzure
    Vond je dit artikel leuk?

    Ontdek wat AI kan doen voor jouw website

    Plak je URL en zie je AI-agent in seconden tot leven komen.

    Je klanten krijgen direct antwoord. Jij krijgt leads, analyses en je tijd terug.

    Geen creditcard nodig

    Namiru.ai

    AI chat for your website