Design & UI
shadcn/ui Skill
Regeln und Kontext für korrekten Umgang mit shadcn/ui-Komponenten im Projekt
Dieser Skill vermittelt einem Agenten das nötige Fachwissen, um shadcn/ui-Komponenten korrekt einzusetzen, statt UI-Elemente frei zu erfinden. Er injiziert den aktuellen Projektkontext über die shadcn-CLI (installierte Komponenten, Tailwind-Version, Aliase, Icon-Bibliothek) und verweist konsequent auf offizielle Dokumentation und Beispiele statt auf geraten wirkende Implementierungen.
Der Skill definiert klare Regeln zu Styling, Formularen, Komponentenstruktur, Icons und Chat-UI-Mustern, jeweils mit Incorrect/Correct-Codebeispielen in separaten Regeldateien. Erlaubt sind ausschließlich CLI-Aufrufe über npx, pnpm dlx oder bunx für shadcn selbst, wodurch der Skill eng auf sein Aufgabengebiet begrenzt bleibt. Geeignet ist er für Teams, die shadcn/ui-Projekte pflegen und konsistente, barrierefreie Komponentenverwendung sicherstellen wollen.
FAQ
Häufige Fragen zu shadcn/ui Skill
- Was macht dieser Skill konkret, den die shadcn-CLI nicht schon selbst leistet?
- Die CLI installiert Komponenten als Quellcode ins Projekt, trifft aber keine Aussage darüber, wie sie korrekt kombiniert und gestylt werden. Der Skill liefert dem Agenten dafür feste Regeln mit Incorrect/Correct-Beispielen zu Styling, Formularen, Komponentenstruktur, Icons und Chat-UI sowie den aktuellen Projektkontext über `shadcn info`.
- Braucht das Projekt bereits shadcn/ui, damit der Skill funktioniert?
- Der Skill greift auf eine `components.json` und die shadcn-CLI zu, um Projektkontext wie installierte Komponenten, Tailwind-Version und Aliase abzufragen. Er triggert laut Beschreibung aber auch bei `shadcn init` oder Preset-Codes, ist also auch für die Ersteinrichtung eines neuen Projekts nutzbar.
- Welche Befehle darf der Agent mit diesem Skill überhaupt ausführen?
- Erlaubt sind ausschließlich Aufrufe der shadcn-CLI selbst über npx, pnpm dlx oder bunx – etwa für Suche, Doku-Abfrage, Preset-Handling oder Info-Ausgabe. Andere Shell-Befehle oder freies Erfinden von UI-Code außerhalb dieser CLI-Aufrufe sind vom Skill nicht abgedeckt.
- Für wen lohnt sich der Skill nicht besonders?
- Teams, die kein shadcn/ui einsetzen oder komplett eigene, unabhängige Komponenten pflegen, profitieren kaum, da die Regeln explizit auf shadcn-Muster wie FieldGroup, InputGroup oder die shadcn-Chat-Primitives zugeschnitten sind. Sinnvoll ist er vor allem für Projekte mit vorhandener `components.json`, die konsistente und barrierefreie shadcn-Komponentenverwendung sicherstellen wollen.