---

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[] }（关联 REQ：— 解析为空数组——FE-00 应用壳即此情形）。行格式不符 → 硬停打印问题行 [ERP-HALT]

• 仅有 HTML 注释占位（无 FE bullet）→ 推导：

  1. 读 prototype/**/*.html + docs/01-需求清单/**/*.md + docs/05-API接口契约.md + docs/06-UI交互规范.md § 三 页面清单（downstream-gen 产出，含每页 route / 入口菜单，是导航与路由的权威）
  2. 先产基础设施 FE（必产，置于清单最前）：无论 prototype 是否单列布局区域，都生成一条 FE-00——它是「主界面」可用性的载体，不依赖任何 REQ，故关联 REQ 填 —：

   - [ ] FE-00 应用壳·导航·首页 ｜ 关联 REQ：— ｜ 关联原型：<prototype 中的布局/导航区域，无独立区域则填 prototype 全集>
  

  它负责：全局布局壳（header + 侧/顶导航菜单）、把 docs/06 § 三 每个业务页面接入的统一路由表（点菜单真实跳转）、首页/仪表盘落地页（模块入口卡片 + 调真实后端端点的关键指标）。

  1. 再以业务功能为单位拆分业务 FE（同流程多屏可合 1 FE；一 HTML 多功能可拆多 FE；无 UI 的 REQ 不产生 FE），从 FE-01 起编号。每个 FE：{ fe_id: FE-NN, name, associated_reqs[], associated_prototypes[] }，prototype 路径可带 anchor 区分文件内多区域
  2. 写入 § 三 "功能:" 项（替换占位 HTML 注释），FE-00 在最前、业务 FE 随后，行格式：

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

  （FE-00 的「关联 REQ」为 —）保留 - 整体里程碑: — 不动；写入后解析得 fe_list[]，继续步骤 3

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

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

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

步骤 4：切到 frontend-phase 分支

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

步骤 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 不做）