83.3K+Download
Zur Nutzungsanleitung springen
shadcn-uivon Google Labs

shadcn UI Skill.

Ein Claude Code- und Codex-Skill für UI-Design: Integration und Anpassung von shadcn/ui-Komponenten: Entdeckung, Installation, Best Practices.

  • Web & UI
  • UI-Code
OpenDesign herunterladenAnleitung ansehen
google-labs-code/stitch-skills · plugins/stitch-build/skills/shadcn-ui/SKILL.mdSKILL.md
--- name: shadcn-ui description: Expert guidance for integrating and building applications with shadcn/ui components, including component discovery, installation, customization, and best practices. --- ## Core Principles ## Component Discovery and Installation ## Project Setup ## Component Architecture ## Customization Best Practices ## Blocks and Complex Components
Metadaten und Abschnittsüberschriften aus der Ursprungsdatei vom 14.09.2026 · 9.117 Zeichen insgesamt

01 Was es tut

Was die shadcn-ui Skill in Claude Code und Codex leistet

Zusammenfassung, Workflow und Ergebnisse — alles aus der SKILL.md des Skills ausgelesen.

Aus der SKILL.mdGelesen am 14.09.2026 · kein aufgezeichneter Durchlauf

In den eigenen Worten des Skills

Diese Skill gibt einem Agent fachkundige Anleitung zum Erstellen von Anwendungen mit shadcn/ui, der Sammlung barrierefreier, anpassbarer Komponenten, die mit Radix UI oder Base UI und Tailwind CSS gebaut sind. Sie umfasst die Komponentensuche über die shadcn MCP-Tools, die Installation über die CLI oder manuelle Integration, das Projekt-Setup über die Befehle create und init sowie die components.json-Optionen wie style, baseColor, cssVariables, rsc und rtl.

Sie erklärt die Dateistruktur von components/ui/ und den cn()-Helper, dann die Anpassung über CSS-Variablen in app/globals.css, class-variance-authority-Varianten und Wrapper-Komponenten. Blocks sind nach Kategorie organisiert, gefolgt von Barrierefreiheitsregeln, gängigen Mustern für Formulare, Dialoge und Tabellen, Fehlerbehebung und einer fünfstufigen Validierungsliste.

Was er erzeugt

  • Komponenten-Quelldateien, die in components/ui/ geschrieben und in Ihre Importe eingebunden werden.
  • Eine aktualisierte components.json, die die Konfiguration und hinzugefügten Komponenten widerspiegelt.
  • Block-Quellcode, der für mehrteilige Interfaces wie Dashboards oder Login-Abläufe abgerufen wird.
  • Ihre eigenen Wrapper-Komponentendateien, zum Beispiel components/custom-button.tsx.
Siehe Beispiel-Prompt ↗

So funktioniert es

  1. 01
    Zuerst den Katalog durchsuchen

    Erkunden Sie die verfügbaren Komponenten über die shadcn MCP tools, statt Namen zu raten, mit list_components, get_component_metadata und get_component_demo.

  2. 02
    Komponente mit der CLI hinzufügen

    Der empfohlene Weg ist der add-Befehl, der an Ihre Konfiguration angepassten Quellcode herunterlädt, Abhängigkeiten installiert und Dateien in components/ui/ ablegt.

  3. 03
    Oder den Quellcode manuell integrieren

    Für die manuelle Integration holen Sie sich den Code mit get_component, erstellen die Datei selbst, installieren Peer-Abhängigkeiten und passen Imports an.

  4. 04
    Projektkonfiguration initialisieren

    Neue Projekte nutzen create, um Stil, Schriftarten und Komponentenbibliothek zu wählen; bestehende Projekte führen init aus, wodurch components.json geschrieben wird.

  5. 05
    Theming mit CSS-Variablen

    Farben liegen in der Tailwind-Konfiguration und in CSS-Variablen, wobei ein .dark-Block Overrides für den Dark Mode liefert.

  6. 06
    Vor dem Commit validieren

    Typen prüfen, linten, Barrierefreiheit testen, Light- und Dark-Mode prüfen und Breakpoints verifizieren.

02 Finden Sie Ihren Favoriten

Wann das shadcn-ui Skill verwendet werden sollte

Verwenden Sie den shadcn-ui Skill in Claude Code oder Codex, wenn es um UI-Design dieser Art geht. Eignung und Grenzen unten stammen aus der eigenen Datei des Skills.

Gut geeignet

  • Ein neues Projekt starten, bei dem Stil, Schriftarten und Komponentenbibliothek vorab festgelegt werden sollten.
  • shadcn/ui nachträglich in eine bestehende Codebasis integrieren, die eine components.json-Konfiguration benötigt.
  • Arbeiten mit einer privaten oder Team-Registry, die in components.json deklariert ist, oder Durchsuchen des öffentlichen Registry Directory.
  • Größere Bildschirme wie Authentifizierungs-Flows oder Dashboards aus vorgefertigten Blocks zusammensetzen.
  • Projekte, bei denen Tastaturnavigation, ARIA-Attribute und Fokusverwaltung nicht verhandelbar sind.

Grenzen kennen

  • Komponenten- und Primitive-Versionen driften auseinander, sodass Upgrades brechen können und ein Prüfen der Release Notes erforderlich ist.

Was Sie bereitstellen sollten

  • Primitive-BibliothekWählen Sie Radix UI oder Base UI; der heruntergeladene Quellcode wird an diese Wahl angepasst.
  • Registry-NamenWenn mehr als die Standard-Registry konfiguriert ist, listen Sie zunächst auf, was verfügbar ist, bevor Sie Elemente daraus abrufen.
  • Block-KategorieEin optionaler Kategoriefilter grenzt ein, welche Blocks aufgelistet werden, bevor deren Quellcode abgerufen wird.

03 Innerhalb des Skills

Regeln, die das shadcn-ui Skill Claude Code und Codex vorgibt

7 konkrete Anweisungen, Voreinstellungen und Grenzen, die die SKILL.md für den Agent festlegt – der Teil der Datei, der das Ergebnis verändert.

  1. Verantwortung für den Komponenten-Code übernehmen

    Behandeln Sie die Komponenten als kopierten Quellcode, den Sie frei umschreiben dürfen, nicht als Abhängigkeit, die vollständig aktualisiert werden muss; Sie können Styling, Verhalten und Struktur frei ändern.

  2. Wrapper aus Components/ui/ heraushalten

    Zusammengesetzte oder erweiterte Komponenten gehören in components/, niemals in components/ui/, das die shadcn-Komponenten selbst enthält.

  3. Klassen mit Cn() zusammenführen

    Jede shadcn-Komponente verwendet den cn()-Helper, eine Kombination aus clsx und tailwind-merge, damit Overrides nicht kollidieren.

  4. Varianten mit Cva ausdrücken

    Varianten- und Größenlogik gehört in class-variance-authority, wobei defaultVariants festlegt, welche Variante und Größe gelten, wenn keine übergeben wird.

  5. Barrierefreiheit bei der Anpassung erhalten

    Behalten Sie ARIA-Attribute bei, erhalten Sie Tastatur-Handler, testen Sie mit Screenreadern und bewahren Sie sichtbare Fokusindikatoren.

  6. Die Laufzeitanforderungen beachten

    shadcn/ui v4 benötigt React 18+ und, bei Next.js-Projekten, Next.js 13+; einige Komponenten fixieren zudem bestimmte Radix-UI-Versionen.

  7. Peer-Dependencies bei manueller Installation selbst installieren

    Manuelle Integration bedeutet, dass Sie Peer-Dependencies selbst auflösen und Importe von Hand korrigieren, statt die CLI dies erledigen zu lassen.

04 In Betrieb nehmen

shadcn-ui in Claude Code oder Codex installieren

Ein npx skills add-Befehl, dann eine erste Aufgabe in Ihrem Agent und eine Checkliste für das Ergebnis.

shadcn-ui zu Claude Code, Codex oder Ihrem Agent hinzufügen

Im eigenen Projekt ausführen; der Installer fragt, welchem Agent er hinzugefügt werden soll.

Terminal
npx skills add https://github.com/google-labs-code/stitch-skills --skill shadcn-ui

Generische skills-CLI-Form für plugins/stitch-build/skills/shadcn-ui/SKILL.md; das Repository dokumentiert möglicherweise einen eigenen Pfad.

Dem Skill eine erste UI-Design-Aufgabe geben

In den eigenen Begriffen des Skills verfasst; ersetzen Sie die Teile in Klammern durch Ihr Material.

Starter prompt
Set up shadcn/ui in my existing [Next.js app] with the new-york style and zinc base color, then add Button, Card and Dialog. Use the login block for the sign-in page, and wrap Button in a LoadingButton in components/ that shows a spinner while [the form submission] is pending. Keep the ARIA attributes and keyboard handling intact.

Quelle: verfasst aus der SKILL.md in den eigenen Begriffen des Skills.

Das erste Ergebnis prüfen

Was die SKILL.md selbst als korrektes Ergebnis beschreibt:

  • Führen Sie den Projekt-Linter aus, um Stilprobleme im kopierten Quellcode zu erkennen.
  • Prüfen Sie die Barrierefreiheit mit Tools wie axe DevTools.
  • Führen Sie eine visuelle Prüfung sowohl im Hell- als auch im Dunkelmodus durch.
  • Überprüfen Sie das Verhalten bei verschiedenen Breakpoints.

In OpenDesign ist shadcn-ui gebündelt: Plugins → Skills, wählen Sie es in der oberen Leiste aus.

OpenDesign herunterladenQuickstart lesen

05 Open Source, nachvollziehbar

Quelle, Lizenz und Verifizierung

Woher die Fakten auf dieser Seite stammen und wann sie zuletzt geprüft wurden.

Author
Google Labs
Repository
github.com/google-labs-code/stitch-skills Branch main
Skill-Datei
plugins/stitch-build/skills/shadcn-ui/SKILL.md Content-Prüfsumme bei Verifikation erfasst; Commit 0337446
License
Apache-2.0 Aus LICENSE.
Repository-Sterne
8.304 GitHub-Snapshot vom 14.09.2026 für das gesamte Repository google-labs-code/stitch-skills, das 12 Skills aus diesem Katalog enthält. Keine Bewertung oder Nutzungszahl für shadcn-ui.
Verifiziert von OpenDesign
14.09.2026 Quelldatei, Pfad, Lizenztext und Sternanzahl wurden geprüft. In OpenDesign main gebündelt (geprüft am 28.08.2026); ein Live-Lauf wurde auf dieser Seite nicht erfasst.

In der SKILL.md

  1. GrundprinzipienWarum kopierter Code, den Sie besitzen, besser ist als eine Abhängigkeit.
  2. Komponenten-Erkennung und InstallationMCP-Tools, CLI versus manuelle Installation, benutzerdefinierte Registries.
  3. Projekt-Setupcreate versus init, components.json-Optionen, erforderliche Abhängigkeiten.
  4. Komponenten-ArchitekturVerzeichnisstruktur und das cn()-Klassen-Merge-Utility.
  5. Best Practices für die AnpassungCSS-Variablen-Theming, cva-Varianten, Wrapper-Komponenten außerhalb von components/ui/.
  6. Blocks und komplexe KomponentenAuflisten, Abrufen und Installieren mehrteiliger Blocks nach Kategorie.
  7. BarrierefreiheitRadix-gestütztes Tastatur-, ARIA-, Fokus- und Deaktivierungsverhalten, das erhalten bleiben muss.
  8. Häufige MusterImport-Rezepte für Formulare, Dialoge und Datentabellen.
  9. ProblembehebungLösungen für Import-, Stilkonflikt-, Abhängigkeits- und Versionsprobleme.
  10. Validierung und QualitätFünf Pre-Commit-Prüfungen von der Typüberprüfung bis zur responsiven QA.
  11. RessourcenReferenzdateien für Einrichtung, Katalog, Anpassung und Migration.
  12. BeispieleBeispielimplementierungen sowie Muster für Formulare, Dashboards, Authentifizierung und Datentabellen.
Die eigene Beschreibung des Skills
„Expertenanleitung für die Integration und Entwicklung von Anwendungen mit shadcn/ui-Komponenten, einschließlich Komponentensuche, Installation, Anpassung und Best Practices."

Front-Matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst etwa 9.117 Zeichen. Die vollständige Datei auf GitHub lesen.

06 Vor der Installation

Fragen zum shadcn-ui Skill

Die Antworten stammen aus der SKILL.md, gelesen am 14.09.2026, nicht aus einem protokollierten Lauf.

Radix UI oder Base UI?

Beides ist möglich. Sie wählen die Primitive in Ihrer Konfiguration, und die CLI passt den heruntergeladenen Quellcode entsprechend an. Die beschriebenen Barrierefreiheitsgarantien sind an Komponenten gebunden, die auf Radix-UI-Primitiven basieren.

shadcn UI

Führen Sie shadcn-ui mit einer echten UI-Design-Aufgabe aus.

Der shadcn-ui Skill ist in OpenDesign enthalten. Laden Sie die App herunter, wählen Sie den Skill unter Plugins → Skills aus, fügen Sie den Prompt oben ein und lesen Sie den Plan vor dem Ergebnis.

OpenDesign herunterladenAlle Skills durchsuchen
Terminal
npx skills add https://github.com/google-labs-code/stitch-skills --skill shadcn-ui