Creates a frontend work plan from a design document by generating test skeletons and obtaining plan approval. Useful for structured frontend planning with sub-agent orchestration.
How this skill is triggered — by the user, by Claude, or both
Slash command
/dev-workflows-fullstack:recipe-front-planThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Execute Skill: llm-friendly-context before writing Agent prompts, handoffs, or generated artifacts.
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; if the same blocking finding repeats without new evidence or a contract change, stop and escalate it. 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.
npx claudepluginhub shinpr/claude-code-workflows --plugin dev-workflows-fullstackCreates frontend work plans from design documents by orchestrating sub-agents for test skeleton generation, work plan creation, review, and approval.
Creates a work plan from a design document by generating test skeletons, invoking work-planner, reviewing with document-reviewer, and obtaining plan approval.
Creates, edits, and verifies skills using a test-driven development approach with pressure scenarios and subagents.