---
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`。

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

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

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

5. 输出 `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`