Shadcn Component Management
Prerequisites
Verify project setup:
shadcn___get_project_registries
If no components.json exists, instruct user: npx shadcn@latest init
Quick Add Workflow
For simple component additions (e.g., "add a date picker"):
Search - Find component in registry:
shadcn___search_items_in_registries(registries, query)
View - Get implementation details:
shadcn___view_items_in_registries(items: ["@shadcn/component-name"])
Examples - Get usage demo:
shadcn___get_item_examples_from_registries(registries, query: "component-demo")
Install - Get add command:
shadcn___get_add_command_for_items(items: ["@shadcn/component-name"])
Output - Provide installation command and example code
Complex Build Workflow
For multi-component features (e.g., "build a login form"), see references/workflows.md.
When to use Complex Build:
- Feature requires 3+ components
- Need component hierarchy planning
- Building complete sections (forms, dashboards, modals)
Component Naming Patterns
Common search queries:
- Forms:
form, input, select, checkbox, radio-group
- Layout:
card, dialog, sheet, drawer, tabs
- Feedback:
alert, toast, skeleton, progress
- Navigation:
button, dropdown-menu, navigation-menu
Example queries for demos: form-demo, card-with-form, dialog-demo
After Implementation
Always run audit:
shadcn___get_audit_checklist
Custom Styling & Theming
Shadcn provides structural foundation with default styling. For custom aesthetics:
Invoke frontend-design skill when:
- User wants unique/distinctive visual style beyond default shadcn theme
- Need custom typography, color schemes, or motion effects
- Building landing pages or marketing sites requiring creative design
- User mentions "custom styling", "unique design", "not generic"
Workflow:
- Use
shadcn-management for component structure and composition
- Invoke
frontend-design for visual customization:
- Custom CSS variables in
globals.css
- Tailwind theme extensions in
tailwind.config.js
- Animation and micro-interaction enhancements
- Typography and color refinements
Customization targets:
@/app/globals.css - CSS variables, custom fontstailwind.config.js - theme colors, fonts, animations- Component-level className overrides
1---2name: shadcn-management3description: Manage shadcn/ui components using MCP tools. Use when user needs to: (1) Add new shadcn components to a project (2) Build complex UI features requiring multiple components (3) Research component implementations and examples (4) Get component installation commands Triggers: "add shadcn", "shadcn component", "build UI with shadcn", "install component", "create form", "create dialog"4---5
6# Shadcn Component Management
7
8## Prerequisites
9
10Verify project setup:
11```
12shadcn___get_project_registries
13```
14If no components.json exists, instruct user: `npx shadcn@latest init`
15
16## Quick Add Workflow
17
18For simple component additions (e.g., "add a date picker"):
19
201. **Search** - Find component in registry:
21 ```
22 shadcn___search_items_in_registries(registries, query)
23 ```
24
252. **View** - Get implementation details:
26 ```
27 shadcn___view_items_in_registries(items: ["@shadcn/component-name"])
28 ```
29
303. **Examples** - Get usage demo:
31 ```
32 shadcn___get_item_examples_from_registries(registries, query: "component-demo")
33 ```
34
354. **Install** - Get add command:
36 ```
37 shadcn___get_add_command_for_items(items: ["@shadcn/component-name"])
38 ```
39
405. **Output** - Provide installation command and example code
41
42## Complex Build Workflow
43
44For multi-component features (e.g., "build a login form"), see [references/workflows.md](references/workflows.md).
45
46**When to use Complex Build:**
47- Feature requires 3+ components
48- Need component hierarchy planning
49- Building complete sections (forms, dashboards, modals)
50
51## Component Naming Patterns
52
53Common search queries:
54- Forms: `form`, `input`, `select`, `checkbox`, `radio-group`
55- Layout: `card`, `dialog`, `sheet`, `drawer`, `tabs`
56- Feedback: `alert`, `toast`, `skeleton`, `progress`
57- Navigation: `button`, `dropdown-menu`, `navigation-menu`
58
59Example queries for demos: `form-demo`, `card-with-form`, `dialog-demo`
60
61## After Implementation
62
63Always run audit:
64```
65shadcn___get_audit_checklist
66```
67
68## Custom Styling & Theming
69
70Shadcn provides **structural foundation** with default styling. For custom aesthetics:
71
72**Invoke `frontend-design` skill when:**
73- User wants unique/distinctive visual style beyond default shadcn theme
74- Need custom typography, color schemes, or motion effects
75- Building landing pages or marketing sites requiring creative design
76- User mentions "custom styling", "unique design", "not generic"
77
78**Workflow:**
791. Use `shadcn-management` for component structure and composition
802. Invoke `frontend-design` for visual customization:
81 - Custom CSS variables in `globals.css`
82 - Tailwind theme extensions in `tailwind.config.js`
83 - Animation and micro-interaction enhancements
84 - Typography and color refinements
85
86**Customization targets:**
87- `@/app/globals.css` - CSS variables, custom fonts
88- `tailwind.config.js` - theme colors, fonts, animations
89- Component-level className overrides
majiayu000