shadcn/ui Skill für OpenClaw

OpenClaw shadcn/ui Skill Übersicht

Der shadcn/ui Skill verbindet OpenClaw mit der shadcn/ui-Komponentenbibliothek und gibt Ihrem Agenten die Möglichkeit, barrierefreie React-Komponenten in Ihrem Projekt hinzuzufügen, zu konfigurieren und zusammenzustellen. Nach der Installation können Sie komplette UI-Funktionen — Formulare, Datentabellen, Navigation, Dialoge und mehr — mit einfachen Beschreibungen in natürlicher Sprache erstellen.

Im Gegensatz zu herkömmlichen Komponentenbibliotheken, die als npm-Pakete ausgeliefert werden, kopiert shadcn/ui den Quellcode der Komponenten direkt in Ihr Projekt. Das bedeutet, dass Sie jede Zeile Code besitzen und Komponenten anpassen können, ohne gegen Bibliotheksabstraktionen ankämpfen zu müssen. Der OpenClaw shadcn/ui Skill macht diesen Workflow noch schneller, indem er Komponentenauswahl, Installation, Zusammenstellung und Styling über Konversation abwickelt.

Typischer Arbeitsablauf:

1. Bitten Sie OpenClaw, eine Datentabelle mit Sortierung und Paginierung hinzuzufügen.
2. Der Agent führt npx shadcn@latest add table und zugehörige Komponenten aus und generiert dann die Tabellenimplementierung mit Ihren angegebenen Spalten.
3. Eine voll funktionsfähige, barrierefreie Datentabelle erscheint in Ihrem Projekt — bereit zur Anpassung.

Dieser Skill ist für React- und Next.js-Projekte mit Tailwind CSS konzipiert. Er ergänzt sich natürlich mit dem Frontend Design Skill für Layout- und UX-Beratung und funktioniert gut mit jedem Design-System-Workflow.

Voraussetzungen für den shadcn/ui Skill

Bevor Sie den shadcn/ui Skill installieren, stellen Sie sicher, dass Sie Folgendes haben:

• OpenClaw installiert und ausgeführt (v1.0+)
• Ein React- oder Next.js-Projekt mit konfiguriertem Tailwind CSS
• Node.js v18+ und einen Paketmanager (npm, pnpm oder bun)
• clawhub CLI installiert für die Skill-Verwaltung

Überprüfen Sie Ihre Einrichtung:

# OpenClaw-Version überprüfen
openclaw --version

# Node.js-Version überprüfen
node --version

# Tailwind CSS-Konfiguration überprüfen
npx tailwindcss --help

Wenn Sie ein neues Projekt starten, kann der Agent Ihnen helfen, ein Next.js-Projekt mit vorkonfiguriertem shadcn/ui zu initialisieren, indem er npx shadcn@latest init verwendet.

So Installieren Sie den shadcn/ui Skill

Installieren Sie den shadcn/ui Skill mit einem einzigen Befehl:

npx clawhub@latest install shadcn-ui

Um die Installation zu überprüfen:

clawhub list

Sie sollten shadcn-ui in der Liste der installierten Skills sehen.

shadcn/ui Skill Konfiguration

Der shadcn/ui Skill benötigt keine API-Schlüssel oder externe Authentifizierung. Er arbeitet mit Ihren lokalen Projektdateien und der shadcn CLI.

Projektinitialisierung

Wenn Ihr Projekt noch nicht mit shadcn/ui konfiguriert ist, kann der Agent es initialisieren:

# shadcn/ui in Ihrem Projekt initialisieren
npx shadcn@latest init

Dies erstellt eine components.json-Konfigurationsdatei im Stammverzeichnis Ihres Projekts mit Einstellungen für:

| Einstellung | Beschreibung | |-------------|-------------| | style | Komponenten-Stilvariante (default oder new-york) | | tailwind.baseColor | Basisfarbe für das Theme (slate, gray, zinc, etc.) | | tailwind.cssVariables | Ob CSS-Variablen für das Theming verwendet werden | | aliases.components | Importpfad-Alias für Komponenten | | aliases.utils | Importpfad-Alias für Hilfsfunktionen |

Theme-Anpassung

Passen Sie das Standard-Theme an, indem Sie Ihre CSS-Variablen bearbeiten oder den Agenten bitten, Farben anzupassen:

/* Beispiel: Benutzerdefinierte Theme-Variablen in globals.css */
@layer base {
  :root {
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
  }
}

Wichtig: shadcn/ui-Komponenten werden in den Quellcode Ihres Projekts kopiert. Sie haben die volle Kontrolle über jede Komponente — es gibt keine versteckten Abhängigkeiten oder gesperrten Abstraktionen.

shadcn/ui Skill Anwendungsbeispiele

1. Ein Vollständiges Formular Hinzufügen

Du: "Erstelle ein Benutzerregistrierungsformular mit Feldern für Name, E-Mail, Passwort und einer AGB-Checkbox. Füge eine Validierung mit zod hinzu."

Der Agent installiert die erforderlichen Komponenten (form, input, checkbox, button, label) mit npx shadcn@latest add und generiert dann eine vollständige Formularkomponente mit zod-Schema-Validierung, Fehlermeldungen und barrierefreien Labels. Das Formular folgt React Hook Form-Mustern und ist bereit zur Verbindung mit Ihrer API.

2. Eine Datentabelle Erstellen

Du: "Füge eine Datentabelle zur Anzeige von Benutzern hinzu, mit Spalten für Name, E-Mail, Rolle und Status. Einschließlich Sortierung, Filterung und Paginierung."

Der Agent fügt die table-Komponente hinzu und erstellt eine voll ausgestattete Datentabelle mit @tanstack/react-table. Er generiert Spaltendefinitionen, Filtersteuerungen, Sortierungshandler und Paginierung — alles mit korrekten TypeScript-Typen und Barrierefreiheits-Attributen.

3. Ein Dashboard-Layout Erstellen

Du: "Richte ein Dashboard-Layout mit einer einklappbaren Seitenleiste, einer oberen Navigationsleiste, Breadcrumbs und einem Hauptinhaltsbereich ein."

Der Agent installiert die Komponenten sidebar, navigation-menu, breadcrumb und separator und fügt sie dann zu einem responsiven Layout mit mobilfreundlichem Seitenleisten-Toggle und korrekter semantischer HTML-Struktur zusammen.

4. Eine Befehlspalette Hinzufügen

Du: "Füge eine Befehlspalette wie in VS Code mit Strg+K-Tastenkürzel hinzu, mit der Benutzer nach Seiten und Aktionen suchen können."

Der Agent installiert die Komponenten command und dialog, richtet den Tastenkürzel-Listener ein und erstellt ein durchsuchbares Befehlsmenü mit gruppierten Einträgen, Icons und Navigationshandlern.

5. Eine Einstellungsseite Zusammenstellen

Du: "Erstelle eine Einstellungsseite mit Tabs für Profil, Konto, Benachrichtigungen und Erscheinungsbild. Verwende Karten innerhalb jedes Tabs zur Gruppierung verwandter Optionen."

Der Agent installiert die Komponenten tabs, card, switch, select und separator und erstellt dann eine vollständige Einstellungsoberfläche mit Formularfeldern, Schaltern und Dropdown-Selektoren, die in logische Tab-Gruppen organisiert sind.

Sicherheit und Best Practices

Befolgen Sie diese Richtlinien bei der Verwendung des shadcn/ui Skills:

• Generierten Code überprüfen. Der Agent generiert Komponentencode direkt in Ihrem Projekt. Überprüfen Sie immer neue Dateien und Änderungen vor dem Committen, insbesondere Formular-Handler und API-Integrationen.
• Benutzereingaben validieren. shadcn/ui stellt UI-Komponenten bereit, keine Eingabevalidierung. Kombinieren Sie Formulare immer mit serverseitiger Validierung unter Verwendung von Bibliotheken wie zod oder yup, und bereinigen Sie Eingaben vor der Verarbeitung.
• Abhängigkeiten aktuell halten. shadcn/ui-Komponenten hängen von Radix UI-Primitiven und anderen Paketen ab. Führen Sie regelmäßig npm audit aus und aktualisieren Sie anfällige Abhängigkeiten.
• Semantisches HTML verwenden. Der Agent generiert standardmäßig barrierefreies Markup, aber überprüfen Sie, dass benutzerdefinierte Änderungen ARIA-Attribute und Tastaturnavigation beibehalten.
• Dem Komponentenmuster folgen. Bewahren Sie shadcn/ui-Komponenten in Ihrem vorgesehenen Komponentenverzeichnis auf (z.B. components/ui/). Vermeiden Sie Inline-Änderungen — erweitern Sie sie stattdessen durch Komposition. Lesen Sie die Sicherheits-Checkliste für allgemeine OpenClaw-Hinweise.

Fehlerbehebung bei Häufigen Fehlern

"components.json not found"

Ihr Projekt wurde noch nicht mit shadcn/ui initialisiert.

# shadcn/ui in Ihrem Projekt initialisieren
npx shadcn@latest init

Folgen Sie den Anweisungen, um Ihren Stil, Ihre Basisfarbe und Ihre Import-Aliase auszuwählen. Der Agent kann dies auch für Sie ausführen.

"Module not found: Can't resolve '@/components/ui/button'"

Der Importpfad-Alias stimmt nicht mit Ihrer Projektkonfiguration überein.

1. Überprüfen Sie Ihre components.json auf den konfigurierten Alias-Pfad.
2. Stellen Sie sicher, dass Ihre tsconfig.json übereinstimmende Pfad-Aliase hat:

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

3. Wenn Sie Next.js verwenden, starten Sie den Entwicklungsserver nach Änderungen an der tsconfig.json neu.

"Tailwind CSS classes not applying"

Tailwind verarbeitet das Verzeichnis der Komponentendateien nicht.

1. Überprüfen Sie, ob Ihre tailwind.config.js den Komponentenpfad enthält:

module.exports = {
  content: [
    "./src/components/**/*.{js,ts,jsx,tsx}",
  ],
}

2. Stellen Sie sicher, dass globals.css die Tailwind-Direktiven importiert (@tailwind base; @tailwind components; @tailwind utilities;).
3. Starten Sie den Entwicklungsserver neu.