/recipe-front-design

name: recipe-front-design
description: Execute from repository evidence through applicable UI Spec and optional ADR decisions to complete frontend Design Doc approval
disable-model-invocation: true

**Explicit User Instruction**: The user explicitly instructs and authorizes every subagent call named in this recipe. Execute each applicable call when its prerequisites are met.

Execute Skill: documentation-criteria before document routing or creation. Execute Skill: llm-friendly-context before writing Agent prompts, handoffs, or generated artifacts. Execute Skill: subagents-orchestration-guide before invoking agents or resolving findings. Before the first finding disposition, read `references/review-resolution.md` from the loaded subagents-orchestration-guide skill.

Outcome and Ownership

Coordinate a Medium/Large frontend design from evidence to an applicable UI Spec and approved Design Doc. The user owns product requirements and exclusions; the orchestrator owns convergence readiness, Structural Scale, document routing, ADR qualification, evidence selection, and Review Resolution. Named specialists own semantic investigation and artifacts.

The frontend Design Doc always carries the complete implementation design. An ADR batch narrows qualifying technical choices; an applicable UI Spec owns UI structure and behavior that remain to be designed.

Requirements: $ARGUMENTS

Flow

requirement source -> codebase-analyzer -> scope/document routing confirmation [Stop]
                                               |
                             conditional UI analysis -> UI Spec review [Stop]
                                               |
                                   optional ADR batch/review [Stop]
                                               |
              Design Doc -> code-verifier/Resolution -> document-reviewer
                                               |
                               design-sync -> approval [Stop]

Use Review Resolution for every actionable finding. Wait at each `[Stop]` for explicit user confirmation.

At each Agent invocation below, build the prompt as a mechanical extraction: copy the named source values into the exact fields, apply only the declared serialization, then invoke immediately.

Step 1: Select the Governing Requirement Source

Use the approved PRD path when one exists. Otherwise use the requirements verbatim.

Set `requirement_context` to the approved PRD path exactly. Only when no approved PRD exists, use the orchestrator's convergence record unchanged.

Step 2: Collect Repository Decision Material

Invoke `dev-workflows-frontend:codebase-analyzer` once for the complete scope with exactly `prd_path: [approved PRD path]`, or `requirements: [requirements verbatim]` when no approved PRD exists.

Require one valid JSON result and let the analyzer discover affected paths, responsibility boundaries, and cross-layer contracts. Treat `focusAreas` as existing-behavior safeguards rather than requirements.

This independent discovery keeps scope and option convergence grounded in repository evidence rather than the orchestrator's unverified implementation hypothesis.

Step 3: Determine UI Spec Applicability and Resolve UI Evidence

Apply the documentation-criteria UI Spec creation condition. When it does not apply, skip UI analysis and Step 5.

When a UI Spec applies, load and apply `external-resource-context` only when an external resource can change the current UI direction, component contract, or verification boundary. Otherwise use `external_resource_refs: []`.

Ask for prototype code only when it supplies an unresolved approved UI decision or the target cannot be determined from requirements, repository UI, and recorded resources. A missing optional prototype is not a stop condition.

Invoke `dev-workflows-frontend:ui-analyzer` with exactly one governing source:

prd_path: [approved PRD path]

or, when no approved PRD exists:

requirements: [requirements verbatim]

Add only an existing `ui_spec_path`, a decision-relevant `prototype_path`, and selected `external_resource_refs` or `[]`.

ui_spec_path: [existing UI Spec path]
prototype_path: [decision-relevant path]
external_resource_refs: [selected references or []]

Step 4: Confirm Scope and ADR Decisions

Execute Skill: requirement-convergence. Build and judge the convergence record from the governing requirement source, repository analysis, and applicable UI analysis.

Judge all four convergence fields by the rules in `references/criteria.md` of the requirement-convergence skill. Assign `cost` from Step 2 structural evidence and record its unknowns; run the hearing only for fields below `ready`.

Determine Structural Scale from outcomes and responsibility boundaries; file count is supporting evidence only. Resolve candidate decision points against the governing source, applicable code/UI `simplifications`, `reuse`, and `invalidations`; applicable UI facts may support or contradict the remaining options. Apply documentation-criteria Choice and Durability filters only after this convergence and record passing points as `adrDecisionPoints`; an empty list is valid.

Present the requirement-convergence Scope Confirmation. Place affected responsibilities, applicable simplifications with their conditions, and qualifying ADR points or `none` under **Decision evidence**; place Structural Scale, UI Spec applicability, and the recommended document route under **Workflow**. Offer proceed, or correct and re-run. Ask a question only when its answer can change a convergence field, the outcome, or scope. Continue only when every convergence field is `ready` or `weak-but-explicit`. `[Stop: Scope confirmation]`.

Step 5: Create and Approve the UI Spec

Run this step only when Step 3 determined that a UI Spec applies.

Invoke `dev-workflows-frontend:ui-spec-designer` with exact inputs:

requirement_context: [the value set in Step