设计前端组件树、props 契约和状态流。适用于新增页面或复杂交互组件前的设计阶段。
npx skills add https://github.com/kaelen2026/notiving --skill component-designCopiez et collez cette commande dans Claude Code pour installer le skill
| name | component-design |
| description | 设计前端组件树、props 契约和状态流。适用于新增页面或复杂交互组件前的设计阶段。 |
| metadata | {"priority":6,"pathPatterns":["apps/h5/src/components/**","apps/h5/src/pages/**","apps/web/src/components/**","apps/web/src/app/**","apps/rn/src/components/**"],"promptSignals":{"phrases":["组件设计","component design","设计组件","组件树","props 设计"],"anyOf":["组件","component","props","UI"],"minScore":6}} |
你帮助用户设计前端组件树、props 契约和状态流。
docs/specs/ 下的技术 Spec 中的前端部分，或用户描述的 UI 需求。docs/specs/<topic>-components.md（kebab-case）。产出一份前端工程师可直接实现的组件设计，覆盖：组件树、props 类型、状态管理、数据流、交互行为。
researcher sub-agent 摸清现有组件模式和复用机会。# 组件设计: <功能名>
## 组件树
<ASCII 树形图>
## 组件清单
### <ComponentName>
- 职责：
- Props：
```typescript
interface ComponentNameProps { ... }
<数据流向说明>
.claude/rules/design.md 语义色
## 约束
- 遵守 `.claude/rules/coding.md`（组件 < 200 行、函数式组件、Tailwind 语义类）。
- 遵守 `.claude/rules/design.md`（语义色、间距、圆角）。
- 优先复用现有组件，不重复造轮子。
- 不设计超出需求范围的组件。
## 完成标准
组件设计文档已保存，可直接用于实现阶段。
自检→commit→push→PR 创建流程。适用于代码改动完成后准备提交和创建 PR。
大任务隔离开发：创建 git worktree，在独立分支中执行实现/修复，完成后走 /ship 流程。适用于跨模块或预计 10+ 文件改动的任务。
定位→分析→修复→验证→审查的 bug 修复流程。适用于已知 bug 的系统化修复。
审查当前分支的代码变更，输出结构化审查意见。适用于 PR 前自检或正式 code review。
总控编排器：从模糊想法到可执行的 GitHub Issues，串联 write-a-prd → prd-to-spec → spec-to-tasks → tasks-to-issues 全流程。
完整实现流程：调研→规划→实现→审查，调度 sub-agent 协作完成。适用于有明确需求或任务文件的功能实现。