🇺🇸English
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
CRITICAL and HIGH findings before medium-priority polish.
- For motion behavior, also apply
ui-animation for 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 |
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.md
Each 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:line when line numbers are available.
- State issue and propose a concrete fix.
- Include clean files as
✓ pass.
Weekly Installs
114
Repository
mblode/agent-skills
GitHub Stars
19
First Seen
Jan 20, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode98
codex93
claude-code91
gemini-cli91
cursor90
github-copilot84
