---
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 阶段标记。需要具体值时：

1. **先查** `.env.local` / `docs/07-环境配置.md` / `docs/04-技术规范.md` / `docs/06-UI交互规范.md` / `CLAUDE.md` / 现有代码 / 关联 prototype。值已落地某处 → 在 spec 中引用源
2. **再问**：查不到 → `AskUserQuestion` 问用户，记录答案到 spec
3. **绝不**留 `【人工填写：】` 占位符

## 执行步骤

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. **交互式 Q&A**（参考下方"Q&A 原则"，本次为**前端阶段**头脑风暴）：
   - 关注：组件树、页面状态机、交互流程、API 调用一致性、Design Tokens 引用、业务校验前端复刻
   - **不要**讨论 SQL / migration / controller / service / DTO（后端阶段已定）
   - **一次一问** `AskUserQuestion`，仅对真模糊点；多选题优先
   - trade-off 直接内嵌 spec，**不设确认 gate**

3. **写 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-*)` 名称）
   - 文件已存在 → 征求用户确认后覆盖

4. **Spec 自审**（inline 修，无须用户等待）：
   - 所有顶级节非空
   - **全文不得出现** `TBD` / `@todo` / `controller` / `SQL` / `service` / `migration` 字样——前者代表 spec 未完成，后五者属于后端范畴不应出现。命中 → 修正后重渲染
   - **内部一致性** / **范围检查** / **歧义检查**（按 Q&A 原则）

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