shadcn-management

Shadcn 组件管理

前提条件

验证项目配置：

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. 输出 - 提供安装命令和示例代码

复杂构建工作流

对于多组件功能（例如“构建登录表单”），请参阅 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 主题的独特视觉风格
• 需要自定义字体、配色方案或动态效果
• 构建需要创意设计的着陆页或营销网站
• 用户提到“自定义样式”“独特设计”“不要通用风格”

工作流：

1. 使用 shadcn-management 处理组件结构与组合
2. 调用 frontend-design 进行视觉自定义：
   • 在 globals.css 中自定义 CSS 变量
   • 在 tailwind.config.js 中扩展 Tailwind 主题
   • 增强动画和微交互
   • 优化字体和颜色

自定义目标：

• @/app/globals.css - CSS 变量、自定义字体
• tailwind.config.js - 主题颜色、字体、动画
• 组件级 className 覆盖