SuperAPI AI 工具集

shadcn-management

智能体与模型

查看项目

更新于 10-16 00:30

技能介绍

用途:通过 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 覆盖。

限制:资料未提供具体收费、价格、平台支持范围或效果保证等信息。