Claude Skills, MCP-Server und JavaScript
Drei Begriffe dominieren gerade jede Diskussion über KI-gestütztes Arbeiten: Skills, MCPs und Vanilla JS. Wer alle drei versteht, trifft bessere Entscheidungen. Wer nur einen davon kennt, baut alles damit, und wundert sich, warum es nicht skaliert.
Dieser Artikel ist kein Tutorial. Es ist ein Entscheidungsbaum. Am Ende weißt du, welches Werkzeug du wann brauchst, und wann du keins davon brauchst.
// 01 / 06Was Skills sind, und was nicht
Ein Skill ist ein Ordner mit einer SKILL.md-Datei. Nicht mehr. Keine Magie, kein Framework, kein neues Paradigma. Es ist eine strukturierte Anleitung, die einem KI-Agenten sagt, wie er eine bestimmte Aufgabe ausführen soll.
Anthropic hat den Agent Skills Standard im Oktober 2025 eingeführt und im Dezember als offenen Standard veröffentlicht. Stand März 2026 nutzen ihn Microsoft, Google, Vercel, Supabase, HuggingFace und dutzende weitere. Der anthropics/skills Repository auf GitHub ist die Referenz. Über 277.000 Installationen allein für den frontend-design Skill zeigen: das Ökosystem wächst.
Progressive Disclosure ist das zentrale Designprinzip. Claude lädt nur die Dateien, die er für die aktuelle Aufgabe braucht. Ein Skill kann hunderte Referenzdateien enthalten, wenn deine Aufgabe nur das Sales-Schema betrifft, lädt Claude nur das. Der Rest bleibt auf der Festplatte und verbraucht null Tokens.
// 02 / 06Was MCPs sind, und wo sie scheitern
MCP steht für Model Context Protocol. Ende 2024 von Anthropic eingeführt, mittlerweile ein offener Standard bei der Linux Foundation. Die Metapher "USB-C für KI" wird überall wiederholt, und sie greift zu kurz.
Ein MCP-Server verbindet einen KI-Agenten mit externen Systemen. GitHub, Google Drive, Slack, Datenbanken, APIs. Bidirektional, sitzungsbasiert, mit Streaming. Das ist mächtig. Aber Macht hat einen Preis.
Im März 2026 hat Perplexity-CTO Denis Yarats angekündigt, dass sein Unternehmen sich intern von MCP abwendet. Der Grund: MCP-Tool-Beschreibungen verschlingen 40-50% des verfügbaren Context Windows, bevor der Agent überhaupt anfängt zu arbeiten. Ein Entwickler berichtete von 143.000 von 200.000 Tokens allein für das MCP-Setup, 72% verbraucht, ohne eine einzige nützliche Antwort.
Die 2026er Roadmap adressiert genau das: Streamable HTTP soll horizontal skalieren können, Sessions sollen weniger Zustand halten, und Authentifizierung, das zweitgrösste Problem, soll endlich standardisiert werden.
// 03 / 06Vanilla JS: Wenn weniger mehr ist
Und dann ist da pures JavaScript. Kein Framework, kein Build-System, kein npm install. HTML, CSS, JavaScript, ein Texteditor, ein Browser. Fertig.
Für statische Websites, Landing Pages, Portfolios und Blogs ist Vanilla JS die schnellste, performanteste und SEO-freundlichste Lösung. Google liebt statisches HTML. Lighthouse gibt dir 100 von 100 ohne Tricks. Und du hast null Framework-Overhead.
while.chat selbst ist Vanilla JS. Keine React-App, kein Next.js, kein Build-Step. Push auf main, Vercel deployed. Die Ladezeit liegt unter 200ms. Jeder Artikel ist eine einzelne HTML-Datei mit inline CSS und JS.
// 04 / 06Der Entscheidungsbaum
Wann nutze ich was? // frage 01
Externe Systeme? (GitHub, Slack, DB, APIs)
Ja → MCP. Aber prüfe zuerst: Reichen 2-3 Server? Wenn mehr → überlege API-Direktanbindung.
// frage 02
Wiederholbare KI-Workflows? (Dokumente, Audits, Analysen)
Ja → Skills. Schreib eine SKILL.md, packe Referenzdateien dazu, fertig.
// frage 03
Website, Landing Page oder statischer Content?
Ja → Vanilla JS. Kein Framework, kein Build, maximale Performance.
// frage 04
Komplexe Web-App mit State Management und Routing?
Ja → Dann React/Next.js. Aber nur dann. Und nur wenn dein Team es auch kann.
// 05 / 06Die Vergleichstabelle
Skills MCPs Vanilla JS
Ordner mit SKILL.md + Referenzdateien. Kein Code nötig. Läuft in Claude Code, claude.ai und via API.
Progressive Disclosure: Nur laden was gebraucht wird. Unbegrenzt erweiterbar.
Ideal für: Wiederholbare KI-Workflows, Domain-Expertise, Team-Standards
Server die KI-Agenten mit externen Systemen verbinden. Bidirektional, sitzungsbasiert, Streaming.
Achtung: 40-50% Context-Overhead. Auth-Fragmentierung. Perplexity ist bereits abgesprungen.
Ideal für: 2-3 externe Integrationen, Cross-System-Workflows
Pures HTML/CSS/JS. Kein Build-Step, kein Framework-Overhead, kein node_modules.
Lighthouse 100/100. SEO-First. Deployment in Sekunden. while.chat ist der Beweis.
Ideal für: Statische Seiten, Blogs, Portfolios, Landing Pages
// 06 / 06Der Team-Faktor
Alles oben gilt für Solo-Entwickler. In Teams ändert sich die Rechnung fundamental.
Wenn drei Leute an einem Projekt arbeiten, ist die Frage nicht "Was ist technisch optimal?", sondern "Was können alle drei?" Ein Team das React kennt aber kein Vanilla JS schreibt, wird mit Vanilla JS scheitern. Nicht weil Vanilla schlecht ist, sondern weil Onboarding-Kosten real sind.
Skills sind hier die Ausnahme. Jeder der Markdown schreiben kann, kann einen Skill bauen. Keine Programmierkenntnisse nötig. Das macht Skills zum demokratischsten Werkzeug im KI-Stack.
Vertiefung: Claude Skills erstellen zeigt den kompletten Skill-Workflow. MCP Server einrichten führt durch das Setup. Vanilla JS vs. Next.js erklärt warum Vanilla für die meisten Vibe-Coding-Projekte reicht. Der komplette Vibe Coding Guide verbindet alle drei Welten.
Häufige Fragen
Quellen
- Anthropic, "Agent Skills Overview" (2025/2026), platform.claude.com/docs
- Anthropic, "Equipping agents for the real world with Agent Skills" (Okt 2025), anthropic.com/engineering
- The New Stack, "Agent Skills: Anthropic's Next Bid to Define AI Standards" (Dez 2025)
- Versalence, "Long Live MCP: Why the Model Context Protocol Is Facing an Evolution in 2026" (März 2026)
- MCP Blog, "The 2026 MCP Roadmap" (März 2026), blog.modelcontextprotocol.io
- Medium/unicodeveloper, "10 Must-Have Skills for Claude in 2026" (März 2026)
// micro-journal
Welches der drei Werkzeuge setzt du als Nächstes ein?
Ein Satz reicht. Das Journal bleibt lokal in deinem Browser — kein Konto, kein Server.
notierenMG
Max Götte
SEO Strategist · Founder · while.chat
Ich bin Max, SEO Strategist aus Bochum. Von Audit über Content-Strategie bis Local SEO. KMU im DACH-Raum, evidenzbasiert, ohne Hype-Versprechen.
FAQ
Was ist der Unterschied zwischen Skills und MCP-Servern?
Skills sind Anweisungen plus Dateien, die Claude in den Kontext laedt, statisches Wissen. MCP-Server sind laufende Prozesse, die echte Tools bereitstellen, Daten holen, APIs aufrufen, Aktionen ausloesen. Skills erklären das Wie, MCP führt das Was aus.
Wann sollte ich Vanilla JavaScript statt Skills oder MCP nutzen?
Wenn die Aufgabe im Browser läuft und keine KI-Unterstuetzung zur Laufzeit braucht: einfache Interaktivitaet, DOM-Manipulation, Forms, Animationen. Vanilla JS ist leichter, schneller und braucht keine Runtime. Du transportierst keine Komplexitaet, die du nicht brauchst.
Kann ich Skills, MCPs und JavaScript kombinieren?
Ja, und das ist oft der beste Weg. Skill liefert Konventionen und Code-Templates, MCP holt Daten oder triggert externe Aktionen, Vanilla JS rendert das Ergebnis im Frontend. Jede Schicht macht, was sie am besten kann.
Wo scheitern MCP-Server in der Praxis?
Bei unklaren Tool-Schemas, ueber-grossen Antworten und fehlendem Error-Handling. MCPs liefern oft zu viel oder zu wenig zurueck. Saubere Tool-Definitionen mit knappen Beschreibungen und definierten Output-Formaten verhindern, dass Claude im Tool-Call-Chaos versinkt.
Welcher Stack passt für ein kleines Team?
Anfangs nur Skills plus existierende MCP-Server. Eigene MCPs erst, wenn ein konkretes Problem das rechtfertigt. Vanilla JS für alles, was im Browser passiert. Frameworks erst, wenn das Projekt sie braucht, sonst verwaltest du mehr Tooling als Code.