用途:通过 MCP 工具管理 shadcn/ui 组件,适合需要向项目添加新 shadcn 组件,或构建需要多个组件的复杂 UI 功能时使用。
前置检查:先调用 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"]);最后输出安装命令与示例代码。
复杂构建流程:当功能需要 3 个以上组件、需要规划组件层级,或构建完整区块(表单、仪表盘、弹窗)时,参考 references/workflows.md。
常见搜索关键词:表单类 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-management 处理组件结构与组合,用 frontend-design 做视觉定制,包括 globals.css 中的自定义 CSS 变量、tailwind.config.js 中的主题扩展、动画与微交互增强、排版与颜色调整。定制目标包括 @/app/globals.css、tailwind.config.js 以及组件级 className 覆盖。
限制:资料未提供该技能的收费、价格、平台支持范围或效果保证等信息。