Skip to content
UXClaim
Design Ops

UI Audit

Audit UI features for component patterns, mobile UX, accessibility, and product-job alignment using Claude Code.

View source More in Design Ops

What it does

UI Audit is a Claude Code skill that systematically reviews UI feature areas across five dimensions: component library patterns, mobile UX, accessibility, anti-patterns, and product-job alignment. Run it on any feature area (projects, settings, session creation) to get a findings table with severity, component, issue, and file references.

How it works

The skill analyzes your code against design best practices:

  • Component patterns — checks for responsive Dialog+Drawer usage, AlertDialog for destructive actions, proper button layouts
  • Mobile UX — validates touch targets, removes hover-only interactions, checks responsive text/spacing
  • Accessibility — verifies labels, sr-only text, focus management, color contrast
  • Anti-patterns — flags window.confirm(), hand-rolled layouts, missing loading/error states
  • Job mapping — aligns the feature against the Universal Job Map (8 stages) and Four Forces of Progress for product context

Use cases

Design teams use UI Audit to:

  • Review feature branches before merge without manual inspection
  • Catch accessibility and mobile issues early in development
  • Connect technical findings to product job stages
  • Generate automated issues for design debt
  • Compare implementation against design tokens when Figma MCP is available

Who benefits

Product designers, design systems managers, and UX leads benefit most. Works standalone but integrates with shadcn MCP (component patterns), Figma MCP (design tokens), and JTBD knowledge bases for richer context.

Frequently asked questions

How do I run a UI audit on a feature?
Use `/ui-audit <feature-area>` in Claude Code. Examples: `/ui-audit projects`, `/ui-audit settings`, `/ui-audit session creation`. The skill analyzes your codebase and returns a findings table with severity, component, issue, and file:line references.
What does UI Audit check?
It checks five areas: (1) Component library patterns (Dialog, Drawer, AlertDialog usage), (2) Mobile UX (touch targets, responsive spacing), (3) Accessibility (labels, focus, contrast), (4) Anti-patterns (window.confirm, hardcoded colors), and (5) Job mapping (aligns features to Universal Job Map stages).
Does UI Audit require design tools?
No, it works standalone. But it's enhanced by optional integrations: shadcn MCP (component patterns), Figma MCP (design tokens and drift detection), and JTBD knowledge bases (product context). Each adds depth without being required.
Can UI Audit create issues automatically?
Yes. The audit findings can optionally create Linear or GitHub issues. Severity, component, and file:line are included so developers know exactly where to fix issues.
How does job mapping work in UI Audit?
The skill maps each audited feature against the Universal Job Map (8 stages: Trigger, Search, Evaluate, Buy, Receive, Setup, Use, Supplement) and Four Forces of Progress (Push, Pull, Habit, Anxiety). This connects technical findings to product context—e.g., 'this flow doesn't support the Monitor stage.'
What's the difference between UI Audit and design systems?
UI Audit is a *review* tool—it finds problems after code is written. Design systems (like interface-design skill) enforce consistency while *building*. Used together: design systems guide development, UI Audit catches what slips through.
Can UI Audit check against my design tokens?
Yes, when Figma MCP is installed. The skill pulls design tokens, compares implementation against designs, and finds unimplemented mobile variants and design drift. Without Figma MCP, it uses generic best practices.
What anti-patterns does UI Audit flag?
It flags: window.confirm() (use AlertDialog instead), hand-rolled layouts (use shadcn components), missing loading/error states, hardcoded colors, responsive issues (grid collapse, hover-only interactions), and accessibility violations (missing labels, poor contrast).

Glossary

Component library patterns
Recommended component usage and composition rules (e.g., Dialog+Drawer for responsive modals, AlertDialog for destructive actions) that ensure consistency and best practices across your UI.
Universal Job Map
A 8-stage framework in Jobs to Be Done methodology that maps how customers progress through a job: Trigger → Search → Evaluate → Buy → Receive → Setup → Use → Supplement. UI Audit aligns features to these stages for product context.
Design drift
The gap between what was designed (in Figma) and what was built (in code). UI Audit detects drift when comparing implementation against design tokens and responsive variants.
Anti-pattern
A common practice or code pattern that looks good initially but leads to poor UX, accessibility, or maintainability. Examples: hardcoded colors, window.confirm(), missing loading states.
Touch target
The interactive area users can tap on mobile devices. Industry standard is 48×48 pixels minimum. UI Audit checks that buttons, links, and form inputs meet this size on mobile.

More in Design Ops

All →
Design Ops

AI Atelie

Local-first, open-source design tool. Bring your own AI agent (Claude Code, Kimi, Codex). Generate designs as HTML/JSX/CSS folders with instant tweaks, inspe...

aiatelie
Design Ops

AI Toolbox

Claude Code plugin with 13+ skills for code review, accessibility audits, design systems, and end-to-end feature planning backed by ClickUp.

Matisantillan11
Design Ops

Architect Playbook

Self-improving Claude Code audit skills for TypeScript/React codebases covering architecture, security, accessibility, performance, testing, and more.

BenSheridanEdwards
Design Ops

Chrome DevTools Skill

Browser debugging, automation, performance analysis, accessibility auditing, and LCP optimization for Claude Code without MCP server setup.