{"id":"000e25f1-240f-4695-8085-2970f0e8e4b2","shortId":"zFVXDC","kind":"skill","title":"recipe-front-design","tagline":"Execute from requirement analysis to frontend design document creation","description":"**Context**: Dedicated to the frontend design 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 design flow** (this recipe covers medium/large frontend; refer to the guide for scale-specific variations):\n   - Execute: requirement-analyzer → codebase-analyzer → ui-spec-designer → technical-designer-frontend → code-verifier → document-reviewer → design-sync\n   - **Stop at every `[Stop: ...]` marker** → Wait for user approval before proceeding\n3. **Scope**: Complete when design documents receive approval\n\n**CRITICAL**: Execute document-reviewer, design-sync, and all stopping points defined in subagents-orchestration-guide skill flows — each serves as a quality gate. Skipping any step risks undetected inconsistencies.\n\n## Workflow Overview\n\n```\nRequirements → requirement-analyzer → [Stop: Scale determination]\n                                           ↓\n                                   codebase-analyzer → ui-spec-designer → [Stop: UI Spec approval]\n                                           ↓\n                                   technical-designer-frontend\n                                           ↓\n                                   code-verifier → document-reviewer\n                                           ↓\n                                      design-sync → [Stop: Design approval]\n```\n\n## Scope Boundaries\n\n**Included in this skill**:\n- Requirement analysis with requirement-analyzer\n- Codebase analysis with codebase-analyzer (before technical design)\n- UI Specification creation with ui-spec-designer (prototype code inquiry included)\n- ADR creation (if architecture changes, new technology, or data flow changes)\n- Design Doc creation with technical-designer-frontend\n- Design Doc verification with code-verifier (before document review)\n- Document review with document-reviewer\n- Design Doc consistency verification with design-sync\n\n**Responsibility Boundary**: This skill completes with frontend design document (UI Spec/ADR/Design Doc) approval. Work planning and beyond are outside scope.\n\nRequirements: $ARGUMENTS\n\n## Execution Flow\n\n### Step 1: Requirement Analysis Phase\nConsidering the deep impact on design, first engage in dialogue to understand the background and purpose of requirements:\n- What problems do you want to solve?\n- Expected outcomes and success criteria\n- Relationship with existing systems\n\nOnce the user has answered the three dialogue questions above, execute the process below within design scope. Follow subagents-orchestration-guide Call Examples for codebase-analyzer and code-verifier invocations.\n\n- Invoke **requirement-analyzer** using Agent tool\n  - `subagent_type: \"dev-workflows-frontend:requirement-analyzer\"`\n  - `description: \"Requirement analysis\"`\n  - `prompt: \"Requirements: [user requirements] Execute requirement analysis and scale determination\"`\n- **[STOP]**: Review requirement analysis results and address question items\n\n### Step 2: UI Specification Phase\nAfter requirement analysis approval, ask the user about prototype code:\n\n**Ask the user**: \"Do you have prototype code for this feature? If so, please provide the path to the code. The prototype will be placed in `docs/ui-spec/assets/` as reference material for the UI Spec.\"\n\n- **[STOP]**: Wait for user response about prototype code availability\n\nThen create the UI Specification:\n- Invoke **ui-spec-designer** using Agent tool\n  - `subagent_type: \"dev-workflows-frontend:ui-spec-designer\"`\n  - `description: \"UI Spec creation\"`\n  - If PRD exists and prototype provided: `prompt: \"Create UI Spec from PRD at [path]. Prototype code is at [user-provided path]. Place prototype in docs/ui-spec/assets/{feature-name}/\"`\n  - If PRD exists and no prototype: `prompt: \"Create UI Spec from PRD at [path]. No prototype code available.\"`\n  - If no PRD (medium scale): `prompt: \"Create UI Spec based on the following requirements: [requirements analysis output from Step 1]. No PRD available.\"` (add prototype path if provided)\n- Invoke **document-reviewer** to verify UI Spec\n  - `subagent_type: \"dev-workflows-frontend:document-reviewer\"`, `description: \"UI Spec review\"`, `prompt: \"doc_type: UISpec target: [ui-spec path] Review for consistency and completeness\"`\n- **[STOP]**: Present UI Spec for user approval\n\n### Step 3: Design Document Creation Phase\nFirst, analyze the existing codebase:\n- Invoke **codebase-analyzer** using Agent tool\n  - `subagent_type: \"dev-workflows-frontend:codebase-analyzer\"`, `description: \"Codebase analysis\"`, `prompt: \"requirement_analysis: [JSON from Step 1]. requirements: [user requirements]. Analyze existing codebase for frontend design guidance.\"`\n\nCreate appropriate design documents according to scale determination. technical-designer-frontend presents at least two architecture alternatives (technology selection, data flow design) with trade-offs for each:\n- Invoke **technical-designer-frontend** using Agent tool\n  - For ADR: `subagent_type: \"dev-workflows-frontend:technical-designer-frontend\"`, `description: \"ADR creation\"`, `prompt: \"Create ADR for [technical decision]. Present at least two alternatives with trade-offs.\"`\n  - For Design Doc: `subagent_type: \"dev-workflows-frontend:technical-designer-frontend\"`, `description: \"Design Doc creation\"`, `prompt: \"Create Design Doc based on requirements. Codebase analysis: [codebase analysis output from this step]. UI Spec is at [ui-spec path]. Inherit component structure and state design from UI Spec. Present at least two architecture alternatives with trade-offs.\"`\n- **(Design Doc only)** Invoke **code-verifier** to verify Design Doc against existing code. Skip for ADR.\n  - `subagent_type: \"dev-workflows-frontend:code-verifier\"`, `description: \"Design Doc verification\"`, `prompt: \"doc_type: design-doc document_path: [Design Doc path] Verify Design Doc against existing code.\"`\n- Invoke **document-reviewer** to verify consistency (pass code-verifier results for Design Doc; omit for ADR)\n  - `subagent_type: \"dev-workflows-frontend:document-reviewer\"`, `description: \"Document review\"`, `prompt: \"Review [document path] for consistency and completeness. code_verification: [code verification output from this step] (Design Doc only)\"`\n\n### Step 4: Design Consistency Verification\n- Invoke **design-sync** using Agent tool\n  - `subagent_type: \"dev-workflows-frontend:design-sync\"`, `description: \"Design consistency check\"`, `prompt: \"Check consistency across all Design Docs in docs/design/. Report conflicts and overlaps.\"`\n- **[STOP]**: Present design documents and design-sync results, obtain user approval\n\n## Completion Criteria\n\n- [ ] Executed requirement-analyzer and determined scale\n- [ ] Executed codebase-analyzer and passed results to technical-designer-frontend\n- [ ] Created UI Specification with ui-spec-designer (when applicable)\n- [ ] Created appropriate design document (ADR or Design Doc) with technical-designer-frontend\n- [ ] Executed code-verifier on Design Doc and passed results to document-reviewer (skip for ADR-only)\n- [ ] Executed document-reviewer and addressed feedback\n- [ ] Executed design-sync for consistency verification\n- [ ] Obtained user approval for design document\n\n## Output Example\nFrontend design phase completed.\n- UI Specification: docs/ui-spec/[feature-name]-ui-spec.md\n- Design document: docs/design/[document-name].md or docs/adr/[document-name].md\n- Approval status: User approved","tags":["recipe","front","design","claude","code","workflows","shinpr","agent-skills","agentic-ai","ai-agents","automation","claude-code"],"capabilities":["skill","source-shinpr","skill-recipe-front-design","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-design","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 (7,633 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.334Z","embedding":null,"createdAt":"2026-04-18T22:03:09.439Z","updatedAt":"2026-05-02T18:53:52.334Z","lastSeenAt":"2026-05-02T18:53:52.334Z","tsv":"'1':37,295,555,642 '2':60,405 '3':118,607 '4':876 'accord':657 'across':903 'add':559 'address':401,993 'adr':227,691,703,707,795,843,960,986 'adr-on':985 'agent':44,52,371,473,622,688,885 'altern':670,715,774 'analysi':8,201,207,297,384,391,398,411,551,635,638,745,747 'analyz':86,89,163,169,205,211,360,369,381,613,620,632,646,930,937 'answer':337 'applic':955 'appropri':654,957 'approv':115,125,177,193,282,412,605,924,1004,1034,1037 'architectur':230,669,773 'argument':291 'ask':413,419 'avail':461,535,558 'background':312 'base':545,741 'beyond':286 'boundari':195,271 'call':355 'chang':231,237 'check':899,901 'code':99,183,224,251,363,418,426,438,460,504,534,784,792,803,825,835,864,866,971 'code-verifi':98,182,250,362,783,802,834,970 'codebas':88,168,206,210,359,616,619,631,634,648,744,746,936 'codebase-analyz':87,167,209,358,618,630,935 'complet':120,274,598,863,925,1013 'compon':761 'conflict':910 'consid':299 'consist':264,596,832,861,878,898,902,1000 'context':14 'core':23 'cover':71 'creat':463,496,525,542,653,706,738,946,956 'creation':13,217,228,240,488,610,704,736 'criteria':328,926 'critic':126 'data':54,235,673 'decis':710 'dedic':15 'deep':301 'defin':138 'definit':22 'deleg':38 'descript':382,485,581,633,702,733,805,853,896 'design':4,11,19,67,93,96,105,122,132,173,180,189,192,214,222,238,244,246,262,268,277,304,348,471,484,608,651,655,663,675,685,700,721,731,734,739,765,779,788,806,813,817,821,839,872,877,882,894,897,905,915,919,944,953,958,962,967,974,997,1006,1011,1021 'design-doc':812 'design-sync':104,131,188,267,881,893,918,996 'determin':166,394,660,932 'dev':376,478,575,627,695,726,799,847,890 'dev-workflows-frontend':375,477,574,626,694,725,798,846,889 'dialogu':308,340 'doc':239,247,263,281,586,722,735,740,780,789,807,810,814,818,822,840,873,906,963,975 'docs/adr':1029 'docs/design':908,1023 'docs/ui-spec':1016 'docs/ui-spec/assets':445,514 'document':12,102,123,129,186,254,256,260,278,566,579,609,656,815,828,851,854,858,916,959,981,990,1007,1022,1025,1031 'document-nam':1024,1030 'document-review':101,128,185,259,565,578,827,850,980,989 'engag':306 'everi':109 'exampl':356,1009 'execut':5,35,83,127,292,343,389,927,934,969,988,995 'exist':331,491,520,615,647,791,824 'expect':324 'featur':429,516,1018 'feature-nam':515,1017 'feedback':994 'first':305,612 'flow':68,145,236,293,674 'follow':61,350,548 'front':3 'frontend':10,18,73,97,181,245,276,378,480,577,629,650,664,686,697,701,728,732,801,849,892,945,968,1010 'gate':151 'guid':33,65,77,143,354 'guidanc':652 'ident':24 'impact':302 'includ':196,226 'inconsist':157 'inherit':760 'inquiri':225 'invoc':365 'invok':49,366,467,564,617,682,782,826,880 'item':403 'json':639 'least':667,713,771 'marker':111 'materi':448 'md':1027,1033 'medium':539 'medium/large':72 'name':517,1019,1026,1032 'new':232 'obtain':922,1002 'off':679,719,778 'omit':841 'orchestr':21,28,32,64,142,353 'outcom':325 'output':552,748,868,1008 'outsid':288 'overlap':912 'overview':159 'pass':53,833,939,977 'path':435,502,510,531,561,593,759,816,819,859 'phase':20,298,408,611,1012 'place':443,511 'plan':284 'pleas':432 'point':137 'prd':490,500,519,529,538,557 'present':600,665,711,769,914 'problem':318 'proceed':117 'process':345 'prompt':385,495,524,541,585,636,705,737,809,856,900 'protocol':36 'prototyp':223,417,425,440,459,493,503,512,523,533,560 'provid':433,494,509,563 'purpos':314 'qualiti':150 'question':341,402 'receiv':124 'recip':2,70 'recipe-front-design':1 'refer':74,447 'relationship':329 'report':58,909 'requir':7,85,160,162,200,204,290,296,316,368,380,383,386,388,390,397,410,549,550,637,643,645,743,929 'requirement-analyz':84,161,203,367,379,928 'respons':270,457 'result':59,399,837,921,940,978 'review':103,130,187,255,257,261,396,567,580,584,594,829,852,855,857,982,991 'risk':155 'role':46 'scale':80,165,393,540,659,933 'scale-specif':79 'scope':119,194,289,349 'see':29 'select':672 'serv':147 'skill':34,66,144,199,273 'skill-recipe-front-design' 'skip':152,793,983 'solv':323 'source-shinpr' 'spec':92,172,176,221,452,470,483,487,498,527,544,571,583,592,602,753,758,768,952 'spec/adr/design':280 'specif':81,216,407,466,948,1015 'state':764 'status':1035 'step':154,294,404,554,606,641,751,871,875 'stop':107,110,136,164,174,191,395,453,599,913 'structur':762 'sub':43,51 'sub-ag':42,50 'subag':31,63,141,352,373,475,572,624,692,723,796,844,887 'subagents-orchestration-guid':30,62,140,351 'success':327 'sync':106,133,190,269,883,895,920,998 'system':332 'target':589 'technic':95,179,213,243,662,684,699,709,730,943,966 'technical-designer-frontend':94,178,242,661,683,698,729,942,965 'technolog':233,671 'three':339 'tool':372,474,623,689,886 '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' 'trade':678,718,777 'trade-off':677,717,776 'two':668,714,772 'type':374,476,573,587,625,693,724,797,811,845,888 'ui':91,171,175,215,220,279,406,451,465,469,482,486,497,526,543,570,582,591,601,752,757,767,947,951,1014 'ui-spec':590,756 'ui-spec-design':90,170,219,468,481,950 'ui-spec.md':1020 'uispec':588 'understand':310 'undetect':156 'use':370,472,621,687,884 'user':114,335,387,415,421,456,508,604,644,923,1003,1036 'user-provid':507 'variat':82 'verif':248,265,808,865,867,879,1001 'verifi':100,184,252,364,569,785,787,804,820,831,836,972 'wait':112,454 'want':321 'within':347 'work':40,283 'workflow':158,377,479,576,628,696,727,800,848,891","prices":[{"id":"ea6f4e6a-d3ae-4df5-860b-05a3bbe95d9b","listingId":"000e25f1-240f-4695-8085-2970f0e8e4b2","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:09.439Z"}],"sources":[{"listingId":"000e25f1-240f-4695-8085-2970f0e8e4b2","source":"github","sourceId":"shinpr/claude-code-workflows/recipe-front-design","sourceUrl":"https://github.com/shinpr/claude-code-workflows/tree/main/skills/recipe-front-design","isPrimary":false,"firstSeenAt":"2026-04-18T22:03:09.439Z","lastSeenAt":"2026-05-02T18:53:52.334Z"}],"details":{"listingId":"000e25f1-240f-4695-8085-2970f0e8e4b2","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"shinpr","slug":"recipe-front-design","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":"2c18f47b0153cce3e8077d4ccf7aaf73ca4e1ef8","skill_md_path":"skills/recipe-front-design/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/shinpr/claude-code-workflows/tree/main/skills/recipe-front-design"},"layout":"multi","source":"github","category":"claude-code-workflows","frontmatter":{"name":"recipe-front-design","description":"Execute from requirement analysis to frontend design document creation"},"skills_sh_url":"https://skills.sh/shinpr/claude-code-workflows/recipe-front-design"},"updatedAt":"2026-05-02T18:53:52.334Z"}}