Shadcn/ui Component Library
Skill Verifiziert Aktivshadcn/ui component library for React with Tailwind CSS - copy-paste accessible components with full code ownership
To serve as a comprehensive guide and resource for developers looking to implement accessible, customizable, and production-ready UI components using the shadcn/ui library in their React applications with Tailwind CSS.
Funktionen
- Provides comprehensive documentation for shadcn/ui components
- Includes installation and configuration instructions via CLI
- Demonstrates component usage with practical code examples
- Explains theming, dark mode, and Next.js integration
- Details accessibility best practices and composition patterns
Anwendungsfälle
- When building React applications with Tailwind CSS.
- When needing accessible, production-ready UI components.
- When desiring full control over component code and styling.
- When preferring composition over configuration for UI elements.
Nicht-Ziele
- Use when not using Tailwind CSS.
- Use when needing legacy browser support.
- Use when preferring packaged npm libraries over code ownership.
- Use when building non-React frameworks.
Workflow
- Review shadcn/ui core concepts and philosophy.
- Install shadcn/ui using the CLI.
- Add desired components to the project.
- Integrate components into React application code.
- Customize styling, theming, and accessibility as needed.
Praktiken
- Component Library Integration
- React UI Development
- Tailwind CSS Styling
- Accessibility Best Practices
Voraussetzungen
- Claude Code
- Claude MPM framework
Installation
npx skills add bobmatnyc/claude-mpm-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
98Expertenanleitung für die Integration und Erstellung von Anwendungen mit shadcn/ui-Komponenten, einschließlich Komponentenfindung, Installation, Anpassung und Best Practices.
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.
Frontend Design
99Erstellen Sie unverwechselbare Frontend-Oberflächen in Produktionsqualität mit hoher Designqualität. Verwenden Sie diese Fähigkeit, wenn der Benutzer auffordert, Webkomponenten, Seiten oder Anwendungen zu erstellen. Generiert kreativen, polierten Code, der generische KI-Ästhetik vermeidet.
Refactoring UI
98Audit and fix visual hierarchy, spacing, color, and depth in web UIs. Use when the user mentions "my UI looks off", "fix the design", "Tailwind styling", "color palette", "visual hierarchy", "design system", "spacing scale", or "component styling". Also trigger when building consistent design tokens, creating dark mode themes, improving data visualization clarity, or polishing UI details before launch. Covers grayscale-first workflow, constrained design scales, shadows, and component styling. For typeface selection, see web-typography. For usability audits, see ux-heuristics.
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.