skills/recipe-front-plan/SKILL.md
Create frontend work plan from design document and obtain plan approval
npx skillsauth add shinpr/claude-code-workflows recipe-front-planInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
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-frontend: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-frontend: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.<lane>])"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-frontend: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.
documentation
Guides subagent coordination through implementation workflows. Use when orchestrating multiple agents, managing workflow phases, or determining autonomous execution mode.
development
Verifies the work plan is implementable end-to-end and resolves verification-lane / fixture / E2E-environment gaps before the build phase begins. Use when "implement-ready/verification readiness/lane setup/E2E environment missing" is mentioned, or before any build phase begins on a work plan whose readiness has not been preflight-checked.
testing
Create work plan from design document and obtain plan approval
testing
Orchestrate the complete implementation lifecycle from requirements to deployment