From shinpr-claude-code-workflows
Creates frontend work plans from design documents, generates test skeletons, and obtains plan approval via sub-agent orchestration.
How this skill is triggered — by the user, by Claude, or both
Slash command
/shinpr-claude-code-workflows: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-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.])"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.
npx claudepluginhub shinpr/claude-code-workflowsCreates a work plan from a design document, generates test skeletons, and obtains plan approval via sub-agent orchestration.
Creates structured implementation plans for multi-step tasks from specs or requirements. Generates plan.json and task markdown files with explicit code and testing steps.