| name | dev-flow-doc-fe |
| description | 按 PRD/需求文档实现前端功能（后端接口已就绪或由他人开发）。从需求澄清到上线复盘全流程，
覆盖契约对齐、项目勘察、方案评审、切片验证、并行铺开、QA、上线、复盘 10 个阶段，
带 4 个强制人工卡点。
Use when PRD/需求文档 is provided and only frontend changes are needed.
Voice triggers: "需求文档 前端", "PRD 前端", "接前端需求".
|
dev-flow-doc-fe
适用场景
- 已有 PRD / 飞书文档 / Notion 文档，业务规则基本明确
- 后端接口已存在（或由别人并行开发）
- 本次任务只改前端代码
前置条件
确认 _playbook.md Part B.3 启动参数（feature_name、target_project、prd_path 必填）；如缺失，用 AskQuestion 补齐。
通常由父 skill /dev-flow 通过 dispatch-context.json 传入。
流程步骤
阶段 0 · 上下文初始化
move_agent_to_root 进前端项目- 创建
~/Projects/_requirements/[feature]/，写 META.md（模板见 _playbook.md Part E.1）
- 加载
_lessons.md 背景
- 复制/链接 PRD 到
PRD.md
阶段 1 · 需求澄清（SwitchMode → plan）
- 通读 PRD，用
/office-hours 的 6 问视角挑战（模糊规则 / 边界 / 错误 / 权限 / 并发 / 空状态）
- 输出
questions-for-pm.md（模板见 _playbook.md Part E.2）
- 卡点 1（_playbook.md Part B.2）：
prompt: "需求文档/澄清已生成，请看 questions-for-pm.md。请选择："
options:
- "已和 PM 沟通，提供答复（粘贴在下条消息）"
- "需求清楚无疑问，进入下一阶段"
- "需要重新探索原型/项目某些细节"
收到答复后追加到 pm-answers.md，循环到无疑问。
阶段 2 · 契约对齐
- 与后端 owner 对齐
API_CONTRACT.md（字段、错误码、分页、幂等、鉴权）
- PRD 没写的一律落纸，
AskQuestion 让用户/后端 owner 确认关键字段
阶段 3 · 项目勘察（并行 2 个 explore subagent）
- Task A：前端骨架（技术栈、目录结构、构建、路由、状态管理、UI 库）→ 写入
PROJECT_CONVENTIONS.md
- Task B：类似功能复用审计 → 写入
REUSE_AUDIT.md（模板见 _playbook.md Part E.6）
阶段 4 · 方案设计（Plan 模式）
git checkout -b feature/[feature]- 输出
IMPLEMENTATION_PLAN.md（模板见 _playbook.md Part E.5）：页面拆分、组件树、状态、路由、API 层
/plan-eng-review 评审- 卡点 2：
prompt: "方案设计完成。核心改动：[一句话摘要]。请选择："
options:
- "方案通过，进入切片验证"
- "需要修改方案（请提供修改意见）"
- "需要重新做复用审计"
阶段 5 · 垂直切片（SwitchMode → agent）
- 挑选代表性页面（通常"列表"或"详情"）
- 1 页面 + 1 接口对接 + 1 组件测试
- 原子 commit：
feat(scope): 实现垂直切片验证
- 卡点 3：
prompt: "垂直切片完成并通过验证。切片范围：[一句话]。请选择："
options:
- "切片 OK，水平铺开剩余功能"
- "切片暴露问题，回方案设计阶段"
- "需要先做更多切片验证（说明哪些）"
阶段 6 · 水平铺开（并行 Task）
frontend-agent：实现剩余页面test-agent：交互 / 表单 / 路由测试- 每块完成立即原子 commit（
feat(scope): 中文描述）
阶段 7 · 自查
/qa（必做）/review（必做）/design-review（若有 UI 改动必做，修饰符 M1/M2 下更严格）- 汇总
self-check-report.md
阶段 8 · PM 验收
- 整理
demo-package.md（截图 + GIF + 与预期对比）
- 卡点 4：
prompt: "demo 材料已准备好（docs/demo-package.md）。PM 验收结果："
options:
- "PM 通过，进入上线"
- "PM 提出小修改（说明）"
- "PM 不认可，需要回开发阶段"
阶段 9 · 上线
/ship → /land-and-deploy → /canary
阶段 10 · 复盘
- append
_lessons.md（模板见 _playbook.md Part E.8）
- 更新
META.md（完成时间、实际耗时、PR 链接）
错误处理
- 切片暴露契约不匹配 → 回阶段 2 重新对齐
API_CONTRACT.md
- UI 反复返工 3 次 → 叠加 M1 或 M2（引入
/plan-design-review 或 /design-shotgun）
- 后端接口迟迟不 ready → 暂停，报告阻塞，建议启用 mock 层继续切片验证
/qa 暴露严重问题 → 回阶段 6 修复后再跑
产物清单
META.md、PRD.md、questions-for-pm.md、pm-answers.md、API_CONTRACT.md、PROJECT_CONVENTIONS.md、REUSE_AUDIT.md、IMPLEMENTATION_PLAN.md、self-check-report.md、demo-package.md、PR 链接。
支持的修饰符
- M1 带设计稿 → 阶段 1 后插入
/plan-design-review，阶段 4 固化 DESIGN_TOKENS.md，阶段 7 必做 /design-review
- M2 无设计稿 UI → 新项目阶段 0 加
/design-consultation；已有项目阶段 4 后加 /design-shotgun
- M3 新旧项目 → 新项目阶段 0 前
create_project + move_agent_to_root；已有项目严格走阶段 3 复用审计
- M5 只联调 → 阶段 1 改为契约一致性挑战，输出
CONTRACT_DIFF.md；阶段 6 派 dev-agent 实现适配 + test-agent 写契约测试
详细 delta 见 _playbook.md Part D。
与其他 skill 的关系
- 通常被
/dev-flow 路由到（也可被用户直接触发）
- 编码阶段派发
frontend-agent、test-agent
- 阶段 7 调用
/qa、/review、/design-review
- 阶段 9 调用
/ship、/land-and-deploy、/canary
附录
