Shadcn/ui Component Library
Skill Verified Activeshadcn/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.
Features
- 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
Use Cases
- 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.
Non-Goals
- 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.
Practices
- Component Library Integration
- React UI Development
- Tailwind CSS Styling
- Accessibility Best Practices
Prerequisites
- Claude Code
- Claude MPM framework
Installation
npx skills add bobmatnyc/claude-mpm-skillsRuns the Vercel skills CLI (skills.sh) via npx — needs Node.js locally and at least one installed skills-compatible agent (Claude Code, Cursor, Codex, …). Assumes the repo follows the agentskills.io format.
Quality Score
VerifiedSimilar Extensions
Shadcn Ui
98Expert guidance for integrating and building applications with shadcn/ui components, including component discovery, installation, customization, and 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
99Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
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
98Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.
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.