shadcn
CLI assistant for adding, styling, and composing shadcn/ui components.
Install
mkdir -p .claude/skills/shadcn-rain-kl && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/17542" && unzip -o skill.zip -d .claude/skills/shadcn-rain-kl && rm skill.zipInstalls to .claude/skills/shadcn-rain-kl
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".Key capabilities
- →Add shadcn/ui components to a project
- →Search for existing shadcn/ui components
- →Apply preset codes for project initialization
- →View component documentation and examples
- →Enforce styling and composition rules
How it works
It uses the shadcn CLI to add, search, and manage components, applying project-specific configurations and enforcing a set of critical rules for styling, forms, and component composition.
Inputs & outputs
When to use shadcn
- →Adding a new UI component
- →Searching for existing components
- →Syncing component styles with project themes
About shadcn
Automates the integration and management of shadcn/ui components. Enforces project-specific configuration and best practices for composing UIs.
Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also
When not to use it
- →When manually decoding preset codes or building preset URLs
- →When overriding component colors or typography using `className` for styling
- →When using raw `div` elements for form layout instead of `FieldGroup` + `Field`
Limitations
- →Requires using the project's package runner for CLI commands
- →Enforces specific styling and composition rules
- →Does not allow manual `dark:` color overrides
How it compares
This skill automates shadcn/ui component management and enforces specific coding standards, ensuring consistency and best practices across the project, unlike manual component integration.
Compared to similar skills
shadcn side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| shadcn (this skill) | 0 | 2mo | Review | Intermediate |
| implementing-figma-ui-tempad-dev | 0 | 5mo | No flags | Intermediate |
| frontend-design-zh | 0 | 6mo | Review | Intermediate |
| figma-implement-design | 24 | 5mo | No flags | Advanced |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by Rain-kl
View all by Rain-kl →You might also like
implementing-figma-ui-tempad-dev
ecomfe
Implement integration-ready UI code from a Figma selection or a provided nodeId using TemPad Dev MCP as the only source of design evidence (code snapshot, structure, screenshot, assets, tokens, codegen config). Detect the target repo stack and conventions first, then translate TemPad Dev’s Tailwind-like JSX/Vue IR into project-native code without adding new dependencies. Never guess key styles or measurements; avoid screenshot tuning loops. If required evidence is missing/contradictory or assets cannot be handled under repo policy, stop or ship a safe base with explicit warnings and omissions.
frontend-design-zh
L-LesterYu
使用 React、Tailwind CSS 和 shadcn/ui 创建独特、生产级的静态网站——无需设计稿。从纯文本需求生成大胆、令人难忘的设计，具备反AI套路美学、移动优先响应式模式和单文件打包功能。适用于构建落地页、营销网站、作品集、仪表盘或任何静态Web界面。支持 Vite（纯静态）和 Next.js（Vercel部署）两种工作流。
figma-implement-design
openai
Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-convention translation). Trigger when the user provides Figma URLs or node IDs, or asks to implement designs or components that must match Figma specs. Requires a working Figma MCP server connection.
prowler-ui
prowler-cloud
Prowler UI-specific patterns. For generic patterns, see: typescript, react-19, nextjs-15, tailwind-4. Trigger: When working inside ui/ on Prowler-specific conventions (shadcn vs HeroUI legacy, folder placement, actions/adapters, shared types/hooks/lib).
frontend-patterns
forgivesam168
Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.
ui-ux-pro-max
nextlevelbuilder
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.