Web 前端 工程工作流六件套
> 基于 Vue / React / Vite / webpack / DevTools / Playwright / msw，覆盖需求对齐到发布前评审的完整工程工作流。
核心能力总览
┌─────────────────────────────────────────────────┐
│ web-dev-workflows │
├─────────────────────────────────────────────────┤
│ 00 需求拷问 ─ 烤问式对话，设计树分支收敛 │
│ 01 Spec 固化 ─ 把对话综合成 docs/specs 文档 │
│ 02 Web TDD ─ 红绿循环 + Web 前端 接缝表 │
│ 03 Bug 诊断 ─ 六阶段纪律，先建会变红的反馈回路 │
│ 04 双轴代码评审 ─ 规范轴 + Spec 轴独立报告 │
│ 05 架构体检 ─ 扫描加深机会，输出 HTML 报告 │
└─────────────────────────────────────────────────┘
快速路由
| 用户需求 | 参考模块 |
|---|---|
| 需求边界不清 / 帮我理需求 | 00 需求拷问 → references/00-requirement-grilling.md |
| 把讨论整理成 spec 文档 | 01 Spec 固化 → references/01-to-spec.md |
| 先写测试再开发 / 红绿重构 | 02 Web TDD（Vitest/Jest） → references/02-tdd.md |
| 排查报错 / 崩溃 / 卡顿 / 异常 | 03 Bug 诊断 → references/03-bug-diagnosing.md |
| 评审分支 / 评审这次改动 | 04 双轴代码评审 → references/04-code-review.md |
| 架构体检 / 看看哪里该重构 | 05 架构体检 → references/05-architecture-review.md |
完整开发工作流
1. 需求拷问 (00) → 设计树每个分支收敛
↓
2. Spec 固化 (01) → 输出 docs/specs/<feature-name>.md
↓
3. Web TDD (02) → 红 → 绿 → 重构循环
↓
4. 双轴代码评审 (04) → 规范轴 + Spec 轴
↓
5. Bug 诊断 (03) → 如遇问题，先建反馈回路
↓
6. 架构体检 (05) → 定期运行，寻找加深机会
核心纪律
- 先收敛再动手 — 设计树前沿为空之前不写代码（见
references/00-requirement-grilling.md） - Spec 只综合不采访 —
references/01-to-spec.md不写新问题，只固化已讨论内容 - 测试只在预先约定的接缝上 — 没有确认的接缝不写测试（见
references/02-tdd.md） - 没有会变红的反馈回路，不准进入假设阶段 — 这是
references/03-bug-diagnosing.md的灵魂 - 双轴独立评审 — 规范轴与 Spec 轴分开报告，不在两轴间选"总冠军"（见
references/04-code-review.md） - 先圈范围再扫描 — 架构体检优先看近期频繁变动的区域，避免地毯式扫描（见
references/05-architecture-review.md）
参考文档
references/00-requirement-grilling.md— 需求拷问（Web 前端 必查维度、轮次格式）references/01-to-spec.md— 对话 → Spec 固化（含 Web 前端 专项决策模板）references/02-tdd.md— Web TDD（Vitest/Jest）（好测试、接缝表、反模式、实操约定）references/03-bug-diagnosing.md— Bug 诊断六阶段（构建反馈回路 → 复现 → 假设 → 插桩 → 修复 → 收尾）references/04-code-review.md— 双轴代码评审（Web 前端 崩溃/质量基线 + Fowler 坏味道基线）references/05-architecture-review.md— 架构体检（Web 前端 典型坏信号、HTML 报告、拷问循环）
