Shadcn Ui
Skill Verifiziert AktivExpertenanleitung für die Integration und Erstellung von Anwendungen mit shadcn/ui-Komponenten, einschließlich Komponentenfindung, Installation, Anpassung und Best Practices.
Entwicklern die effiziente Integration, Anpassung und Erstellung von Anwendungen mit shadcn/ui-Komponenten durch Expertenanleitungen und praktische Werkzeuge zu ermöglichen.
Funktionen
- Komponentenfindung und -installation
- Projekt-Setup und -Konfiguration
- Themen- und Komponentenanpassung
- Integration mit shadcn MCP-Tools
- Anwendungsbeispiele und Best Practices
Anwendungsfälle
- Integration von shadcn/ui in ein neues oder bestehendes React-Projekt
- Entdecken und Installieren spezifischer shadcn/ui-Komponenten
- Anpassen des Aussehens und Verhaltens von Komponenten
- Erstellen komplexer UI-Elemente wie Formulare und Datentabellen mit shadcn/ui
Nicht-Ziele
- Bereitstellung einer Komponentenbibliothek, die in node_modules lebt
- Ersetzen der Notwendigkeit von React, Tailwind CSS oder Node.js
- Anleitungen zu Aspekten außerhalb der shadcn/ui-Integration
Installation
npx skills add google-labs-code/stitch-skillsFührt das Vercel skills CLI (skills.sh) via npx aus — benötigt Node.js lokal und mindestens einen installierten skills-kompatiblen Agent (Claude Code, Cursor, Codex, …). Setzt voraus, dass das Repo dem agentskills.io-Format folgt.
Qualitätspunktzahl
VerifiziertVertrauenssignale
Ähnliche Erweiterungen
Shadcn/ui Component Library
99shadcn/ui component library for React with Tailwind CSS - copy-paste accessible components with full code ownership
UI UX Pro Max Skill
98Erstellen Sie schöne, zugängliche Benutzeroberflächen mit shadcn/ui-Komponenten (basierend auf Radix UI + Tailwind), Utility-First-Styling mit Tailwind CSS und canvasbasierten visuellen Designs. Verwenden Sie dies beim Erstellen von Benutzeroberflächen, Implementieren von Designsystemen, Erstellen responsiver Layouts, Hinzufügen zugänglicher Komponenten (Dialoge, Dropdowns, Formulare, Tabellen), Anpassen von Themes und Farben, Implementieren des Dark Mode, Generieren visueller Designs und Poster oder Herstellen konsistenter Styling-Muster über Anwendungen hinweg.
UI Styling Skill
95Style UIs with shadcn/ui components (Radix UI + Tailwind CSS). Use for accessible components, themes, dark mode, responsive layouts, design systems, color customization.
Setup Tailwind Typescript
100Configure Tailwind CSS with TypeScript in a Next.js or React project. Covers installation, configuration, custom theme extensions, component patterns, and type-safe styling utilities. Use when adding Tailwind CSS to an existing TypeScript project, customizing the Tailwind theme for a project's design system, setting up type-safe component styling patterns, or configuring Tailwind plugins and extensions.
Sentry React Router Framework Sdk
100Full Sentry SDK setup for React Router Framework mode. Use when asked to "add Sentry to React Router Framework", "install @sentry/react-router", or configure error monitoring, tracing, profiling, session replay, logs, or user feedback for a React Router v7 framework app.
React Modernization
99Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React Hooks, or upgrading to latest React versions.