{"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 → external resource hearing → codebase-analyzer + ui-analyzer (parallel) → 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                          external resource hearing (frontend domain)\n                                           ↓\n                          codebase-analyzer + ui-analyzer (parallel)\n                                           ↓\n                                   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- External resource hearing per the external-resource-context skill\n- Codebase analysis with codebase-analyzer and ui-analyzer in parallel (before document creation)\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, ui-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 1.5: External Resource Hearing\nRun the hearing protocol per the external-resource-context skill (frontend domain). The orchestrator owns this step because it requires AskUserQuestion. The skill defines file-existence branching, two-phase hearing (structured axes + self-declaration), and persistence to `docs/project-context/external-resources.md`.\n\n### Step 2: UI Fact Gathering\nInvoke codebase-analyzer and ui-analyzer **in parallel** (single message with two Agent tool calls). They share input but produce complementary output. ui-analyzer reads the project-tier external-resources file and fetches external UI sources via the inherited MCP/URL access methods, then analyzes the UI codebase. codebase-analyzer covers data, contracts, dependencies, and quality assurance mechanisms.\n\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 (data, contracts, dependencies, quality assurance mechanisms).\"`\n- Invoke **ui-analyzer** using Agent tool (parallel with the call above)\n  - `subagent_type: \"dev-workflows-frontend:ui-analyzer\"`, `description: \"UI fact gathering\"`, `prompt: \"requirement_analysis: [JSON from Step 1]. requirements: [user requirements]. Read docs/project-context/external-resources.md, fetch external UI sources via the declared access methods, and analyze the existing UI codebase.\"`\n\nBoth outputs (codebase-analyzer JSON and ui-analyzer JSON) are reused by ui-spec-designer in Step 3 and by technical-designer-frontend in Step 4.\n\n### Step 3: UI Specification Phase\nAfter Step 2 outputs are received, 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  - Build the prompt by including:\n    - Source: PRD path (Large scale) or requirement-analyzer output (Medium scale)\n    - `ui_analysis`: ui-analyzer JSON from Step 2 (includes externalResources fetched_summary and componentStructure / propsPatterns / cssLayout / etc.)\n    - Prototype path when provided\n  - Example: `prompt: \"Create UI Spec from PRD at [path]. ui_analysis: [JSON from Step 2 ui-analyzer]. Prototype code is at [user-provided path]. Place prototype in docs/ui-spec/assets/{feature-name}/.\"`\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 4: Design Document Creation Phase\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. Pass both Step 2 outputs:\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-analyzer JSON from Step 2]. UI analysis: [ui-analyzer JSON from Step 2]. UI Spec is at [ui-spec path]. Inherit component structure and state design from UI Spec. Apply code: prefix to codebase-analyzer fact_ids and ui: prefix to ui-analyzer fact_ids when filling the Fact Disposition Table. 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 5: 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 external resource hearing per the external-resource-context skill (file written or update explicitly skipped by user)\n- [ ] Executed codebase-analyzer and ui-analyzer in parallel; outputs reused by ui-spec-designer and technical-designer-frontend\n- [ ] Created UI Specification with ui-spec-designer (when applicable) — its External Resources Used section is filled\n- [ ] Created appropriate design document (ADR or Design Doc) with technical-designer-frontend — its External Resources Used subsection is filled when present\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.629","qualityRationale":"deterministic score 0.63 from registry signals: · indexed on github topic:agent-skills · 358 github stars · SKILL.md body (9,882 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-18T18:54:30.856Z","embedding":null,"createdAt":"2026-04-18T22:03:09.439Z","updatedAt":"2026-05-18T18:54:30.856Z","lastSeenAt":"2026-05-18T18:54:30.856Z","tsv":"'1':37,327,579,627 '1.5':440 '2':60,487,685,790,818,917,989,998 '3':125,668,679 '4':677,880 '5':1147 'access':536,640 'accord':889 'across':1174 'address':436,1309 'adr':259,928,940,944,1066,1114,1267,1302 'adr-on':1301 'agent':44,52,406,505,559,601,749,925,1156 'altern':902,952,1045 'analysi':8,217,233,329,419,426,433,572,575,623,783,814,982,991 'analyz':86,92,95,170,181,184,221,237,241,392,395,404,416,494,498,517,539,545,557,569,583,599,616,643,652,657,778,786,821,985,994,1022,1031,1201,1227,1231 'answer':369 'appli':1016 'applic':1255 'appropri':886,1264 'approv':122,132,193,209,314,878,1195,1320,1350,1353 'architectur':262,901,1044 'argument':323 'ask':689,695 'askuserquest':465 'assur':552,594 'avail':737 'axe':478 'background':344 'base':978 'beyond':318 'boundari':211,303 'branch':472 'build':765 'call':387,507,606 'chang':263,269 'check':1170,1172 'code':106,199,256,283,398,694,702,714,736,823,1017,1055,1063,1074,1096,1106,1135,1137,1287 'code-verifi':105,198,282,397,1054,1073,1105,1286 'codebas':91,180,232,236,391,493,542,544,556,568,571,585,647,651,981,984,1021,1226 'codebase-analyz':90,179,235,390,492,543,555,567,650,983,1020,1225 'complementari':513 'complet':127,306,871,1134,1196,1329 'compon':1008 'componentstructur':796 'conflict':1181 'consid':331 'consist':296,869,1103,1132,1149,1169,1173,1316 'context':14,230,453,1214 'contract':548,591 'core':23 'cover':71,546 'creat':739,806,885,943,975,1246,1263 'creation':13,246,249,260,272,764,883,941,973 'criteria':360,1197 'critic':133 'csslayout':798 'data':54,267,547,590,905 'decis':947 'declar':481,639 'dedic':15 'deep':333 'defin':145,468 'definit':22 'deleg':38 'depend':549,592 'descript':417,570,617,761,854,939,970,1076,1124,1167 'design':4,11,19,67,100,103,112,129,139,189,196,205,208,254,270,276,278,294,300,309,336,380,588,665,673,747,760,881,887,895,907,922,937,958,968,971,976,1012,1050,1059,1077,1084,1088,1092,1110,1143,1148,1153,1165,1168,1176,1186,1190,1240,1244,1253,1265,1269,1274,1290,1313,1322,1327,1337 'design-doc':1083 'design-sync':111,138,204,299,1152,1164,1189,1312 'determin':173,429,892,1203 'dev':411,564,611,754,848,932,963,1070,1118,1161 'dev-workflows-frontend':410,563,610,753,847,931,962,1069,1117,1160 'dialogu':340,372 'disposit':1038 'doc':271,279,295,313,859,959,972,977,1051,1060,1078,1081,1085,1089,1093,1111,1144,1177,1270,1291 'docs/adr':1345 'docs/design':1179,1339 'docs/project-context/external-resources.md':485,632 'docs/ui-spec':1332 'docs/ui-spec/assets':721,833 'document':12,109,130,136,202,245,286,288,292,310,839,852,882,888,1086,1099,1122,1125,1129,1187,1266,1297,1306,1323,1338,1341,1347 'document-nam':1340,1346 'document-review':108,135,201,291,838,851,1098,1121,1296,1305 'domain':178,456 'engag':338 'etc':799 'everi':116 'exampl':388,804,1325 'execut':5,35,83,134,324,375,424,1198,1205,1224,1285,1304,1311 'exist':363,471,584,645,1062,1095 'expect':356 'explicit':1220 'extern':87,174,222,228,441,451,524,529,634,1206,1212,1257,1277 'external-resourc':523 'external-resource-context':227,450,1211 'externalresourc':792 'fact':489,619,1023,1032,1037 'featur':705,835,1334 'feature-nam':834,1333 'feedback':1310 'fetch':528,633,793 'file':470,526,1216 'file-exist':469 'fill':1035,1262,1282 'first':337 'flow':68,152,268,325,906 'follow':61,382 'front':3 'frontend':10,18,73,104,177,197,277,308,413,455,566,587,613,674,756,850,896,923,934,938,965,969,1072,1120,1163,1245,1275,1326 'gate':158 'gather':490,620 'guid':33,65,77,150,386 'guidanc':589 'hear':89,176,224,443,446,476,1208 'id':1024,1033 'ident':24 'impact':334 'includ':212,258,769,791 'inconsist':164 'inherit':534,1007 'input':510 'inquiri':257 'invoc':400 'invok':49,401,491,554,596,743,837,919,1053,1097,1151 'item':438 'json':576,624,653,658,787,815,986,995 'larg':773 'least':899,950,1042 'marker':118 'materi':724 'mcp/url':535 'md':1343,1349 'mechan':553,595 'medium':780 'medium/large':72 'messag':502 'method':537,641 'name':836,1335,1342,1348 'new':264 'obtain':1193,1318 'off':911,956,1049 'omit':1112 'orchestr':21,28,32,64,149,385,458 'outcom':357 'output':514,649,686,779,918,1139,1234,1324 'outsid':320 'overlap':1183 'overview':166 'own':459 'parallel':96,185,243,500,603,1233 'pass':53,914,1104,1293 'path':711,772,801,812,829,866,1006,1087,1090,1130 'per':225,448,1209 'persist':483 'phase':20,330,475,682,884,1328 'place':719,830 'plan':316 'pleas':708 'point':144 'prd':771,810 'prefix':1018,1027 'present':873,897,948,1040,1185,1284 'problem':350 'proceed':124 'process':377 'produc':512 'project':521 'project-ti':520 'prompt':420,573,621,767,805,858,942,974,1080,1127,1171 'propspattern':797 'protocol':36,447 'prototyp':255,693,701,716,735,800,822,831 'provid':709,803,828 'purpos':346 'qualiti':157,551,593 'question':373,437 'read':518,631 'receiv':131,688 'recip':2,70 'recipe-front-design':1 'refer':74,723 'relationship':361 'report':58,1180 'requir':7,85,167,169,216,220,322,328,348,403,415,418,421,423,425,432,464,574,580,582,622,628,630,777,980,1200 'requirement-analyz':84,168,219,402,414,776,1199 'resourc':88,175,223,229,442,452,525,1207,1213,1258,1278 'respons':302,733 'result':59,434,1108,1192,1294 'reus':660,1235 'review':110,137,203,287,289,293,431,840,853,857,867,1100,1123,1126,1128,1298,1307 'risk':162 'role':46 'run':444 'scale':80,172,428,774,781,891,1204 'scale-specif':79 'scope':126,210,321,381 'section':1260 'see':29 'select':904 'self':480 'self-declar':479 'serv':154 'share':509 'singl':501 'skill':34,66,151,215,231,305,454,467,1215 'skill-recipe-front-design' 'skip':159,1064,1221,1299 'solv':355 'sourc':531,636,770 'source-shinpr' 'spec':99,188,192,253,664,728,746,759,763,808,844,856,865,875,1000,1005,1015,1239,1252 'spec/adr/design':312 'specif':81,248,681,742,1248,1331 'state':1011 'status':1351 'step':161,326,439,461,486,578,626,667,676,678,684,789,817,879,916,988,997,1142,1146 'stop':114,117,143,171,190,207,430,729,872,1184 'structur':477,1009 'sub':43,51 'sub-ag':42,50 'subag':31,63,148,384,408,561,608,751,845,929,960,1067,1115,1158 'subagents-orchestration-guid':30,62,147,383 'subsect':1280 'success':359 'summari':794 'sync':113,140,206,301,1154,1166,1191,1314 'system':364 'tabl':1039 'target':862 'technic':102,195,275,672,894,921,936,946,967,1243,1273 'technical-designer-frontend':101,194,274,671,893,920,935,966,1242,1272 'technolog':265,903 'three':371 'tier':522 'tool':407,506,560,602,750,926,1157 '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':910,955,1048 'trade-off':909,954,1047 'two':474,504,900,951,1043 'two-phas':473 'type':409,562,609,752,846,860,930,961,1068,1082,1116,1159 'ui':94,98,183,187,191,240,247,252,311,394,488,497,516,530,541,598,615,618,635,646,656,663,680,727,741,745,758,762,782,785,807,813,820,843,855,864,874,990,993,999,1004,1014,1026,1030,1230,1238,1247,1251,1330 'ui-analyz':93,182,239,393,496,515,597,614,655,784,819,992,1029,1229 'ui-spec':863,1003 'ui-spec-design':97,186,251,662,744,757,1237,1250 'ui-spec.md':1336 'uispec':861 'understand':342 'undetect':163 'updat':1219 'use':405,558,600,748,924,1155,1259,1279 'user':121,367,422,581,629,691,697,732,827,877,1194,1223,1319,1352 'user-provid':826 'variat':82 'verif':280,297,1079,1136,1138,1150,1317 'verifi':107,200,284,399,842,1056,1058,1075,1091,1102,1107,1288 'via':532,637 'wait':119,730 'want':353 'within':379 'work':40,315 'workflow':165,412,565,612,755,849,933,964,1071,1119,1162 'written':1217","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-18T18:54:30.856Z"}],"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":358,"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-16T07:20:38Z","description":"Production-ready development workflows for Claude Code, powered by specialized AI agents.","skill_md_sha":"36016e606f7763ef1831869ee3cb91f28adcb479","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-18T18:54:30.856Z"}}