Tailwind Design System

Tailwind Design System ist ein eigenständiger Skill aus dem offiziellen Repository wshobson/agents. Die direkt geprüfte Primärquelle ist der Pfad https://github.com/wshobson/agents/tree/main/plugins/frontend-mobile-development/skills/tailwind-design-system; die Datei SKILL.md ist erreichbar und verweist für vertiefende Beispiele auf eigene Referenzdateien. Das Repository wird laut offizieller LICENSE unter MIT veröffentlicht. Der Skill ist keine neue CSS-Laufzeit, keine gehostete Komponentensammlung und kein Ersatz für Tailwind CSS. Er ist eine installierbare Markdown-Arbeitsanleitung, die einen kompatiblen Coding-Agenten beim Entwurf und bei der Implementierung eines Frontend-Designsystems strukturiert.

Zweck und fachliche Grenze

Laut Anbieter richtet sich die Anleitung auf Tailwind CSS v4 und dessen CSS-first-Konfiguration. Im Mittelpunkt stehen Design Tokens, semantische Farben, Radien, Animationen, Dark Mode, Komponentenvarianten, Barrierefreiheit und responsive Layouts. Die Quelle ordnet Tokens von abstrakten Markenwerten über semantische Zwecke bis zu komponentenspezifischen Werten. Dadurch kann ein Team Änderungen an Farbe, Typografie, Abstand oder Zustand zentral planen, statt dieselben Werte unkontrolliert in vielen Komponenten zu duplizieren. Die Anleitung ist für die Standardisierung einer Codebasis gedacht. Sie liefert jedoch weder ein fertiges Unternehmensdesign noch eine verbindliche Markenentscheidung.

Tailwind CSS v4 und Tokens

Die SKILL.md beschreibt den Wechsel von Tailwind CSS v3 zur v4-Konvention mit @import "tailwindcss" und @theme anstelle der früheren Konfigurationsmuster. Die offiziellen Tailwind-Dokumente bestätigen, dass Theme-Variablen Design Tokens definieren, die anschließend Utility-Klassen erzeugen. Die Quelle verwendet unter anderem OKLCH-Farbwerte, semantische Namen sowie Variablen für Radius und Animation. Das unterstützt nachvollziehbare Themen und Varianten, setzt aber voraus, dass die konkrete Anwendung Tailwind CSS v4 tatsächlich installiert und die erzeugten Klassen im realen Build prüft.

Komponenten und responsive Muster

Die Referenzdateien enthalten ausgearbeitete TypeScript-Muster für CVA-Varianten, Compound Components, Formelemente, responsive Grids, Container und Dark Mode. Das ist mehr als ein allgemeiner Prompt: Der Skill definiert einen wiederverwendbaren Arbeitsablauf, verweist auf konkrete Installations- und Implementierungsgrenzen und bündelt mehrere zusammenhängende Referenzen unter einem installierbaren Skill-Pfad. Laut offizieller Tailwind-Dokumentation werden responsive Varianten mobile-first angewendet und mit Breakpoints kombiniert. Die Beispiele des Skills müssen deshalb an Framework, React-Version, Radix-Abhängigkeiten, tatsächliche Browserunterstützung und vorhandene Accessibility-Regeln angepasst werden. Ein konsistentes Tokenmodell erleichtert außerdem die Übergabe zwischen Design und Entwicklung, weil Entscheidungen über Zustände und Varianten im Quelltext auffindbar bleiben. Es verhindert nicht automatisch widersprüchliche Anforderungen; diese müssen im Team dokumentiert und mit echten Nutzungsszenarien geprüft werden.

Verantwortung und Grenzen

Der Skill kann durch einen Coding-Agenten lokale Dateien lesen und Codeänderungen vorbereiten oder ausführen, wenn der jeweilige Harness diese Werkzeuge freigibt. Er hat selbst keinen Server, keine Kontoberechtigung und keine externe Datenverbindung. Vor schreibenden Aktionen gehören Ziel, Umfang, Diff und Tests geprüft. Tokens, private Designregeln und unveröffentlichte Quelltexte sollten nicht unnötig an einen Modellanbieter übertragen werden. Die Anleitung ersetzt weder manuelle Accessibility-Prüfung noch visuelle Regressionstests, Browsermatrix, Designfreigabe oder Sicherheitsreview. Die Einordnung wurde am 10. September 2026 anhand des exakten Repository-Pfads, der SKILL.md, der Referenzdateien, der MIT-Lizenz und der offiziellen Tailwind-Dokumentation vorgenommen.