关于 shadcn-component-boundaries
shadcn-component-boundaries 是面向使用 shadcn 项目的组件组织技能，供创建、迁移或审查 UI 组件时使用。它依据项目配置划分组件归属，并规定单向依赖边界。
主要功能
- 01从 components.json 解析目录别名
- 02区分注册表原语与产品组件
- 03按复用范围安排组件位置
- 04约束 feature → common → ui 依赖
- 05检查 ui 边界与样式变体
适用场景
- 01为 shadcn 项目新增组件
- 02迁移或审查现有组件
- 03检查组件目录与依赖方向
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/shadcn-component-boundaries确认已加载。
附带文件references/placement-examples.md
详细介绍
shadcn 组件边界
激活约定
在使用 shadcn 的项目中创建、移动、封装或审查 UI 组件时，加载此技能。
硬性规则
- 从
components.json（其中的components和ui别名）或已安装 shadcn 技能的项目上下文命令解析路径。切勿假定目录是components/还是src/components/。 - 将解析后的
ui目录专用于从 shadcn 或兼容注册表安装的注册表管理基础组件。 - 切勿将产品自有的封装组件、组合组件、区块、领域组件或功能行为放入
ui目录。 - 将可复用的产品自有组件放在解析后的组件目录下的
common/中。 - 将功能自有组件放在具名功能文件夹中，或与对应功能共置。
- 进行组合：在
common/或功能文件夹中封装注册表基础组件，而不是向基础组件添加产品行为。 - 保持依赖单向：功能 → common → ui。
ui目录绝不从common或功能文件夹导入内容。 - 使用全局样式表中的语义令牌。将令牌视为夸克、将注册表基础组件视为原子；不要将分子或有机体的名称强行用于路径。
- 配置了
@shadcn/lint时，shadcn/no-restyle会强制执行ui边界：调用处可以通过className传入布局类，但外观应由变体和尺寸决定。应向基础组件添加变体，而不是在调用处重新设置样式。
决策关卡
| 组件归属 | 目标位置 |
|---|---|
| shadcn 或兼容注册表基础组件 | 解析后的 ui 目录 |
| 可复用的产品自有组件 | <components>/common/ |
| 特定功能组件 | <components>/<feature>/ 或与功能共置 |
| 路由或页面组合 | 框架路由／页面目录 |
| 主题令牌 | 全局样式表变量 |
执行步骤
- 读取
components.json，将components和ui别名解析为目录。 - 搜索已安装的基础组件，再创建自定义标记。
- 使用上表判定归属和复用范围。
- 放置组件；边缘情况请参阅 references/placement-examples.md。
- 确认没有产品自有文件放入
ui，也没有引入反向导入。
输出约定
说明每个创建或移动的组件的归属分类和最终路径，并确认依赖方向正确。
参考资料
- references/placement-examples.md — 放置决策示例。
评论
支持 Markdown