---
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. **再自决**：查不到 → 按"自主决策优先级"自行选定值，在 spec 中以 `自动选用 X（来源: <docs/06 Token / Ant Design 默认 / prototype 复刻 / ...>）` 注明
3. **最后才问**：上述两步均无合理推荐项时（如组件库未定型、跨页面交互重大歧义） → 才 `AskUserQuestion`
4. **绝不**留 `【人工填写：】` 占位符

**自主决策优先级**（由高到低）：
1. `docs/06-UI交互规范.md` Design Tokens / `docs/04-技术规范.md § 一前端架构` 明文规定
2. 关联 prototype 中已落地的视觉/交互模式（保持复刻）
3. 项目所选 UI 库（如 Ant Design / Element Plus）的官方默认与最佳实践
4. 最简、最少依赖、最易回滚的实现

## 执行步骤

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（后端阶段已定）
   - **默认自动决策**：按"自主决策优先级"自行选定 approach，trade-off 内嵌 spec 并注明来源，**不弹问**
   - **仅在真硬阻塞时** `AskUserQuestion`：四级优先级都给不出合理推荐 + 决策影响重大（组件库未定型、跨页面状态同步选型、可访问性硬约束） → 一次一问、多选题优先
   - **不设确认 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 原则

- **自主决策优先** — 默认按规范/惯例自行选推荐项写入 spec，不弹问；只有"真硬阻塞"才问
- **真硬阻塞 = 四级优先级都给不出合理推荐 + 决策影响重大**（组件库选型 / 跨页面状态同步 / 可访问性硬约束 / 不可逆 UX 选型）
- **一次一问** — 真要问就不堆问题
- **多选题优先 + 标记推荐项** — 选项里把推荐项放第一并标注 `(Recommended)`
- **YAGNI** — 删不必要的功能
- **无审批 gate** — 写 spec 即 commit

## 参考

- `${CLAUDE_SKILL_DIR}/templates/fe-feature-spec-template.md`
- 上游：`frontend-start`（每个未完成 FE 派发到此）
- 下游：`fe-feature-plan`