design-review
design review
What it does
- "Review what I just built"
- "Run a design critique on the landing page"
- "Check this against the brief"
- "Here's a screenshot. How does it look?" [paste screenshot]
- "QA pass before I ship this"
- All new or modified components and their relationship to pre-existing components
- Token/variable usage: are components using shared tokens or hardcoding values?
Requirements & configuration
- Token/variable usage: are components using shared tokens or hardcoding values?
- 3. Ask the user (last resort). If neither MCP server nor in-app browser is available, you MUST ask the user to provide screenshots manually. Be specific about what you need:
- "I don't have access to a browser tool. To complete the visual review I need screenshots of the running application. Please provide:"
- 4. Run the review checklist below. For each category, note what passes and what needs refinement. Be specific. Reference exact components, files, line numbers, and screenshot filenames.
- Motion: Is there a reduced-motion media query for users who need it?
Configuration: DESIGN_BRIEFDESIGN_REVIEW
Derived from the skill's own SKILL.md documentation · extracted 2026-07-23
design-review FAQ
What does the design-review skill do?
Run a structured design critique against the brief and codebase. Checks visual hierarchy, consistency, responsiveness, accessibility, and aesthetic fidelity. Use when user wants a design review, critique, QA pass, polish pass, or mentions "review" after building. "Review what I just built" "Run a design critique on the landing page"
What does design-review require?
Token/variable usage: are components using shared tokens or hardcoding values? 3. Ask the user (last resort). If neither MCP server nor in-app browser is available, you MUST ask the user to provide screenshots manually. Be specific about what you need: "I don't have access to a browser tool. To complete the visual review I need screenshots of the running application. Please provide:" 4. Run the review checklist below. For each category, note what passes and what needs refinement. Be specific. Reference exact components, files, line numbers, and screenshot filenames. Motion: Is there a reduced-motion media query for users who need it? Configuration keys: DESIGN_BRIEF, DESIGN_REVIEW.
How do I install design-review?
Run: npx -y skills add https://github.com/julianoczkowski/designer-skills --skill design-review --agent claude-code — the source lives at github.com/julianoczkowski/designer-skills.
Maintain design-review?
Let people know it's listed here — add the badge (live metrics, light/dark aware) or a plain link to your README or docs.
[design-review on getagentictools](https://getagentictools.com/skills/julianoczkowski-designer-skills-design-review?ref=badge) npx agentictools info skills/julianoczkowski-designer-skills-design-review The second line is the CLI lookup for this page — handy in READMEs and docs.
