shadcnvon shadcn

shadcn Skill.

Ein Claude Code- und Codex-Skill für UI-Design: fügt shadcn-Komponenten in einem Projekt hinzu, durchsucht, korrigiert, gestaltet und kombiniert sie.

Web & UI
UI-Code

OpenDesign herunterladen Anleitung ansehen

shadcn-ui/ui · skills/shadcn/SKILL.mdSKILL.md

--- name: shadcn description: Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset". --- ## Current Project Context ## Principles ## Critical Rules ## Key Patterns ## Component Selection ## Key Fields

Metadaten und Abschnittsüberschriften aus der Ursprungsdatei vom 14.09.2026 · 19.427 Zeichen insgesamt

01 Was es tut

Was der shadcn-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

Dieser Skill verwaltet shadcn/ui-Projekte durch das Hinzufügen, Suchen, Korrigieren und Zusammensetzen von Komponenten. Er fügt Live-Projektkontext aus components.json ein, erzwingt framework-spezifische Regeln für Formulare, Styling, Komposition, Icons und Chat-UI und nutzt die shadcn-CLI für alle Vorgänge. Komponenten werden als Quellcode über npx shadcn@latest (oder den Package-Runner des Projekts) installiert.

Der Skill kommt zum Einsatz bei der Arbeit mit shadcn/ui, Komponentenregistries, Preset-Codes oder jedem Projekt mit einer components.json-Datei. Er behandelt RSC-Direktiven, Tailwind v3/v4, Base UI vs. Radix-Primitives, die Erkennung von Icon-Bibliotheken und Monorepo-Layouts. Jeder Befehl bezieht sich auf die tatsächlichen Aliase, den Package-Manager und die aufgelösten Pfade des Projekts.

Was er erzeugt

Quellcode-Dateien für shadcn-Komponenten, die dem aufgelösten UI-Pfad des Projekts hinzugefügt wurden
Zusammengeführte Komponentendateien bei Aktualisierungen, wobei lokale Änderungen erhalten bleiben, während Upstream-Updates angewendet werden

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Projektkontext einfügen
Führt npx shadcn@latest info --json aus, um die Projektkonfiguration, installierte Komponenten, Aliase, das RSC-Flag, die Tailwind-Version, die Icon-Bibliothek, die Basis (Radix oder Base) und die aufgelösten Pfade zu erhalten.
02
Registries durchsuchen, bevor eigenes UI geschrieben wird
Nutzt npx shadcn@latest search, um die shadcn-Registry und Community-Registries auf bereits vorhandene Komponenten zu prüfen, die den Bedarf abdecken.
03
Komponentendokumentation und Beispiele abrufen
Führt npx shadcn@latest docs <component> aus, um Dokumentation und Beispiel-URLs zu erhalten, und ruft diese dann ab, um die korrekte API-Nutzung zu prüfen, bevor eine Komponente erstellt oder korrigiert wird.
04
Komponenten mit der CLI hinzufügen oder aktualisieren
Nutzt npx shadcn@latest add, um Komponenten zu installieren.
05
Importe in Drittanbieter-Komponenten korrigieren
Prüft nach dem Hinzufügen von Komponenten aus Community-Registries Nicht-UI-Dateien auf fest codierte Pfade wie @/components/ui/...
06
Hinzugefügte Komponenten überprüfen und verifizieren
Liest alle hinzugefügten Dateien, um fehlende Unterkomponenten, fehlerhafte Zusammensetzungen, Verstöße gegen kritische Regeln und nicht übereinstimmende Icon-Importe zu prüfen.

02 Finden Sie Ihren Favoriten

Wann die shadcn Skill verwendet wird

Verwenden Sie den shadcn 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

Erstellen von UI mit shadcn/ui-Komponenten in einem bestehenden Projekt mit einer components.json-Datei
Initialisieren eines neuen shadcn-Projekts mit einem Preset-Code oder einem benannten Preset wie nova oder vega
Erstellen von Chat- oder Konversationsoberflächen mit MessageScroller, Message, Bubble, Attachment und Marker

Grenzen kennen

Manuelles Abrufen von Komponentendateien von GitHub anstatt die CLI zu verwenden
Standardmäßiges Verwenden einer Registry, wenn der Benutzer nicht angibt, welche verwendet werden soll
Verwenden von --overwrite, um Komponenten zu aktualisieren, ohne die ausdrückliche Zustimmung des Benutzers
Erfinden von Fähigkeiten, Integrationen oder Dateinamen, die im Projektkontext nicht vorhanden sind

Was Sie bereitstellen sollten

Komponenten- oder BlocknameDer Name einer shadcn-Komponente (button, dialog, select) oder eines Registry-Elements (@magicui/shimmer-button, owner/repo/item), das hinzugefügt oder gesucht werden soll.
Preset-Code oder benanntes PresetEin versionspräfixierter Base62-String (z. B. a2r6bw) von ui.shadcn.com oder ein benanntes Preset (nova, vega, maia, lyra, mira, luma) für init oder apply.

03 Innerhalb des Skills

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

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

Verwenden Sie gap-, niemals space-x- oder space-y-*
Für Abstände zwischen Flex-Kindern verwenden Sie gap-. Für vertikale Stapel verwenden Sie flex flex-col gap-. space-x- und space-y- sind nie erlaubt.
Formulare verwenden FieldGroup + Field
Formularlayouts müssen FieldGroup- und Field-Komponenten verwenden. Verwenden Sie niemals ein rohes div mit space-y- oder grid gap- für das Formularlayout.
Icons in Buttons verwenden data-icon
Icons innerhalb von Button müssen data-icon="inline-start" oder data-icon="inline-end" haben. Keine Größenklassen wie size-4 oder w-4 h-4 auf Icons innerhalb von Komponenten.
Elemente immer innerhalb ihrer Gruppe
SelectItem gehört in SelectGroup, DropdownMenuItem in DropdownMenuGroup, CommandItem in CommandGroup. Elemente niemals direkt rendern.
Verwenden Sie semantische Farb-Token, keine Rohwerte
Verwenden Sie bg-primary, text-muted-foreground usw. Verwenden Sie niemals rohe Tailwind-Farben wie bg-blue-500 oder text-emerald-600. Keine manuellen dark:-Farbüberschreibungen.
Dialog, Sheet und Drawer benötigen immer einen Titel
DialogTitle, SheetTitle und DrawerTitle sind für die Barrierefreiheit erforderlich. Verwenden Sie className="sr-only", wenn der Titel visuell verborgen sein soll.
Preset-Codes niemals manuell dekodieren
Verwenden Sie npx shadcn@latest preset decode <code>, preset url <code> oder preset open <code>. Für projektbewusste Preset-Erkennung verwenden Sie preset resolve. Erstellen Sie Preset-URLs niemals von Hand.
Führen Sie alle CLI-Befehle mit dem Package-Runner des Projekts aus
Verwenden Sie npx shadcn@latest, pnpm dlx shadcn@latest oder bunx --bun shadcn@latest je nach dem packageManager-Feld des Projekts. Verwenden Sie niemals fest npx, wenn das Projekt pnpm oder bun nutzt.

04 In Betrieb nehmen

shadcn 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 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/shadcn-ui/ui --skill shadcn

Generische skills-CLI-Form für skills/shadcn/SKILL.md; das Repository kann seinen eigenen Pfad dokumentieren.

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

I need a settings page with tabs for profile, account, and notifications. Each tab should have form fields grouped by section, with a save button at the bottom. Use the project's existing shadcn components and follow the FieldGroup pattern. The profile tab needs an avatar upload, the account tab needs email and password inputs with inline buttons to change them, and the notifications tab needs toggle groups for frequency (daily, weekly, monthly) and a set of checkboxes for notification types. Make sure all validation states use data-invalid and aria-invalid correctly.

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 npx shadcn@latest info aus, um zu prüfen, ob die Komponente zur Liste der installierten Komponenten hinzugefügt wurde
Prüfen Sie, ob die Icon-Importe mit dem iconLibrary-Feld des Projekts übereinstimmen (lucide-react, @tabler/icons-react usw.)

In OpenDesign importieren Sie shadcn über seinen SKILL.md-Link: Plugins → Add → Skill → Import from link, und wählen Sie es dann in der oberen Leiste aus.

OpenDesign herunterladen Quickstart lesen

05 Open Source, nachvollziehbar

Quelle, Lizenz und Verifizierung

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

Author: shadcn
Repository: github.com/shadcn-ui/ui Branch main
Skill-Datei: skills/shadcn/SKILL.md Inhalts-Prüfsumme bei Verifizierung erfasst; Commit 2b3e6d4
License: MIT Aus LICENSE.md.
Repository-Sterne: 123.708 GitHub-Snapshot vom 14.09.2026 für das gesamte shadcn-ui/ui Repository. Keine Bewertung oder Nutzungszahl für shadcn.
Verifiziert von OpenDesign: 14.09.2026 Quelldatei, Pfad, Lizenztext und Sternezählung wurden geprüft. Nicht in OpenDesign main gebündelt (geprüft 28.08.2026); ein Live-Durchlauf wurde auf dieser Seite nicht erfasst.

In der SKILL.md

Aktueller ProjektkontextInjiziert die aktuelle Projektkonfiguration und installierte Komponenten aus npx shadcn@latest info --json
PrinzipienVerwenden Sie zuerst vorhandene Komponenten, kombinieren Sie statt neu zu erfinden, nutzen Sie integrierte Varianten, verwenden Sie semantische Farben
Kritische RegelnStets durchgesetzte Regeln für Styling, Formulare, Komposition, Icons, Chat und CLI mit Links zu detaillierten Dateien
Wichtige MusterHäufigste Code-Muster: Formularlayout, Validierung, Icons in Buttons, Abstände, gleiche Dimensionen, Statusfarben
KomponentenauswahlTabelle, die UI-Anforderungen den richtigen shadcn-Komponenten zuordnet (Buttons, Formulare, Overlays, Feedback, Navigation, Chat)
Wichtige FelderErklärt aliases, isRSC, tailwindVersion, base, iconLibrary, resolvedPaths, framework, packageManager, preset aus dem Projektkontext
Komponenten-Dokumentation, Beispiele und VerwendungFühren Sie npx shadcn@latest docs aus, um URLs zu erhalten, und rufen Sie diese für korrekte API- und Verwendungsmuster ab
WorkflowNeun-Schritte-Prozess: Kontext holen, Installation prüfen, suchen, Docs holen, installieren, Imports korrigieren, prüfen, Registries behandeln, Presets wechseln
Aktualisieren von KomponentenVerwenden Sie --dry-run und --diff, um Upstream-Änderungen zu übernehmen und dabei lokale Anpassungen zu bewahren; verwenden Sie --overwrite niemals ohne Zustimmung
KurzreferenzCLI-Befehlsbeispiele für init, apply, add, search, docs, view, Preset-Operationen mit Flags und Registry-Syntax
Detaillierte ReferenzenLinks zu separaten Regeldateien für Formulare, Komposition, Chat, Icons, Styling, base-vs-radix, CLI, Registry, Anpassung

Die eigene Beschreibung des Skills

„Verwaltet shadcn-Komponenten und -Projekte – Hinzufügen, Suchen, Reparieren, Debuggen, Styling und Komponieren von UI, einschließlich Chat-Interfaces. Liefert Projektkontext, Komponentendokumentation und Anwendungsbeispiele. Gilt bei der Arbeit mit shadcn/ui, Komponenten-Registries, Presets, --preset-Codes oder jedem Projekt mit einer components.json-Datei. Wird auch durch „shadcn init", „create an app with --preset" oder „switch to --preset" ausgelöst."

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

shadcn

shadcn in einer echten UI-Design-Aufgabe ausführen.

Laden Sie OpenDesign herunter, importieren Sie shadcn über den SKILL.md-Link, fügen Sie den obigen Prompt ein und lesen Sie den Plan vor dem Ergebnis.

OpenDesign herunterladen Alle Skills durchsuchen

Terminal

npx skills add https://github.com/shadcn-ui/ui --skill shadcn

Was der shadcn-Skill in Claude Code und Codex leistet

In den eigenen Worten des Skills

So funktioniert es

Wann die shadcn Skill verwendet wird

Gut geeignet

Grenzen kennen

Was Sie bereitstellen sollten

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

Verwenden Sie gap-, niemals space-x- oder space-y-*

Formulare verwenden FieldGroup + Field

Icons in Buttons verwenden data-icon

Elemente immer innerhalb ihrer Gruppe

Verwenden Sie semantische Farb-Token, keine Rohwerte

Dialog, Sheet und Drawer benötigen immer einen Titel

Preset-Codes niemals manuell dekodieren

Führen Sie alle CLI-Befehle mit dem Package-Runner des Projekts aus