recipe-front-design
Execute from repository evidence through applicable UI Spec and optional ADR decisions to complete frontend Design Doc approval
npx skills add shinpr/claude-code-workflows --skill recipe-front-design --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
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. ## Outcome and Ownership Coordinate a Medium/Large frontend design from evidence to an applicable UI Spec and approved Design Doc. The orchestrator owns requirement convergence, 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 ```text 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 e
- Outcome and Ownership
- Flow
- Step 1: Select the Governing Requirement Source
- Step 2: Collect Repository Decision Material
- Step 3: Determine UI Spec Applicability and Resolve UI Evidence
- Step 4: Confirm Scope and ADR Decisions
- Step 5: Create and Approve the UI Spec
- Step 6: Create and Approve an ADR Batch When Needed
- Step 7: Create the Frontend Design Doc
- Step 8: Verify, Review, and Approve
- Completion Criteria
What does the recipe-front-design skill do?
Execute from repository evidence through applicable UI Spec and optional ADR decisions to complete frontend Design Doc approval
How do I install it?
Run `npx skills add shinpr/claude-code-workflows --skill recipe-front-design --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From shinpr/claude-code-workflows, a repository with 664 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.