Shadcn/ui Component Library
技能 已验证 活跃shadcn/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.
功能
- 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
使用场景
- 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.
非目标
- 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.
工作流
- 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.
实践
- Component Library Integration
- React UI Development
- Tailwind CSS Styling
- Accessibility Best Practices
先决条件
- Claude Code
- Claude MPM framework
安装
npx skills add bobmatnyc/claude-mpm-skills通过 npx 运行 Vercel skills CLI(skills.sh)— 需要本地安装 Node.js,以及至少一个兼容 skills 的智能体(Claude Code、Cursor、Codex 等)。前提是仓库遵循 agentskills.io 格式。
质量评分
已验证类似扩展
Shadcn Ui
98为集成和构建 shadcn/ui 组件应用程序提供专家指导，包括组件发现、安装、自定义和最佳实践。
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.
前端设计
99通过高设计质量创建独特、生产级的面向接口。当用户要求构建 Web 组件、页面或应用程序时，请使用此技能。生成富有创意、精美的代码，避免通用的 AI 美学。
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
98使用 shadcn/ui 组件（基于 Radix UI + Tailwind 构建）、Tailwind CSS 的原子化样式以及基于画布的视觉设计，创建美观、无障碍的用户界面。适用于构建用户界面、实施设计系统、创建响应式布局、添加无障碍组件（对话框、下拉菜单、表单、表格）、自定义主题和颜色、实现暗黑模式、生成视觉设计和海报，或跨应用程序建立一致的样式模式。
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.