design-review
The design-review skill performs a structured evaluation of UI/UX designs across six weighted dimensions: Visual Hierarchy, Consistency, Accessibility, Usability, Responsiveness, and Performance. It applies Nielsen's 10 usability heuristics, checks WCAG accessibility standards, and flags design anti-patterns, outputting a scored assessment table and prioritized findings with severity levels and specific recommendations. Use it when conducting design audits, critiques, or quality assessments of screens, pages, or products before or after development.
git clone --depth 1 https://github.com/plugin87/ux-ui-agent-skills /tmp/design-review && cp -r /tmp/design-review/.claude/skills/design-review ~/.claude/skills/design-reviewSKILL.md
# Skill: Design Review Run a structured, scored review. ## Steps 1. Read `workflows/design-review.md` (rubric, scoring guide, Nielsen heuristics, process). 2. Gather context: the screen(s)/flow, target users, platform, constraints. 3. Score the 6 dimensions (Visual Hierarchy 20%, Consistency 20%, Accessibility 20%, Usability 20%, Responsiveness 10%, Performance 10%); compute the weighted overall. 4. Run the accessibility lens with `accessibility/wcag-checklist.md`; use `scripts/contrast.py` for any color-pair doubts. 5. Check against the anti-slop tells in `taste/design-taste.md` (Banned Defaults checklist). 6. Apply Nielsen's 10 heuristics; flag violations by number. ## Output - The 6-dimension scored table + overall score. - A prioritized findings table: # · Severity (Critical → Major → Minor → Enhancement) · Finding · Recommendation. - Concrete, token-referenced fixes.
Audit a UI or design against WCAG 2.2 AA/AAA and ARIA patterns, returning criterion-referenced findings with severity and specific fixes. Use when the user wants an accessibility check, contrast verification, keyboard/screen-reader review, or wants to confirm a component meets POUR.
Apply a visual direction — an archetype (high-end agency, editorial minimal, brutalist, soft-SaaS, dark-tech) or one of 138 named design systems (apple, linear-app, stripe, vercel, notion, material, shadcn, spotify, tesla…) — by resolving it into the token system. Use when the user wants a specific look/vibe/brand feel, or asks to make a design feel premium/expensive/non-generic.
Generate a complete, accessible brand design system from a brief — primitive → semantic → component DTCG tokens (color, type, spacing, radius, shadow, motion), light + dark, plus a single theme.css — verified for WCAG. Use when the user wants a from-scratch brand/design foundation, a new palette + type system, or a themeable token kit for a product.
Generate production-ready, accessible, token-driven component code for ANY framework — React+Tailwind, Next.js, SwiftUI, Vue, Svelte, Angular, Solid, Web Components/Lit, React Native, Flutter, Jetpack Compose, vanilla CSS, or CSS-in-JS. Use when the user wants working UI code for a component or screen in a specific stack.
Design a UI component spec to the house quality bar — anatomy, variants, sizes, the 8 states, token mapping, and accessibility. Use when the user wants to design or document a component (button, input, tabs, toast, combobox, date picker, modal, etc.) at the spec level before or alongside code. For generating framework code, use design-code.
Set up or run design QA gates — token + hardcoded-value lint, automated a11y (axe), contrast, visual regression across variants/states/themes/RTL, and the manual a11y checklist. Use when the user wants CI quality gates, to prevent design regressions, or to QA a component/screen before shipping.
Generate, extend, or audit design tokens in DTCG format with the 3-tier architecture (primitive → semantic → component). Use when the user wants a color palette, type scale, spacing/shadow/radius/motion tokens, multi-brand theming, or wants to validate token files. Covers colors, typography, spacing, shadows, borders, breakpoints, motion, gradients, opacity, blur, sizing, states, theming.
Keep Figma and code in sync — map the 3-tier DTCG tokens to Figma Variables (collections + modes), sync in either direction, use the Figma MCP when connected, and verify component parity (variants/states). Use when the user wants to push tokens/components to Figma, pull a design into code, set up token↔Variable sync, or check design-code drift.