DEV Community

Cover image for Ich habe wiederverwendbare Claude-Code-Skills entwickelt, um Websites schneller zu veröffentlichen
Matt Senter
Matt Senter

Posted on Originally published at mattsenter.com

Ich habe wiederverwendbare Claude-Code-Skills entwickelt, um Websites schneller zu veröffentlichen

Die meisten KI-generierten Websites scheitern nicht daran, dass die Startseite schlecht aussieht. Sie scheitern daran, dass alle langweiligen Produktionsdetails übersprungen werden.

Dinge wie:

  • SEO-Metadaten
  • Prerendering
  • Analytik
  • Social-Share-Bilder
  • CSP-Header
  • Lighthouse-Optimierung
  • Feinschliff für Mobilgeräte
  • Sitemap-Erzeugung
  • robots.txt
  • Deployment-Konfiguration
  • IndexNow
  • Caching
  • Einrichtung der Umgebung

Die eigentlichen React-Komponenten sind heute oft der leichte Teil.

Was alles weiterhin ausbremst, ist die betriebliche Infrastruktur.

Nachdem ich einige KI-gestützte Projekte mit Claude Code gebaut hatte, merkte ich, dass ich immer wieder dieselben Probleme löste. Nicht nur optisch, sondern betrieblich.

Statt längere Prompts zu schreiben, begann ich also, wiederverwendbare Claude-Code-Skills zu bauen.

Daraus wurde ein Open-Source-Repository produktionsorientierter Arbeitsabläufe: senternet-site-skills auf GitHub. Das Repository enthält wiederverwendbare, produktionsnahe Skills für SEO, Prerendering, Mobiloptimierung, Social Sharing, CSP-Konfiguration, Lighthouse-Feintuning, Analytik-Einrichtung, Deployment-Abläufe und mehr.

Das Problem mit „Vibe Coding“

Ich mag KI-gestützte Entwicklung wirklich. Sehr sogar.

Claude Code ist unglaublich stark bei schneller Iteration, Frontend-Erzeugung, dem Umbau von Layouts, Hilfscode, API-Anbindung und Content-Gerüsten.

Doch wenn die erste Begeisterung verflogen ist, zeigt sich ein Muster: Die KI erzeugt Seiten schneller, als man sie betriebsfertig machen kann.

Man verbringt am Ende enorm viel Zeit damit, Folgendes zu reparieren:

  • SEO-Probleme
  • Deployment-Inkonsistenzen
  • kaputte Metadaten
  • schlechtes Verhalten auf Mobilgeräten
  • fehlende Analytik
  • Performance-Rückschritte
  • Probleme mit Social-Vorschauen
  • unvollständige Produktionseinrichtung

Ironischerweise sind das oft die uninteressantesten Aufgaben, die ein Mensch wieder und wieder von Hand erledigen soll. Genau das machte sie zu perfekten Kandidaten für wiederverwendbare Skills.

Von riesigen Prompts zu wiederverwendbaren Abläufen

Zuerst versuchte ich es mit immer längeren Prompts. In etwa so:

„Bitte stelle sicher, dass diese Seite mobil responsiv ist, für SEO optimiert, Prerendering nutzt, korrekte Metadaten hat, Social-Sharing unterstützt, CSP-Header setzt, Analytik einbindet und produktionssichere Deployment-Einstellungen verwendet…“

Dieser Ansatz wurde schnell unzuverlässig.

Claude konzentrierte sich stark auf eine Anweisung und ignorierte still eine andere. Manchmal setzte es Funktionen nur halb um. Manchmal machte es beim „Helfen“ Funktionierendes kaputt.

Der Durchbruch kam, als ich aufhörte, Prompts wie Gespräche zu behandeln, und anfing, sie wie Infrastruktur zu behandeln.

Statt riesiger Prompts erstellte ich fokussierte, wiederverwendbare Skills:

  • senternet-site-metatags
  • senternet-site-prerender
  • senternet-site-mobile-optimize
  • senternet-site-share-images
  • senternet-site-csp
  • senternet-site-lighthouse
  • senternet-site-indexnow
  • senternet-site-firebase

Jede Skill hatte eng umrissene Zuständigkeiten, deterministische Erwartungen, betriebliche Leitplanken und wiederverwendbare Implementierungslogik. Die Ergebnisse wurden dramatisch stabiler.

Der wichtigste Gedanke: betriebliche Konsistenz

KI ist überraschend gut darin, Komponenten zu erzeugen. Viel schlechter ist sie darin, Produktionsinfrastruktur über mehrere Projekte hinweg konsistent zu pflegen.

Menschen erinnern sich ganz natürlich an Dinge wie:

  • „Haben wir OpenGraph-Tags gesetzt?“
  • „Prerendern wir diese Route?“
  • „Haben wir robots.txt konfiguriert?“
  • „Wird dieses Social-Bild korrekt beschnitten?“
  • „Sind die Lighthouse-Werte noch akzeptabel?“
  • „Ist die Analytik ins Produktionslayout gekommen?“

KI vergisst diese Details oft vollständig, wenn man sie nicht ausdrücklich führt. Genau dort werden wiederverwendbare Skills mächtig. Statt auf Gedächtnis oder wiederholtes Prompten zu setzen, werden betriebliche Standards in wiederverwendbare Abläufe kodiert.

Das Ziel war nicht vollständige Automatisierung. Es war, vergessene Arbeit zu reduzieren.

Das Konzept der „Über-Skill“

Eines der nützlichsten Muster wurde am Ende das, was ich „Über-Skills“ zu nennen begann. Statt eine einzelne isolierte Aufgabe zu erledigen, orchestrieren diese Abläufe mehrere Einrichtungsschritte gemeinsam. Zum Beispiel:

  • erkennen, was bereits konfiguriert ist
  • abgeschlossene Einrichtung überspringen
  • fehlende Produktionsfunktionen identifizieren
  • nur inkrementelle Verbesserungen anwenden
  • zerstörerische Umschreibungen vermeiden

Der letzte Punkt wurde besonders wichtig. Einer der größten Fehlermodi von KI-Coding-Werkzeugen ist, eine Änderung zu verlangen und ein versehentliches Refactoring des ganzen Projekts zu bekommen. Die Skills haben dieses Verhalten deutlich eingegrenzt.

Was sich tatsächlich verbessert hat

Die größten Gewinne waren nicht schnelleres Schreiben von Code, hübschere Komponenten oder weniger Tippen. Die größten Gewinne waren:

  • weniger Rückschritte
  • weniger vergessene Deployment-Details
  • weniger SEO-Fehler
  • weniger repetitive Einrichtungsaufgaben
  • gleichmäßigere Produktionsreife
  • weniger Entscheidungsmüdigkeit

Mit anderen Worten: Die KI wurde nützlicher, sobald der Arbeitsablauf strukturierter wurde.

Einsatz in der Praxis

Diese Abläufe wurden schließlich Teil des Produktionsprozesses hinter Projekten wie:

Beide Projekte profitierten davon, dieselben betrieblichen Standards wiederholt anzuwenden: Umgang mit Metadaten, Mobiloptimierung, Abläufe für Share-Bilder, SEO-Struktur, Deployment-Konsistenz und Performance-Optimierung. Ohne wiederverwendbare Skills löste ich dieselben Infrastrukturprobleme in jedem Projekt neu.

Wo KI-gestützte Entwicklung weiterhin schwächelt

Selbst mit wiederverwendbaren Skills gibt es klare Grenzen. Claude Code kann weiterhin:

  • funktionierenden Code überrefaktorieren
  • Architekturentscheidungen halluzinieren
  • responsive Layouts kaputtmachen
  • unnötige Abstraktionen erfinden
  • Anweisungen nur teilweise umsetzen
  • subtile UX-Inkonsistenzen übersehen

Der Feinschliff im Frontend verlangt weiterhin menschliches Urteil, und zwar reichlich. Aber strukturierte Abläufe verringern das Chaos drastisch.

Meine derzeitige Sicht

Ich denke zunehmend, dass die Zukunft KI-gestützter Entwicklung weniger nach Prompting aussieht und mehr nach Betriebs-Engineering. Die besten Ergebnisse erzielen vermutlich nicht die Leute, die die längsten Prompts schreiben, alle Beschränkungen entfernen oder vollautonomen Agenten hinterherjagen.

Es werden die Leute sein, die wiederverwendbare Abläufe, beschränkte Systeme, komponierbares Werkzeug, deterministische Infrastruktur und betriebliche Leitplanken bauen. Der eigentliche Hebel entsteht daraus, Konsistenz zu kodieren. Nicht bloß daraus, Code zu erzeugen.

Abschließende Gedanken

KI-Coding-Werkzeuge sind bereits außerordentlich leistungsfähig. Doch zwischen dem Erzeugen einer Demo und dem wiederholten Ausliefern produktionsreifer Websites liegt weiterhin ein gewaltiger Unterschied.

Für mich wurden wiederverwendbare Claude-Code-Skills zu einer Möglichkeit, diese Lücke zu schließen. Nicht indem sie Ingenieursdisziplin ersetzen, sondern indem sie es leichter machen, sie durchgängig anzuwenden.

Top comments (0)