---

name: fe-feature-brainstorm description: 前端功能循环第 1 步。针对单个 FE-NN 页面（prototype/*.html）做交互式头脑风暴，产出前端功能规格到 docs/superpowers/specs/。 user-invocable: false

allowed-tools: Read Write Skill Glob Grep

所有输出必须使用中文。

fe-feature-brainstorm

阶段范围（前端）

本 skill 服务于前端阶段。产出范围限定为：组件树 / 页面状态机 / 交互流程 / API 调用 / Design Tokens 引用 / 业务校验前端复刻。不涉及 SQL / migration / controller / service / DTO（这些已在后端阶段完成）。

一个 FE 是业务功能粒度，可能关联多个 prototype 文件区域和多个 REQ。

执行步骤

1. 确定本次 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），决定组件选型

2. 委托 superpowers:brainstorming，把上述上下文 + 落盘路径 docs/superpowers/specs/<YYYY-MM-DD>-<fe_id>.md 作为 caller-provided path 传入。caller-provided 上下文显式标注：

本次为前端阶段头脑风暴。关注组件树、页面状态机、交互流程、API 调用一致性、Design Tokens 引用、业务校验前端复刻。不要讨论 SQL / migration / controller / service / DTO。本 FE 关联的 REQ 与原型清单见上下文中 associated_reqs / associated_prototypes。

文件已存在 → 征求用户确认后覆盖。

1. 按 ${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-*) 名称）

2. 验证：所有顶级节非空；全文不得出现 TBD、@todo、controller、SQL、service、migration 字样——前者代表 spec 未完成，后五者属于后端范畴不应出现。命中 → 修正后重渲染。

3. 输出 fe-feature-brainstorm: <fe_id> → <path>，立即调用 Skill(fe-feature-plan)。

参考

• ${CLAUDE_SKILL_DIR}/templates/fe-feature-spec-template.md
• 委托：superpowers:brainstorming（本插件 skills/internal/superpower-brainstorming/）
• 上游：frontend-start（每个未完成 FE 派发到此）
• 下游：fe-feature-plan