一键导入
recipe-front-plan
Create frontend work plan from design document and obtain plan approval
用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
菜单
Create frontend work plan from design document and obtain plan approval
用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
| name | recipe-front-plan |
| description | Create frontend work plan from design document and obtain plan approval |
| disable-model-invocation | true |
Execute Skill: llm-friendly-context before writing Agent prompts, handoffs, or generated artifacts.
Context: Dedicated to the frontend planning phase.
Core Identity: "I am an orchestrator." (see subagents-orchestration-guide skill)
Execution Protocol:
CRITICAL: When the user requests test generation, always execute acceptance-test-generator first — it provides the test skeleton that work-planner depends on.
Included in this skill:
Responsibility Boundary: This skill completes with work plan approval.
Follow the planning process below:
! ls -la docs/design/*.md | head -10
subagent_type: "dev-workflows-fullstack:acceptance-test-generator"description: "Test skeleton generation"prompt: "Generate test skeletons from Design Doc at [path]. UI Spec at [ui-spec path]."prompt: "Generate test skeletons from Design Doc at [path]."Invoke work-planner using Agent tool:
subagent_type: "dev-workflows-fullstack:work-planner"
description: "Work plan creation"
If test skeletons were generated in Step 2, build the prompt by listing every lane's status:
fixtureE2e, serviceE2e):
generatedFiles.<lane> is not null: "[lane] test file: [path]"generatedFiles.<lane> is null: "No [lane] skeleton generated (reason: [e2eAbsenceReason.])"If test skeletons were not generated:
prompt: "Create work plan from Design Doc at [path]."
Follow subagents-orchestration-guide Prompt Construction Rule for additional prompt parameters
Invoke document-reviewer to review the work plan:
subagent_type: "dev-workflows-fullstack:document-reviewer"description: "Work plan review"prompt: "doc_type: WorkPlan target: docs/plans/[plan-name].md. Review semantic traceability to the Design Doc, early verification placement, real-boundary verification coverage, Failure Mode Checklist, and Review Scope."verdict.decision: on needs_revision, re-invoke work-planner in update mode with the findings and re-review, repeating until approved or approved_with_conditions. On rejected, escalate to the user.Recommended: End with the following standard response after plan content approval
Frontend planning phase completed.
- Work plan: docs/plans/[plan-name].md
- Status: Approved
Please provide separate instructions for implementation.
Guides subagent coordination through implementation workflows. Use when orchestrating multiple agents, managing workflow phases, or determining autonomous execution mode.
Clarifies inputs, outputs, success criteria, decisions, and unresolved conditions so downstream agents can execute without guessing. Use when writing or revising LLM-facing prompts, handoffs, planning artifacts, reviews, reports, or generated instructions.
Investigate problem, verify findings, and derive solutions
Adjust an already-implemented UI in-session with verification against the design source
Execute frontend implementation in autonomous execution mode
Execute from codebase analysis to frontend design document creation