---
name: fe-feature-tdd
description: 前端功能循环第 3 步。按 plan 逐任务做 TDD（失败测试 → 实现 → 通过 → commit），组件测试用 jsdom，E2E 派子会话跑 Playwright。
user-invocable: false
allowed-tools: Read Write Edit Agent Skill Bash(git add *) Bash(git commit *)
---

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

# fe-feature-tdd

按 plan 文件逐任务做 TDD：写失败测试 → 写最小实现 → 确认通过 → commit。**所有测试运行强制派发到 Agent 子会话**，主会话只接收 JSON 结果。

## 路径护栏（前端阶段）

- 任务的 `impl_file` 路径若**不以** `frontend/`（或项目实际前端根目录，从 `docs/09-项目目录结构.md § 前端目录结构` 取）开头 → 硬停并打印：`fe-feature-tdd 不允许写非前端文件：<impl_file>。前端阶段任务的 impl_file 必须落在前端目录下。`
- 命中 `backend/` / `sql/` / `scripts/` → 同上硬停
- 不允许在主会话直接 `pnpm playwright` / `pnpm test` / `pnpm e2e`，必须派发子会话

## 执行步骤

1. 加载计划文件 `docs/superpowers/plans/<YYYY-MM-DD>-<fe_id>.md`。

2. 从 `docs/04-技术规范.md § 零 frontend` 取测试栈：
   - `frontend.unit_test_runner`：vitest / jest（默认 vitest）
   - `frontend.e2e_runner`：playwright（默认 playwright）
   - `frontend.test_command` / `frontend.e2e_command`：执行命令（缺失则用 `pnpm test:ci` / `pnpm e2e:ci`）

3. 按顺序处理每个任务：

   a. 在 `test_file::test_name` 处写**失败**测试：
      - `测试先行类型 = jsdom`：在 jsdom 环境下用 vitest/jest 写组件单测（render + 断言 DOM / 交互后状态变化）
      - `测试先行类型 = e2e`：在 `frontend/e2e/` 写 Playwright 测试（headless）

   b. 派发 Agent 子会话（general-purpose）运行该测试，子会话只返回 `{command, exit_code, failing_assertion}` JSON，确认失败。

   c. 在 `impl_file` 处写**最小**实现使测试通过。**严格遵守**：
      - 路径必须以 `frontend/`（或 docs/09 声明的前端根）开头（违反 → 硬停，见护栏）
      - 色值用 `var(--color-*)`（来自 spec § 六），不硬编码 hex
      - 业务校验按 spec § 五 在 form-level 复刻

   d. 再次派发子会话确认通过。

   e. 同一测试 >10 次修复仍失败 → 调用 `Skill(interrupt-check)`（中断 #1：测试反复失败）。

   f. 按 `${CLAUDE_SKILL_DIR}/templates/commit-message-template.md` 格式 commit：
      - `scope` = 任务模块（如组件名 `dashboard` / `user-form`）
      - `subject` ≤ 50 字符
      - 必含 trailer `REQ_ID: <fe_id>`（如 `REQ_ID: FE-01`）

4. 全部任务完成 → 调用 `Skill(fe-feature-verify)`。

## 护栏

- **绝不**在主会话直接跑 `pnpm test` / `pnpm e2e` / `pnpm playwright`，必须通过子会话
- **绝不**在 `impl_file` 中写非 `frontend/` 路径（路径护栏会硬停）
- 每次 commit 必须含 `REQ_ID: FE-NN` trailer；不混合无关改动到同一 commit
- 不硬编码颜色 hex；token 引用必须对齐 spec § 六

## 参考

- `${CLAUDE_SKILL_DIR}/templates/commit-message-template.md`
- 守门：`interrupt-check`（仅在步骤 3.e 触发，条件 1）
- 上游：`fe-feature-plan`
- 下游：`fe-feature-verify`