a11y-audit
Audit a UI or design against WCAG 2.2 AA/AAA and ARIA patterns, returning criterion-referenced findings with severity and…
Review or audit a design/UI across 6 weighted dimensions with Nielsen's 10 heuristics and a prioritized findings table. Use when the user wants a design critique, quality score, heuristic evaluation, or audit of an existing screen, page, or product before/after build.
Claude Code
$ npx -y skills add plugin87/ux-ui-agent-skills --skill design-review --agent claude-code
Codex
$ npx skills add plugin87/ux-ui-agent-skills --skill design-review -a codex -y
Cursor
$ npx skills add plugin87/ux-ui-agent-skills --skill design-review -a cursor -y
Gemini CLI
$ npx skills add plugin87/ux-ui-agent-skills --skill design-review -a gemini-cli -y
GitHub Copilot
$ npx skills add plugin87/ux-ui-agent-skills --skill design-review -a github-copilot -y
OpenCode
$ npx skills add plugin87/ux-ui-agent-skills --skill design-review -a opencode -y
Windsurf
$ npx skills add plugin87/ux-ui-agent-skills --skill design-review -a windsurf -y
name: design-review description: Review or audit a design/UI across 6 weighted dimensions with Nielsen's 10 heuristics and a prioritized findings table. Use when the user wants a design critique, quality score, heuristic evaluation, or audit of an existing screen, page, or product before/after build.
This skill needs the full UX/UI Agent Skills kit: the gates, the references and the design-system library. Install it with `npx ux-ui-agent-skills@3.1.0 init` or as the Claude Code plugin. `npx skills@1.7.6 add` copies the skill folder and nothing else. Installed that way, this skill runs in **guidance-only mode**: no gate runs, so it gives no verdict.
> **Step 0: is the kit here?** Check once: > `ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING` > On `KIT_MISSING`, open your reply with: "Guidance-only mode: the UX/UI Agent > Skills kit is not installed here, so no gate ran and nothing below is > measured." Then work from this file and general practice, under three rules. > Do not guess or cite the contents of a kit file you could not open. State no > measured number (no contrast ratio, no N/N, no "passes WCAG"): write "not > verified" where one would go. End with a line `Skipped (kit not installed):` > that names every gate script this file tells you to run, then the install > command above.
Run a structured, scored review.
1. Read `${CLAUDE_SKILL_DIR}/../../../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 `${CLAUDE_SKILL_DIR}/../../../accessibility/wcag-checklist.md`; use `${CLAUDE_SKILL_DIR}/../../../scripts/contrast.py` for any color-pair doubts. 5. Check against the anti-slop tells in `${CLAUDE_SKILL_DIR}/../../../taste/design-taste.md` (Banned Defaults checklist). 6. Apply Nielsen's 10 heuristics; flag violations by number.
Audit a UI or design against WCAG 2.2 AA/AAA and ARIA patterns, returning criterion-referenced findings with severity and…
Apply a visual direction, an archetype (high-end agency, editorial minimal, brutalist, soft-SaaS, dark-tech) or one of 2,144…
Generate a complete, accessible brand design system from a brief, as primitive → semantic → component DTCG tokens (color, type,…
Adversarial design critique of the current work. Render it, look at it, and argue for rejection. Run after the gates are green,…
Build a dense, data-heavy screen - an analytics console or a trading terminal - with real charts drawn from tokens: candlestick,…
Generate production-ready, accessible, token-driven component code for ANY framework (React+Tailwind, Next.js, SwiftUI, Vue,…
Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with optional…
Use to design, redesign, critique, audit, polish or animate a frontend: websites, landing pages, dashboards, app UI, components,…
Hyperframes-based video template for retro pixel deck motion design. Use when users want a high-fidelity, multi-scene…
Create branded architecture, architecture delta, IT current-state, flowchart, sequence, state machine, ER/data model, timeline,…