---
name: frontend-start
description: 前端阶段循环入口。AI 自主推导 FE 业务功能清单写入 docs/08 § 三（已有则加载），定位未完成 FE 派发 fe-feature-brainstorm 或 test-gate（前端阶段）。幂等可重入。
user-invocable: false
allowed-tools: Read Write Edit Skill Glob Grep AskUserQuestion Bash(git branch *) Bash(git checkout *) Bash(git rev-parse *) Bash(git status *) Bash(git symbolic-ref *) Bash(git tag *) Bash(find *) Bash(ls *)
---

**所有输出必须使用中文。**

# frontend-start

## 执行步骤

### 步骤 1：检查 prototype

项目根 `prototype/` 至少含 1 个 `*.html` → 通过，进入步骤 2；缺失 → 用 `AskUserQuestion` 让用户补齐 prototype 后重跑入口，停止。

### 步骤 2：准备 FE 清单

读 docs/08 § 三 "功能:" 项：

- 已有 `- [ ] FE-NN ...` 或 `- [x] FE-NN ...` 行 → **加载**：逐行解析得 `fe_list[]`，每项 `{ fe_id, name, status, associated_reqs[], associated_prototypes[] }`。行格式不符 → 硬停打印问题行
- 仅有 HTML 注释占位（无 FE bullet）→ **推导**：
  1. 读 `prototype/**/*.html` + `docs/01-需求清单/**/*.md` + `docs/05-API接口契约.md`
  2. 以**业务功能**为单位拆分（同流程多屏可合 1 FE；一 HTML 多功能可拆多 FE；无 UI 的 REQ 不产生 FE）。每个 FE：`{ fe_id: FE-NN, name, associated_reqs[], associated_prototypes[] }`，prototype 路径可带 anchor 区分文件内多区域
  3. **写入 § 三 "功能:" 项**（替换占位 HTML 注释），行格式：

     ```
     - [ ] FE-NN 功能名 ｜ 关联 REQ：REQ-A, REQ-B ｜ 关联原型：prototype/<file>.html
     ```

     保留 `- 整体里程碑: —` 不动；写入后解析得 `fe_list[]`，继续步骤 3

### 步骤 3：检查前端里程碑状态

读 § 三 `整体里程碑:` 字段并 `git tag -l 'milestone/frontend-phase'` 校验：

- 字段为 `milestone/frontend-phase` 且 tag 存在 → 打印"前端阶段已完成"并停（冗余保护，正常由 coding-start 拦掉）
- 否则（`—` 或 tag 不存在）→ 进入步骤 4

### 步骤 4：切到 frontend-phase 分支

目标分支 `frontend-phase`，分支管理逻辑同 module-start 步骤 3：已在 → 继续；存在 → checkout；不存在 → 切本地默认分支后 `git checkout -b frontend-phase`。任何错误硬停 + 诊断，不自动 stash / 覆盖。

### 步骤 5：识别已完成的 FE

扫 `docs/superpowers/reviews/<日期>-FE-*.md`，`verdict: approve` 的收入 `done_fes[]`。每次进入重新计算，不缓存。

### 步骤 6：报告进度

按 `${CLAUDE_SKILL_DIR}/templates/frontend-start-banner-template.md` 渲染：当前分支 + prototype HTML 数 + FE 进度（done / total）+ 下一 FE。

### 步骤 7：进入下一环节

- 存在未完成 FE → **同一 turn 内立即** `Skill(fe-feature-brainstorm)`，参数 `{ fe_id, name, associated_reqs[], associated_prototypes[] }`（**不要**先输出"已完成 / 接下来 / 请检查 / 等你确认"之类桥接叙述——会被解读为 turn 结束信号、害用户手敲 continue）
- 全 FE 完成 → **同一 turn 内立即** `Skill(test-gate)` 带 `phase=frontend`（**不要**先输出"已完成 / 接下来 / 请检查 / 等你确认"之类桥接叙述——会被解读为 turn 结束信号、害用户手敲 continue）

## 参考

- `${CLAUDE_SKILL_DIR}/templates/frontend-start-banner-template.md`
- `docs/08-模块任务管理.md § 三`（前端阶段元数据：整体里程碑 + FE 清单）
- `prototype/`（HTML mockup，FE 拆分粒度与文件数无关）
- `docs/superpowers/reviews/*-FE-*.md`（verdict=approve 即完成）
- 上游：`coding-start`（步骤 4 派发，仅当后端完成 + 前端未完成）；`fe-feature-review` approve 后回调
- 下游：`fe-feature-brainstorm`（每 FE）/ `test-gate`（phase=frontend，全完成时）
- 前置门禁：本 skill 步骤 1 自承（coding-start 不做）