UI Audit
Final-pass audit workflow for web interfaces. Focuses on concrete issues with concrete fixes.
Trigger Cues
Use this skill when:
- The user asks for a UI quality audit, design QA, polish pass, or pre-release review
- The task requires accessibility, keyboard, form usability, typography, or interaction checks
- The request includes loading/error/empty states, responsiveness, or visual stability checks
Audit Workflow
Copy and track this checklist during the audit:
Audit progress:
- [ ] Step 1: Scope changed surfaces and select relevant categories
- [ ] Step 2: Run CRITICAL checks first (a11y, interaction, forms)
- [ ] Step 3: Run HIGH/MEDIUM checks for the same surfaces
- [ ] Step 4: Report findings with file:line and concrete fixes
- [ ] Step 5: Re-check touched files and mark passes- Audit only changed pages/components unless a full sweep is requested.
- Prioritize
CRITICALandHIGHfindings before medium-priority polish. - For motion behavior, also apply
ui-animationfor timing/easing/reduced-motion details. - After fixes, rerun the relevant rules before finalizing.
Rule Categories by Priority
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Accessibility and Semantics | CRITICAL | a11y- |
| 2 | Keyboard and Interaction | CRITICAL | interaction- |
| 3 | Forms and Validation | CRITICAL | forms- |
| 4 | Typography and Readability | HIGH | type- |
| 5 | Navigation and Feedback | HIGH | nav- |
| 6 | Layout and Resilience | HIGH | layout- |
| 7 | Performance and Visual Stability | HIGH | perf- |
| 8 | Motion and Theme Behavior | HIGH | motion- |
| 9 | Content and Microcopy | MEDIUM | copy- |
Quick Reference
Read only what is needed for the current audit scope:
- Category map and impact rationale:
rules/_sections.md - Rule-level guidance and examples:
rules/<prefix>-*.md - Full craft sweep:
craft-checklist.md - Typography deep sweep:
typography-checklist.md
Example rule files:
rules/a11y-semantic-html-first.md
rules/forms-inline-errors-first-focus.md
rules/perf-image-dimensions-and-priority.mdEach rule file contains:
- Why the rule matters
- Incorrect example
- Correct example
Review Output Contract
Report findings in this format:
## UI Audit Findings
### path/to/file.tsx
- [CRITICAL] `a11y-icon-controls-labeled`: Icon button is missing an accessible name.
- Fix: Add `aria-label="Close dialog"` (or visible text label).
### path/to/clean-file.tsx
- ✓ pass- Group findings by file.
- Use
file:linewhen line numbers are available. - State issue and propose a concrete fix.
- Include clean files as
✓ pass.