ux-audit

Audits keyboard navigation, focus management, ARIA correctness, and animation timing in UI components.

5|9|Updated Mar 25, 2026
One-click install
npx skills add https://github.com/ajenchen/design-system --skill ux-audit-ajenchen
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ux-audit
Source: https://github.com/ajenchen/design-system/tree/main/.agents/skills/ux-audit
Command: npx skills add https://github.com/ajenchen/design-system --skill ux-audit-ajenchen

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Visual, code, and performance audits all miss behavioral bugs: keyboard-only users get stuck, screen readers miss content, focus never returns to its trigger, and zoom steps jump too coarsely. This Skill closes that gap by auditing the interaction behavior of design-system components and product UI. ## Core Features & Use Cases - Keyboard & Focus Audits: Checks tab order, focus-visible rings, activation keys, arrow-key navigation, Escape-to-close, focus traps, and focus restoration across overlays and state transitions. - ARIA Correctness: Validates roles, aria-label, aria-expanded, aria-selected, aria-live regions, and aria-hidden usage against accessibility expectations. - Animation & Interaction Canonical: Verifies animation durations, prefers-reduced-motion support, wheel zoom step granularity, hover delays, and drag/pan pointer capture. - Five-State Coverage: Tests null-safety, empty, loading, error, and success states plus edge cases like rapid clicks, stale selections, and unmount-time setState. - Use Case: Before merging a new Dialog component, run a full audit to confirm Escape closes it, focus stays trapped inside, focus returns to the trigger on close, and screen readers announce it correctly. ## Quick Start Run a UX behavior audit on the Select component in the design system and report any keyboard, focus, or ARIA failures by severity.

Frequently Asked Questions about ux-audit

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I audit a component for keyboard accessibility?

Run the audit against the component folder to check seven keyboard items: tab order matching visual order, focus-visible rings, Enter/Space activation, arrow-key navigation within groups, Escape closing overlays, focus traps in modals, and focus returning to the trigger on close.

What does a UX behavior audit check that visual or code audits miss?

It checks interaction behavior: keyboard-only operability, focus movement across state transitions, ARIA attribute correctness, animation timing, and reduced-motion support. A component can pass visual, code, and performance checks while still blocking keyboard and screen reader users.

Does the audit fix accessibility issues automatically?

No, the audit is strictly read-only and produces a severity-ranked report (P0/P1/P2) as evidence. Engineering or governance owners consume the findings and perform the actual fixes and verification.

What animation and motion issues does the audit detect?

It flags animations exceeding 400ms that block input, missing prefers-reduced-motion handling, wheel zoom steps coarser than roughly 3-5 percent, incorrect tooltip or hover-card delays, and broken pointer capture during drag or pan.

When should I run a full design-system UX audit versus a scoped one?

Run a full sweep before release cuts or demos, covering all interactive components ordered by complexity. Use a scoped audit for new features, targeting only the new interaction paths of the changed component.