# ui-audit

Evaluates user interfaces against core UX guidelines from Making UX Decisions. Spots hierarchy flaws, navigation issues, and accessibility oversights.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 542 installs · ★ 32
- Author: Tommy Geoco
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/tommygeoco/ui-audit/tree/HEAD/SKILL.md
- Updated: 2026-01-18
- HTML: https://affpapa.org/en/nevibecode/skills/ui-audit

## What it does

This skill injects structured decision trees and reference files directly into the coding agent. It draws on Tommy Geoco's framework to review component states, visual styles, and user flows. The tool inspects layouts by weighing organizational constraints against user familiarity and empirical findings.

Audit outputs follow a strict JSON schema. Mandatory sections cover visual hierarchy, styling consistency, and core accessibility targets like keyboard focus and contrast ratios. Conditional sections trigger for complex inputs, onboarding tours, or multi-step navigation.

To rank fixes effectively, the model demands clear product priorities: speed, waste reduction, high accuracy, or novelty. Without knowing these strategic bets, the agent cannot weigh UI trade-offs accurately.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add tommygeoco/ui-audit --skill ui-audit -a claude-code
```

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

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add tommygeoco/ui-audit --skill ui-audit -a codex
```

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

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add tommygeoco/ui-audit --skill ui-audit -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install tommygeoco/ui-audit ui-audit
```

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

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add tommygeoco/ui-audit --skill ui-audit -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/tommygeoco/ui-audit
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add tommygeoco/ui-audit --skill ui-audit -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/tommygeoco/ui-audit/tree/HEAD/SKILL.md

## When to use it
- audit component layouts for contrast, touch targets, and keyboard navigation
- spot defects in typography scale, spacing consistency, and visual hierarchy
- select suitable UI patterns for progressive disclosure and form wizards
- generate structured JSON audit logs detailing prioritized interface fixes

## Example prompts
- Run an accessibility and visual hierarchy audit on the checkout flow component.
- Audit this settings screen and return the findings using the JSON report format.
- Recommend the best pattern to reduce cognitive load in this multi-step onboarding wizard.

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [grill-me](https://affpapa.org/en/nevibecode/skills/grill-me.md) — skill · 1424476 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [grilling](https://affpapa.org/en/nevibecode/skills/grilling.md) — skill · 979543 installs
- [codebase-design](https://affpapa.org/en/nevibecode/skills/codebase-design.md) — skill · 850344 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