SuperAPI AI 工具集

shadcn-management

智能体与模型

查看项目

更新于 10-15 23:42

技能介绍

用途:通过 MCP 工具管理 shadcn/ui 组件,适用于向项目添加新组件,或构建需要多个组件的复杂 UI 功能。

前置检查:先调用 shadcn___get_project_registries 验证项目配置;若不存在 components.json,提示用户执行 npx shadcn@latest init。

快速添加流程(适合简单组件,如日期选择器):1) 用 shadcn___search_items_in_registries(registries, query) 在注册表中搜索;2) 用 shadcn___view_items_in_registries(items: ["@shadcn/component-name"]) 查看实现细节;3) 用 shadcn___get_item_examples_from_registries(registries, query: "component-demo") 获取用法示例;4) 用 shadcn___get_add_command_for_items(items: ["@shadcn/component-name"]) 获取安装命令;5) 输出安装命令与示例代码。

复杂构建流程:当功能需要 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 覆盖。

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