Skill UI

Orchestrates WCAG 2.2 Level A/AA scans, fixes, and verifications across React, Next.js, Vue, Angular, Svelte, and plain HTML codebases, producing before/after diffs, contrast checks, compliance reports, and CI/CD-ready hooks.

Provides a comprehensive audit of a UI component or page to ensure WCAG 2.2 AA accessibility compliance. This tool systematically checks for critical issues like insufficient color contrast, poor keyboard navigability, missing alt text, and non-semantic HTML usage. It helps developers integrate robust accessibility checks directly into their design system workflow, improving product usability for all users.

This skill provides a comprehensive review of UI components and codebases to ensure strict adherence to established design systems, accessibility guidelines (WCAG), and modern front-end best practices. It checks for design token compliance (e.g., semantic colors, scaled spacing), component conventions, WCAG accessibility standards (a11y), mobile responsiveness, and visual coherence across the entire application.

A comprehensive guide to building highly accessible user interfaces using React and Next.js. Covers best practices for semantic HTML, proper ARIA attribute usage, managing form labels and error states, and ensuring full keyboard navigation support. Essential when developing any interactive component or form.