shadcn-components
Standardizes UI development using shadcn/ui component primitives.
Install
mkdir -p .claude/skills/shadcn-components && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/14467" && unzip -o skill.zip -d .claude/skills/shadcn-components && rm skill.zipInstalls to .claude/skills/shadcn-components
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.
Build UI using shadcn/ui components. Use when creating pages, forms, modals, navigation, sidebars, or any frontend UI. Provides component selection, composition patterns, and installation commands. Always activate before writing custom UI code.Key capabilities
- →Search for shadcn/ui components and blocks
- →Install shadcn/ui components using npx
- →Compose UI elements from shadcn primitives
- →Avoid building custom implementations of existing shadcn components
- →Access component details and usage examples
How it works
This skill guides the selection and installation of shadcn/ui components, emphasizing composition over custom development for UI elements.
Inputs & outputs
When to use shadcn-components
- →Build form UI
- →Create modal components
- →Assemble page layouts
About this skill
shadcn UI Components
Required Workflow
Before writing ANY UI code:
- Check docs/shadcn-components.md for relevant primitives
- Use MCP
mcp__shadcn__search_items_in_registriesto find blocks matching your need - Install blocks with
npx shadcn@latest add <block>before customizing - Only build custom components when no shadcn primitive or block exists
Composition Philosophy
shadcn components are primitives meant to be stacked, not standalone solutions.
Mental model: Decompose UI into shadcn primitives first:
- Login page = Card + Form + Field + Input + Button
- Settings page = Tabs + Card + Form + Switch + Select
- Dashboard = Sidebar + Card + Table + Chart + Badge
- Modal form = Dialog + Form + Field + Input + Button
Pattern: Container → Layout → Interactive → Feedback
- Containers: Card, Dialog, Sheet, Sidebar
- Layout: Tabs, Accordion, Separator, ScrollArea
- Interactive: Button, Input, Select, Switch, Checkbox
- Feedback: Alert, Toast, Badge, Skeleton
DO NOT Build Custom Implementations Of:
Buttons, inputs, dialogs, dropdowns, cards, forms, navigation, tables, tooltips, popovers, or any component that exists in shadcn. Use the primitives.
MCP Tools Available
mcp__shadcn__search_items_in_registries- Search for components/blocks by keywordmcp__shadcn__view_items_in_registries- View component details and filesmcp__shadcn__get_item_examples_from_registries- Get usage examplesmcp__shadcn__get_add_command_for_items- Get install command
Project Configuration
- Style: radix-mira (compact/dense interface)
- Base color: mist
- Theme: mist
- Chart Color: mist
- Heading: Source Serif 4
- Font: Figtree
- Radius: Large (0.875rem)
- Icons: Lucide
- Components location:
src/components/ui/ - Preset code: --preset b4cwnZvlhI
Styling
- Use
cn()utility from@/lib/utilsfor conditional classes - Theme colors use CSS variables in
globals.css - Components support light/dark mode via
.darkclass on root
When not to use it
- →When building custom components that already exist as shadcn primitives
- →When not working on frontend UI development
- →When not using shadcn/ui as the component library
Limitations
- →This skill is specific to shadcn/ui components and their ecosystem.
- →This skill discourages custom implementations of components available in shadcn/ui.
- →The styling configuration is fixed to radix-mira, mist color, Source Serif 4 heading, and Figtree font.
How it compares
This workflow prioritizes using and composing existing UI primitives, reducing the need for custom component development.
Compared to similar skills
shadcn-components side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| shadcn-components (this skill) | 0 | 4mo | No flags | Beginner |
| ui-styling | 12 | 9mo | Review | Beginner |
| figma | 22 | 4mo | No flags | Intermediate |
| interaction-design | 15 | 5mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
ui-styling
mrgoonie
Create 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.
figma
openai
Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.
interaction-design
wshobson
Design and implement microinteractions, motion design, transitions, and user feedback patterns. Use when adding polish to UI interactions, implementing loading states, or creating delightful user experiences.
web-design-reviewer
github
This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like "review website design", "check the UI", "fix the layout", "find design problems". Detects issues with responsive design, accessibility, visual consistency, and layout breakage, then performs fixes at the source code level.
visual-design-foundations
wshobson
Apply typography, color theory, spacing systems, and iconography principles to create cohesive visual designs. Use when establishing design tokens, building style guides, or improving visual hierarchy and consistency.
design-lab
0xdesign
Conduct design interviews, generate five distinct UI variations in a temporary design lab, collect feedback, and produce implementation plans. Use when the user wants to explore UI design options, redesign existing components, or create new UI with multiple approaches to compare.