Wie man KI-Agenten beibringt, ohne Vorlagen zu designen und Videopräsentationen zu erstellen

Jeder, der Claude oder Cursor gebeten hat, eine Landingpage zu erstellen, kennt dieses Ergebnis. Der generierte Code funktioniert technisch, sieht aber visuell aus wie eine typische Seite von 2018 mit blauen Buttons und abgerundeten Karten. Die Modelle beherrschen CSS und React-Syntax, aber ihnen fehlt ein eingebautes Design-Gespür und ein Verständnis für die Projektstruktur.

Das garden-skills-Repository des chinesischen Entwicklers ConardLi löst dieses Problem durch das Agent-Skills-Format. Dies ist eine Reihe von Modulen gemäß Spezifikation SKILL.md, die Claude Code, Cursor, Codex und andere Terminal-Agenten in spezialisierte Ingenieure verwandeln.

Was sind Agent Skills und wie funktionieren sie

Anthropic hat kürzlich einen offenen Standard zur Erweiterung von Agent-Fähigkeiten vorgeschlagen. Im Wesentlichen ist ein Skill ein separater Ordner in Ihrem Projekt oder Home-Verzeichnis, der ein Manifest SKILL.md mit einem YAML-Header, Textanweisungen, fertige Skripte und Referenzhandbücher enthält.

Der Agent scannt das Feld description im Manifest. Wenn die Aufgabe des Benutzers mit der Beschreibung übereinstimmt, lädt das Modell den relevanten Kontext direkt während der Konversation. Dadurch entfällt die Notwendigkeit, umfangreiche System-Prompts in jeden Chat zu kopieren.

Das garden-skills-Repository enthält fünf fertige Module für reale Arbeitsaufgaben.

Fertige Skills im Repository

Jeder Skill ist auf ein bestimmtes Szenario zugeschnitten und enthält strenge Interaktionsregeln, um zu verhindern, dass der Agent halluziniert oder Genehmigungsschritte überspringt.

1. web-design-engineer

Das Modul konzentriert sich auf das Layout von Seiten, Dashboards, Prototypen und interaktiven Komponenten. Anstatt generischer Vorlagen verwendet es eine Datenbank mit 25 fertigen visuellen Stilen. Dazu gehören Linear's Ästhetik, Bloomberg's Terminal, Schweizer Stil, Neumorphismus, Retro-Futurismus und Minimalismus inspiriert von dem kenianischen Designer Kenya Hara (Muji).

Der Skill zwingt das Modell, über fünf Parameter zu arbeiten: Elementdichte, Animationsdynamik, Asset-Abhängigkeit, Markenkonformität und Variabilität. Der Agent validiert zunächst das Konzept und die Palette in oklch(), erstellt dann einen frühen v0-Prototyp und schreibt den endgültigen React-Code erst nach Genehmigung.

2. web-video-presentation

Dieser Skill nimmt Quelltext, einen technischen Artikel oder Unterrichtsnotizen und erstellt eine interaktive Web-Präsentation in einer festen Auflösung von 1920×1080 unter Verwendung des Vite-, React- und TypeScript-Stacks.

Die Präsentation wird durch Schritte und Tastenklicks gesteuert, sodass jede semantische Betonung mit dem visuellen Schritt auf dem Bildschirm synchronisiert ist. UI-Elemente werden beim Hover ausgeblendet, sodass Sie einen sauberen Bildschirm für Videoaufnahmen aufnehmen können.

Das Modul unterstützt 23 eingebaute Themes und integriert sich mit Sprachgenerierung über MiniMax CLI, OpenAI TTS, ElevenLabs oder das macOS-Systemwerkzeug say.

3. beautiful-article

Das Tool konvertiert Rohdaten (Links, PDFs, DOCX, Notizen oder Chat-Dumps) in ein lesbares Artikel-Layout. Der Skill basiert auf der Reacticle-Komponentenbibliothek und 11 Designer-Profilen (Tufte, Bodoni, Vignelli, Knuth).

Das Modul bietet 10 Publikationsformate, von detaillierten Tutorials mit 90% Originaltext-Erhaltung bis hin zu interaktiven Erklärern mit tiefgreifender Inhaltsüberarbeitung. Während der Zusammenstellung macht der Agent obligatorisch Pausen zur Bestätigung des Themas, der Struktur und der Illustrationsstrategie.

4. gpt-image-2 und kb-retriever

Zwei weitere Skills decken spezifischere Aufgaben ab:

• gpt-image-2 enthält 79 strukturierte Prompt-Vorlagen zur Generierung von Diagrammen, Architekturzeichnungen, Bannern und UI-Mockups über OpenAI-kompatible APIs. Es kann im Code-Generierungsmodus arbeiten oder einfach als Berater für das Verfassen von Prompts dienen.
• kb-retriever organisiert die lokale Suche in einem strukturierten Ordner mit Dokumenten, PDFs und Excel-Tabellen. Anstatt schwere Dateien komplett an den Agenten zu übergeben und das Kontextfenster zu verstopfen, liest der Skill Baumindizes data_structure.md, verwendet Utilities wie grep oder pdftotext und findet präzise Auszüge in maximal 5 Iterationen.

Möglichkeiten der Installation im Projekt

Der schnellste Weg, Skills zu Ihrer Arbeitsumgebung hinzuzufügen, ist die Verwendung des Paketmanagers npx skills. Das Tool erkennt automatisch, welcher KI-Assistent im Verzeichnis läuft, und platziert die Dateien im richtigen Ordner.

Alle Module auf einmal installieren:

npx skills add ConardLi/garden-skills

Einen bestimmten Skill in der globalen Konfiguration installieren:

npx skills add ConardLi/garden-skills -s web-design-engineer --global

Wenn Sie Claude Code verwenden, können Sie Plugins direkt über den integrierten Marketplace verbinden:

/plugin marketplace add ConardLi/garden-skills
/plugin install web-design-skills@garden-skills

Für feste Versionen in CI/CD oder Projekte mit strengen Abhängigkeitsanforderungen in Releases bietet das Repository signierte .zip-Archive mit SHA-256-Prüfsummen. Entpacken Sie das Archiv einfach nach .claude/skills/ oder .agents/skills/.

Kompatibilität mit Agenten

Das Format ist offen, daher funktionieren Skills nicht nur mit dem Anthropic-Ökosystem. Das Projekt wurde mit folgenden Tools getestet:

• Claude Code und die Claude.ai-Weboberfläche (über den Bereich Capabilities)
• Cursor (Ordner .agents/skills/<name>/)
• Codex CLI
• Gemini CLI
• OpenCode

Für wen ist dieses Projekt nützlich

ConardLis Sammlung spart Zeit für alle, die täglich KI-Agenten im Terminal oder Code-Editor verwenden. Anstatt Kontext manuell einzurichten und kindische Layout-Fehler zu korrigieren, erhalten Sie eine vorhersehbare Pipeline mit Kontrollpunkten und hochwertigen Design-Tokens.

Der einfachste Einstieg ist mit web-design-engineer oder beautiful-article. Sie liefern bereits bei der ersten Anfrage sichtbare Ergebnisse und zeigen, wie Sie Ihre eigenen Anweisungen für Spezifikation SKILL.md richtig formulieren.