← ClaudeAtlas

uxlisted

Audit UI for responsiveness, accessibility, design system consistency and interaction states, against the design system in .claude/project-profile.md. Use for: UX review, audit this component, accessibility check, /ux.
MR-Axel/skills · ★ 1 · Web & Frontend · score 65
Install: claude install-skill MR-Axel/skills
# UX audit Audit $ARGUMENTS, or the components touched by the working diff. Read the design system section of `.claude/project-profile.md` first. If the project has no design system recorded, **say so at the top of the report**, point at [`design-system`](../design-system/) for establishing one, and audit only responsiveness, accessibility and interaction states. Consistency findings need a stated standard to be consistent with; without one they are your taste, and you should not report your taste as a finding. ## 1. Accessibility The highest-value section, because these are real defects for real users and they are almost always cheap to fix. Target WCAG 2.1 AA unless the profile says otherwise. - Every interactive element has an accessible name: visible text, `aria-label`, or a labelled icon. An icon-only button with no label is invisible to a screen reader. - Form inputs are associated with labels, not merely placed near text that looks like one. - Placeholder text is not doing a label's job. - Focus is visible on every interactive element, and focus order follows reading order. - Everything reachable by mouse is reachable by keyboard. Custom dropdowns, modals and menus are where this breaks: check escape-to-close and focus trapping. - Images have `alt`, and decorative images have empty `alt`, not a filename. - Color is never the only carrier of meaning. - Text contrast meets 4.5:1 (3:1 for large text). Check the actual token values from the profile rather than e