Recipe Front Design
shinpr/claude-code-workflowsExecute from repository evidence through applicable UI Spec and optional ADR decisions to complete frontend Design Doc approval
At a glance
This skill is for Design and helps you create a frontend design document, review ui specifications, and document design decisions.
/plugin marketplace add shinpr/claude-code-workflows
/plugin install recipe-front-design
Setup, runtime and requirements describe shinpr/claude-code-workflows, the repo this skill ships in.
Design DocumentationUi SpecadrfrontendDesign Approvaldocumentation
Also in shinpr/claude-code-workflows
View the repoApplies language-agnostic and backend technical decision criteria, anti-pattern detection, debugging, and quality gates. Use when reviewing...
Language-agnostic coding principles for maintainability, readability, and quality. Use when implementing features, refactoring code, or revi...
Determines which of PRD, ADR, UI Spec, Design Doc, and Work Plan a change requires, and where each is stored. Use when deciding documentatio...
Records where resources outside the repository live (design source, design system, API schema, IaC source, secret store) and how design, imp...
Applies React/TypeScript-specific technical decision criteria, anti-pattern detection, debugging, and frontend quality gates. Use when revie...
Implementation strategy selection framework. Use when planning implementation strategy, selecting development approach, or defining verifica...
Integration and E2E test design principles, ROI calculation, test skeleton specification, and review criteria. Use when designing integratio...
Clarifies inputs, outputs, success criteria, decisions, and unresolved conditions so downstream consumers can execute without guessing. Use...
Add integration/E2E tests to existing codebase using Design Docs
Execute materialized task files in autonomous execution mode
Execute from codebase-scoped analysis through optional ADR decisions to complete Design Doc approval
Investigate problem, verify findings, and derive solutions
Other Design skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typog...
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art...
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right,...
Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explor...
A hand-drawn wireframe exploration — graph-paper background, marker / pencil tone, multiple tab labels for variants, sticky-note annotations...
An annotated / redline lo-fi wireframe — a desktop landing/marketing page drawn as flat greyboxes inside a browser chrome frame, overlaid wi...