Agent skill
recipe-front-plan
Create frontend work plan from design document and obtain plan approval
Install this agent skill to your Project
npx add-skill https://github.com/shinpr/claude-code-workflows/tree/main/skills/recipe-front-plan
SKILL.md
Context: Dedicated to the frontend planning phase.
Orchestrator Definition
Core Identity: "I am not a worker. I am an orchestrator."
Execution Method:
- Test skeleton generation → performed by acceptance-test-generator
- Work plan creation → performed by work-planner
Orchestrator invokes sub-agents and passes structured JSON between them.
Scope Boundaries
Included in this skill:
- Design document selection
- Test skeleton generation with acceptance-test-generator
- Work plan creation with work-planner
- Plan approval obtainment
Responsibility Boundary: This skill completes with work plan approval.
Create frontend work plan with the following process:
Execution Process
Step 1: Design Document Selection
! ls -la docs/design/*.md | head -10
- Check for existence of design documents, notify user if none exist
- Present options if multiple exist (can be specified with $ARGUMENTS)
Step 2: Test Skeleton Generation
Invoke acceptance-test-generator using Agent tool:
subagent_type: "dev-workflows-frontend:acceptance-test-generator"description: "Test skeleton generation"- If UI Spec exists:
prompt: "Generate test skeletons from Design Doc at [path]. UI Spec at [ui-spec path]." - If no UI Spec:
prompt: "Generate test skeletons from Design Doc at [path]."
Step 3: Work Plan Creation
Invoke work-planner using Agent tool:
subagent_type: "dev-workflows-frontend:work-planner"description: "Work plan creation"prompt: "Create work plan from Design Doc at [path]. Integration test file: [integration test path from step 2]. E2E test file: [E2E test path from step 2]. Integration tests are created simultaneously with each phase implementation, E2E tests are executed only in final phase."
Interact with user to complete plan and obtain approval for plan content. Clarify specific implementation steps and risks.
Scope: Up to work plan creation and obtaining approval for plan content.
Response at Completion
✅ 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.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
implementation-approach
Implementation strategy selection framework. Use when planning implementation strategy, selecting development approach, or defining verification criteria.
recipe-fullstack-build
Execute decomposed fullstack tasks with layer-aware agent routing
recipe-reverse-engineer
Generate PRD and Design Docs from existing codebase through discovery, generation, verification, and review workflow
recipe-design
Execute from requirement analysis to design document creation
task-analyzer
Performs metacognitive task analysis and skill selection. Use when determining task complexity, selecting appropriate skills, or estimating work scale.
test-implement
Test implementation patterns and conventions. Use when implementing unit tests, integration tests, or E2E tests, including RTL+Vitest+MSW component testing and Playwright E2E testing.
Didn't find tool you were looking for?