name: shadcn-management description: | 使用 MCP 工具管理 shadcn/ui 组件。在用户需要时使用： (1) 向项目添加新的 shadcn 组件 (2) 构建需要多个组件的复杂 UI 功能 (3) 研究组件实现和示例 (4) 获取组件安装命令 触发词: “add shadcn”, “shadcn component”, “build UI with shadcn”, “install component”, “create form”, “create dialog”
Shadcn 组件管理
先决条件
验证项目设置：
shadcn___get_project_registries
如果 components.json 不存在，指导用户：npx shadcn@latest init
快速添加工作流
对于简单的组件添加（例如，“添加日期选择器”）：
-
搜索 - 在注册表中查找组件：
shadcn___search_items_in_registries(registries, query) -
查看 - 获取实现细节：
shadcn___view_items_in_registries(items: ["@shadcn/component-name"]) -
示例 - 获取使用演示：
shadcn___get_item_examples_from_registries(registries, query: "component-demo") -
安装 - 获取添加命令：
shadcn___get_add_command_for_items(items: ["@shadcn/component-name"]) -
输出 - 提供安装命令和示例代码
复杂构建工作流
对于多组件功能（例如，“构建登录表单”），请参阅 references/workflows.md。
何时使用复杂构建：
- 功能需要 3 个或更多组件
- 需要组件层次规划
- 构建完整部分（表单、仪表板、模态框）
组件命名模式
常见搜索查询：
- 表单：
form,input,select,checkbox,radio-group - 布局：
card,dialog,sheet,drawer,tabs - 反馈：
alert,toast,skeleton,progress - 导航：
button,dropdown-menu,navigation-menu
示例查询用于演示：form-demo, card-with-form, dialog-demo
实施后
始终运行审计：
shadcn___get_audit_checklist
自定义样式和主题
Shadcn 提供具有默认样式的结构基础。对于自定义美学：
在以下情况下调用 frontend-design 技能：
- 用户希望超越默认 shadcn 主题的独特/显著视觉风格
- 需要自定义排版、配色方案或动画效果
- 构建需要创意设计的落地页或营销网站
- 用户提及“自定义样式”、“独特设计”、“非通用”
工作流：
- 使用
shadcn-management用于组件结构和组合 - 调用
frontend-design用于视觉自定义：- 在
globals.css中自定义 CSS 变量 - 在
tailwind.config.js中扩展 Tailwind 主题 - 动画和微交互增强
- 排版和颜色精修
- 在
自定义目标：
@/app/globals.css- CSS 变量，自定义字体tailwind.config.js- 主题颜色、字体、动画- 组件级 className 覆盖