accessibility-audit

Run the existing axe test gate first with npm run test, then audit the component's .tsx and .css source for semantic HTML, ARIA, keyboard handling, and focus styles. Finish with screenshots in both themes to check colour contrast ratios against WCAG 1.4.3 and 1.4.11.

Axe catches roughly a third of WCAG issues. It cannot judge whether alt text is meaningful, whether focus order makes sense, whether helper messages are properly associated, or whether motion respects prefers-reduced-motion, so these require manual review.

The rule is off by a settled decision because the action colour is a token consumers re-point to their own palettes, so the gate would judge a value the system does not own. Contrast checking is therefore the manual auditor's highest-priority job.

Yes. It checks CSS motion through the reduced-motion block in tokens-motion.css and greps for prefers-reduced-motion in JavaScript-driven animations, since requestAnimationFrame loops are outside CSS guard coverage. Recharts charts rely on the isAnimationActive auto default.

Yes. The skill accepts a page URL and audits the live rendered page via screenshots in light and dark mode. A page-level axe pass already covers a route sample at desktop viewport, so full-site sweeps and mobile viewports remain manual work.