{"id":"69e887e2-0606-407e-8707-8ac6a162fbea","shortId":"aHfKKj","kind":"skill","title":"recipe-front-plan","tagline":"Create frontend work plan from design document and obtain plan approval","description":"**Context**: Dedicated to the frontend planning phase.\n\n## Orchestrator Definition\n\n**Core Identity**: \"I am an orchestrator.\" (see subagents-orchestration-guide skill)\n\n**Execution Protocol**:\n1. **Delegate all work** to sub-agents — your role is to invoke sub-agents, pass data between them, and report results\n2. **Follow subagents-orchestration-guide skill planning flow**:\n   - Execute steps defined below\n   - **Stop and obtain approval** for plan content before completion\n3. **Scope**: See Scope Boundaries below\n\n**CRITICAL**: When the user requests test generation, always execute acceptance-test-generator first — it provides the test skeleton that work-planner depends on.\n\n## Scope Boundaries\n\n**Included in this skill**:\n- Design document selection\n- Test skeleton generation with acceptance-test-generator\n- Work plan creation with work-planner\n- Plan approval obtainment\n\n**Responsibility Boundary**: This skill completes with work plan approval.\n\nFollow the planning process below:\n\n## Execution Process\n\n### Step 1: Design Document Selection\n   ! ls -la docs/design/*.md | head -10\n   - Check for existence of design documents, notify user if none exist\n   - Present options if multiple exist (can be specified with $ARGUMENTS)\n\n### Step 2: Test Skeleton Generation Confirmation\n   - Confirm with user whether to generate test skeletons (integration + fixture-e2e + service-integration-e2e) first\n   - If user wants generation: acceptance-test-generator generates skeletons across all applicable lanes\n     - Invoke acceptance-test-generator using Agent tool:\n       - `subagent_type`: \"dev-workflows-frontend:acceptance-test-generator\"\n       - `description`: \"Test skeleton generation\"\n       - If UI Spec exists: `prompt: \"Generate test skeletons from Design Doc at [path]. UI Spec at [ui-spec path].\"`\n       - If no UI Spec: `prompt: \"Generate test skeletons from Design Doc at [path].\"`\n   - Pass integration test file path, fixture-e2e and service-integration-e2e file paths (or null per lane), and e2eAbsenceReason (per lane) to work-planner according to subagents-orchestration-guide \"acceptance-test-generator → work-planner\" section\n\n### Step 3: Work Plan Creation\nInvoke work-planner using Agent tool:\n- `subagent_type`: \"dev-workflows-frontend:work-planner\"\n- `description`: \"Work plan creation\"\n- If test skeletons were generated in Step 2, build the prompt by listing every lane's status:\n  - Always include: \"Integration test file: [path or 'not generated']\"\n  - For each E2E lane (`fixtureE2e`, `serviceE2e`):\n    - When `generatedFiles.<lane>` is not null: \"[lane] test file: [path]\"\n    - When `generatedFiles.<lane>` is null: \"No [lane] skeleton generated (reason: [e2eAbsenceReason.<lane>])\"\n  - Append placement guidance: \"Integration tests are created simultaneously with each phase implementation. fixture-e2e tests are created alongside the UI feature phase. service-integration-e2e tests are executed only in the final phase.\"\n- If test skeletons were not generated:\n  `prompt`: \"Create work plan from Design Doc at [path].\"\n\n- Follow subagents-orchestration-guide Prompt Construction Rule for additional prompt parameters\n- Present work plan to user for review. If user requests changes, re-invoke work-planner with revised parameters\n- Highlight steps with unclear scope or external dependencies and ask user to confirm\n\n## Response at Completion\n**Recommended**: End with the following standard response after plan content approval\n```\nFrontend planning phase completed.\n- Work plan: docs/plans/[plan-name].md\n- Status: Approved\n\nPlease provide separate instructions for implementation.\n```","tags":["recipe","front","plan","claude","code","workflows","shinpr","agent-skills","agentic-ai","ai-agents","automation","claude-code"],"capabilities":["skill","source-shinpr","skill-recipe-front-plan","topic-agent-skills","topic-agentic-ai","topic-ai-agents","topic-automation","topic-claude-code","topic-claude-code-plugin","topic-code-quality","topic-developer-tools","topic-development-workflow","topic-llm-orchestration","topic-productivity","topic-prompt-engineering"],"categories":["claude-code-workflows"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/shinpr/claude-code-workflows/recipe-front-plan","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add shinpr/claude-code-workflows","source_repo":"https://github.com/shinpr/claude-code-workflows","install_from":"skills.sh"}},"qualityScore":"0.613","qualityRationale":"deterministic score 0.61 from registry signals: · indexed on github topic:agent-skills · 327 github stars · SKILL.md body (3,637 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-02T18:53:52.414Z","embedding":null,"createdAt":"2026-04-18T22:03:10.322Z","updatedAt":"2026-05-02T18:53:52.414Z","lastSeenAt":"2026-05-02T18:53:52.414Z","tsv":"'-10':168 '1':39,159 '2':62,191,355 '3':84,324 'accept':100,129,218,229,242,316 'acceptance-test-gener':99,128,217,228,241,315 'accord':309 'across':223 'addit':458 'agent':46,54,233,333 'alongsid':417 'alway':97,365 'append':399 'applic':225 'approv':15,78,140,150,507,520 'argument':189 'ask':490 'boundari':88,116,143 'build':356 'chang':471 'check':169 'complet':83,146,496,511 'confirm':195,196,493 'construct':455 'content':81,506 'context':16 'core':25 'creat':5,405,416,441 'creation':134,327,347 'critic':90 'data':56 'dedic':17 'defin':73 'definit':24 'deleg':40 'depend':113,488 'descript':245,344 'design':10,121,160,173,258,278,445 'dev':238,338 'dev-workflows-frontend':237,337 'doc':259,279,446 'docs/design':165 'docs/plans':514 'document':11,122,161,174 'e2e':207,211,289,294,376,413,425 'e2eabsencereason':302,398 'end':498 'everi':361 'execut':37,71,98,156,428 'exist':171,179,184,252 'extern':487 'featur':420 'file':285,295,369,387 'final':432 'first':103,212 'fixtur':206,288,412 'fixture-e2e':205,287,411 'fixturee2e':378 'flow':70 'follow':63,151,449,501 'front':3 'frontend':6,20,240,340,508 'generat':96,102,126,131,194,201,216,220,221,231,244,248,254,274,318,352,373,396,439 'generatedfil':381,390 'guid':35,67,314,453 'guidanc':401 'head':167 'highlight':481 'ident':26 'implement':410,526 'includ':117,366 'instruct':524 'integr':204,210,283,293,367,402,424 'invok':51,227,328,474 'la':164 'lane':226,300,304,362,377,385,394 'list':360 'ls':163 'md':166,518 'multipl':183 'name':517 'none':178 'notifi':175 'null':298,384,392 'obtain':13,77,141 'option':181 'orchestr':23,30,34,66,313,452 'paramet':460,480 'pass':55,282 'path':261,268,281,286,296,370,388,448 'per':299,303 'phase':22,409,421,433,510 'placement':400 'plan':4,8,14,21,69,80,133,139,149,153,326,346,443,463,505,509,513,516 'plan-nam':515 'planner':112,138,308,321,331,343,477 'pleas':521 'present':180,461 'process':154,157 'prompt':253,273,358,440,454,459 'protocol':38 'provid':105,522 're':473 're-invok':472 'reason':397 'recip':2 'recipe-front-plan':1 'recommend':497 'report':60 'request':94,470 'respons':142,494,503 'result':61 'review':467 'revis':479 'role':48 'rule':456 'scope':85,87,115,485 'section':322 'see':31,86 'select':123,162 'separ':523 'servic':209,292,423 'service-integration-e2e':208,291,422 'servicee2e':379 'simultan':406 'skeleton':108,125,193,203,222,247,256,276,350,395,436 'skill':36,68,120,145 'skill-recipe-front-plan' 'source-shinpr' 'spec':251,263,267,272 'specifi':187 'standard':502 'status':364,519 'step':72,158,190,323,354,482 'stop':75 'sub':45,53 'sub-ag':44,52 'subag':33,65,235,312,335,451 'subagents-orchestration-guid':32,64,311,450 'test':95,101,107,124,130,192,202,219,230,243,246,255,275,284,317,349,368,386,403,414,426,435 'tool':234,334 'topic-agent-skills' 'topic-agentic-ai' 'topic-ai-agents' 'topic-automation' 'topic-claude-code' 'topic-claude-code-plugin' 'topic-code-quality' 'topic-developer-tools' 'topic-development-workflow' 'topic-llm-orchestration' 'topic-productivity' 'topic-prompt-engineering' 'type':236,336 'ui':250,262,266,271,419 'ui-spec':265 'unclear':484 'use':232,332 'user':93,176,198,214,465,469,491 'want':215 'whether':199 'work':7,42,111,132,137,148,307,320,325,330,342,345,442,462,476,512 'work-plann':110,136,306,319,329,341,475 'workflow':239,339","prices":[{"id":"ba54a510-6443-478b-9edc-cd5a6a4f98fc","listingId":"69e887e2-0606-407e-8707-8ac6a162fbea","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"shinpr","category":"claude-code-workflows","install_from":"skills.sh"},"createdAt":"2026-04-18T22:03:10.322Z"}],"sources":[{"listingId":"69e887e2-0606-407e-8707-8ac6a162fbea","source":"github","sourceId":"shinpr/claude-code-workflows/recipe-front-plan","sourceUrl":"https://github.com/shinpr/claude-code-workflows/tree/main/skills/recipe-front-plan","isPrimary":false,"firstSeenAt":"2026-04-18T22:03:10.322Z","lastSeenAt":"2026-05-02T18:53:52.414Z"}],"details":{"listingId":"69e887e2-0606-407e-8707-8ac6a162fbea","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"shinpr","slug":"recipe-front-plan","github":{"repo":"shinpr/claude-code-workflows","stars":327,"topics":["agent-skills","agentic-ai","ai-agents","automation","claude-code","claude-code-plugin","code-quality","developer-tools","development-workflow","llm-orchestration","productivity","prompt-engineering","skills"],"license":"mit","html_url":"https://github.com/shinpr/claude-code-workflows","pushed_at":"2026-05-02T15:39:17Z","description":"Production-ready development workflows for Claude Code, powered by specialized AI agents.","skill_md_sha":"80d3670dfd395908fcf81f4b489dcb354fd0b063","skill_md_path":"skills/recipe-front-plan/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/shinpr/claude-code-workflows/tree/main/skills/recipe-front-plan"},"layout":"multi","source":"github","category":"claude-code-workflows","frontmatter":{"name":"recipe-front-plan","description":"Create frontend work plan from design document and obtain plan approval"},"skills_sh_url":"https://skills.sh/shinpr/claude-code-workflows/recipe-front-plan"},"updatedAt":"2026-05-02T18:53:52.414Z"}}