# design-auditor

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.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · ★ 89
- Author: Ashutos1997
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/Ashutos1997/claude-design-auditor-skill/tree/HEAD/SKILL.md
- Updated: 2026-05-17
- HTML: https://affpapa.org/en/nevibecode/skills/design-auditor

## What it 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.

## Requirements
- Works with: Figma

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add Ashutos1997/claude-design-auditor-skill --skill design-auditor -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/design-auditor/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/design-auditor/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add Ashutos1997/claude-design-auditor-skill --skill design-auditor -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/design-auditor/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add Ashutos1997/claude-design-auditor-skill --skill design-auditor -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/design-auditor/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install Ashutos1997/claude-design-auditor-skill design-auditor
```

2. **Manually: put the files in place**
- File: `.github/skills/design-auditor/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add Ashutos1997/claude-design-auditor-skill --skill design-auditor -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/Ashutos1997/claude-design-auditor-skill
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/design-auditor/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add Ashutos1997/claude-design-auditor-skill --skill design-auditor -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/Ashutos1997/claude-design-auditor-skill/tree/HEAD/SKILL.md

## When to use it
- 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
- 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

## Similar
- [extract-design](https://affpapa.org/en/nevibecode/skills/extract-design.md) — skill · 2900 installs
- [frontend-design-review](https://affpapa.org/en/nevibecode/skills/dauquangthanh-frontend-design-review.md) — skill · 458 installs
- [figma-design-to-code](https://affpapa.org/en/nevibecode/skills/figma-design-to-code.md) — skill · 30 installs
- [ui-ux-designer](https://affpapa.org/en/nevibecode/skills/ui-ux-designer.md) — skill · 3100 installs
- [open-pencil-design-editor](https://affpapa.org/en/nevibecode/skills/open-pencil-design-editor.md) — skill · 810 installs
- [design-handoff](https://affpapa.org/en/nevibecode/skills/design-handoff.md) — skill · 3500 installs

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md