design-review-process — Claude Code skill: design review gates
A skill that sets four review gates for design work, from concept to implementation QA. Useful when things ship without a consistent review step.
npx skills add Owl-Listener/designer-skills --skill design-review-process -a claude-codeWhat design-review-process does
The skill lays out a design review process built on four gates. Concept review checks that the problem is defined, user needs rest on research, and several directions were explored. Design review covers brand standards, consistent interaction patterns, responsive behaviour, and design system components. Pre-handoff review looks at every state — empty, loading, error, success — plus edge cases, accessibility, and handoff specs. Implementation QA compares the build against the spec and checks interactions, responsiveness, and cross-browser behaviour.
Review criteria come as questions: does it solve the user problem, is it consistent with the design system, is it accessible at WCAG AA, are all states covered, is it feasible to build. Approval runs from the designer's own checklist pass through a peer review and a design lead sign-off to developer acceptance. Nothing beyond Node.js for npx is needed to install it.
The skill itself says not every project needs every gate. Scale the process to project size and risk, or four approval rounds on a small fix will cost more than the fix. Time-box reviews to avoid endless cycles, and write down decisions with their rationale. For running a single session instead of setting up the process, there is a companion skill, design-critique.
What it helps with
- set one review order for design before it reaches development
- write acceptance criteria for a design handoff
- check that empty, loading and error states are designed
- split approval between designer, peer, lead and developer
- time-box reviews so they do not loop forever
Example prompts for the agent
- Lay out a design review process for our team: which gates, who signs off
- Build a pre-handoff checklist for this screen
- Review this screen against the criteria: states, accessibility, design system fit
How to install design-review-process
1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill design-review-process -a claude-code2Manually: put the files in place
~/.claude/skills/design-review-process/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/design-review-process/
1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill design-review-process -a codex2Manually: put the files in place
.agents/skills/design-review-process/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill design-review-process -a cursor2Manually: put the files in place
.cursor/skills/design-review-process/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install Owl-Listener/designer-skills design-review-process2Manually: put the files in place
.github/skills/design-review-process/SKILL.md1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill design-review-process -a gemini-cli2Platform CLI
gemini skills install https://github.com/Owl-Listener/designer-skills --path design-ops/skills/design-review-processManually: put the files in place
.devin/skills/design-review-process/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill design-review-process -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about design-review-process
How do I install design-review-process in Claude?
Run npx skills add Owl-Listener/designer-skills --skill design-review-process -a claude-code. The skill lands in ~/.claude/skills/design-review-process/SKILL.md.
What does design-review-process do?
It describes a design review process: four gates from concept to implementation QA, review criteria, and an approval workflow. It helps when work ships without consistent review.
How is it different from design-critique?
design-review-process sets up the process and gates for a team, while design-critique runs one individual session.
Source text
SKILL.md · MIT
--- name: design-review-process description: Establish review gates — criteria, checkpoints, and approval flow. Use when work ships without consistent review. For running one individual session, use `design-critique`. --- # Design Review Process You are an expert in establishing design review processes that maintain quality without slowing teams down. ## What You Do You create review processes with clear gates, criteria, and workflows that ensure design quality. ## Review Gates ### Gate 1: Concept Review - Problem clearly defined - User needs supported by research - Multiple concepts explored - Strategic alignment confirmed - Stakeholder input gathered ### Gate 2: Design Review - Visual design meets brand standards - Interaction patterns are consistent - Responsive behavior defined - Content strategy applied - Design system components used ### Gate 3: Pre-Handoff Review - All states designed (empty, loading, error, success) - Edge cases addressed - Accessibility requirements met - Handoff specs complete - Developer walkthrough done ### Gate 4: Implementation QA - Design matches specification - Interactions work as designed - Responsive behavior verified - Accessibility tested - Cross-browser/device checked ## Review Criteria - Does it solve the user problem? - Is it consistent with the design system? - Is it accessible (WCAG AA)? - Are all states and edge cases covered? - Is it feasible to implement? ## Approval Workflow - Designer self-review against checklist - Peer design review - Design lead sign-off - Stakeholder approval (if required) - Developer acceptance ## Best Practices - Not every project needs every gate - Scale the process to project size and risk - Use checklists to make reviews objective - Time-box reviews to prevent endless cycles - Document review decisions and rationale
© Owl-Listener · MIT · Owl-Listener/designer-skills
