design-auditor — Claude Code skill: design and a11y audit
Checks markup and mockups against 19 rules covering contrast, focus, aria and dark patterns. Handy when you need to know why a UI feels off or fails accessibility.
npx skills add Ashutos1997/claude-design-auditor-skill --skill design-auditor -a claude-codeWhat design-auditor does
The skill reads HTML/CSS, React, Vue and Tailwind code, and Figma files too. It works out which framework and design system you use — MUI, Chakra, shadcn/ui, Ant Design, Radix, Bootstrap — then runs checks across 19 categories: aria, focus, contrast, tokens, responsive layout, motion, forms, navigation, spacing, states, microcopy, elevation, iconography and SVG. Colour blindness risk gets flagged as well.
Dark patterns and ethical design are part of the audit, along with a pass over Nielsen's heuristics. Output includes before/after diffs, handoff reports for developers, and wireframe-to-spec conversion. Reports come back in the language you wrote in; English and Korean are supported.
Before starting, the skill gauges how much design vocabulary you have and adjusts its tone. Beginners get every term explained, experienced users get a terse technical summary. One thing to know about live URLs: hover, focus, error and loading states stay invisible, since they never appear in the fetched HTML. Pages behind a login are only audited if you supply credentials.
What it helps with
- catch text and background contrast failures
- check a form for accessible, clear field labels
- spot dark patterns in a UI
- match markup against design system tokens
- produce a report a developer can act on
Example prompts for the agent
- Audit my markup for accessibility:
src/components/CheckoutForm.tsx - Check contrast and focus states on this page
- Run a Nielsen heuristic review on this Figma file
How to install design-auditor
1Skills CLI (Vercel)
npx skills add Ashutos1997/claude-design-auditor-skill --skill design-auditor -a claude-code2Manually: put the files in place
~/.claude/skills/design-auditor/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/design-auditor/
1Skills CLI (Vercel)
npx skills add Ashutos1997/claude-design-auditor-skill --skill design-auditor -a codex2Manually: put the files in place
.agents/skills/design-auditor/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add Ashutos1997/claude-design-auditor-skill --skill design-auditor -a cursor2Manually: put the files in place
.cursor/skills/design-auditor/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install Ashutos1997/claude-design-auditor-skill design-auditor2Manually: put the files in place
.github/skills/design-auditor/SKILL.md1Skills CLI (Vercel)
npx skills add Ashutos1997/claude-design-auditor-skill --skill design-auditor -a gemini-cli2Platform CLI
gemini skills install https://github.com/Ashutos1997/claude-design-auditor-skillManually: put the files in place
.devin/skills/design-auditor/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add Ashutos1997/claude-design-auditor-skill --skill design-auditor -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-auditor
How do I install design-auditor in Claude Code?
Run npx skills add Ashutos1997/claude-design-auditor-skill --skill design-auditor -a claude-code. The skill lands at ~/.claude/skills/design-auditor/SKILL.md.
What does design-auditor do?
It reviews design and code against 19 rules — contrast, focus, aria, spacing, responsive layout, forms and more. It also looks for dark patterns and runs a Nielsen heuristic pass.
Can it audit a live site from a URL?
Yes, it fetches the rendered HTML and CSS. Hover, focus, error and loading states are out of reach though, and login-protected pages need your credentials.
