name: fe-feature-brainstorm description: 前端功能循环第 1 步。针对单个 FE-NN 页面(prototype/*.html)做交互式 Q&A + 写前端规格,产出到 docs/superpowers/specs/,链入 fe-feature-plan。 user-invocable: false
allowed-tools: Read Write Skill AskUserQuestion Glob Grep
所有输出必须使用中文。
fe-feature-brainstorm
阶段范围(前端)
本 skill 服务于前端阶段。产出范围限定为:组件树 / 页面状态机 / 交互流程 / API 调用 / Design Tokens 引用 / 业务校验前端复刻。不涉及 SQL / migration / controller / service / DTO(这些已在后端阶段完成)。
一个 FE 是业务功能粒度,可能关联多个 prototype 文件区域和多个 REQ。
占位符规则
本 skill 写的 spec 是 CC 内部推理产物,不是用户审阅文档。不允许 【人工填写:...】 占位符——A 阶段标记。需要具体值时:
-
先查
.env.local/docs/07-环境配置.md/docs/04-技术规范.md/docs/06-UI交互规范.md/CLAUDE.md/ 现有代码 / 关联 prototype。值已落地某处 → 在 spec 中引用源 -
再问:查不到 →
AskUserQuestion问用户,记录答案到 spec -
绝不留
【人工填写:】占位符
执行步骤
-
收集上下文:确定本次 FE(由
frontend-start派发时传入{ fe_id, name, associated_reqs[], associated_prototypes[] }),读取证据:-
页面骨架:Read 所有
associated_prototypes[](如prototype/dashboard.html+prototype/dashboard.html#metrics-section;含 anchor 时聚焦相应区域),作为本 FE 涉及页面的布局权威 -
业务规则:Read 所有
associated_reqs[]对应的docs/01-需求清单/<module>/<REQ-id>.md,提取业务校验规则、acceptance、UI 描述 -
API 契约:Read
docs/05-API接口契约.md,按associated_reqs[]过滤出本 FE 消费的端点 -
Design Tokens:Read
docs/06-UI交互规范.md § 二,作为色值/状态色的引用源 -
前端组件库:Read
docs/04-技术规范.md § 零找frontend.ui_lib(如 Ant Design / Element Plus),决定组件选型
-
页面骨架:Read 所有
-
交互式 Q&A(参考下方"Q&A 原则",本次为前端阶段头脑风暴):
- 关注:组件树、页面状态机、交互流程、API 调用一致性、Design Tokens 引用、业务校验前端复刻
- 不要讨论 SQL / migration / controller / service / DTO(后端阶段已定)
-
一次一问
AskUserQuestion,仅对真模糊点;多选题优先 - trade-off 直接内嵌 spec,不设确认 gate
-
写 spec 到
docs/superpowers/specs/<YYYY-MM-DD>-<fe_id>.md:- 按
${CLAUDE_SKILL_DIR}/templates/fe-feature-spec-template.md渲染 - 规格至少含:
- 关联 REQ + 关联原型(来自 frontend-start 派发的入参)
- 组件树(多个 prototype 文件 / 区域则按页面分块;推导自 prototype DOM)
- 页面状态机(loading / empty / error / 正常 / 表单提交中 至少 5 态;多页则按页列出)
- 消费的后端端点(与 docs/05 对齐,按本 FE 的
associated_reqs[]过滤) - 业务规则前端复刻清单(逐条,每条标注:规则描述 / 触发时机 / 报错文案 / 来源 REQ)
- Design Tokens 引用清单(本 FE 用到的
var(--color-*)名称)
- 文件已存在 → 征求用户确认后覆盖
- 按
-
Spec 自审(inline 修,无须用户等待):
- 所有顶级节非空
-
全文不得出现
TBD/@todo/controller/SQL/service/migration字样——前者代表 spec 未完成,后五者属于后端范畴不应出现。命中 → 修正后重渲染 - 内部一致性 / 范围检查 / 歧义检查(按 Q&A 原则)
-
输出 + 链 fe-feature-plan(直接做这两件事,不要输出"回交父 skill / 交给 caller / 等下一步 / 准备好了请检查"之类的桥接叙述——那些会被解读为 turn 结束信号):
- 输出一行
fe-feature-brainstorm: <fe_id> → <path> -
同一 turn 内立即
Skill(fe-feature-plan)
- 输出一行
Q&A 原则
- 一次一问 — 不堆问题
- 多选题优先 — 答更快
- 仅对真模糊点问 — 不造确认问题
- YAGNI — 删不必要的功能
- 渐进理解 — 不明白就问
- 无审批 gate — 写 spec 即 commit
参考
${CLAUDE_SKILL_DIR}/templates/fe-feature-spec-template.md- 上游:
frontend-start(每个未完成 FE 派发到此) - 下游:
fe-feature-plan