Validate design system tokens against WCAG AA/AAA contrast and focus requirements.
npx skills add https://github.com/ryan0122/a11ypros --skill design-system-ryan0122
Please help me install this Agent Skill. Skill: design-system Source: https://github.com/ryan0122/a11ypros/tree/main/.github/skills/design-system Command: npx skills add https://github.com/ryan0122/a11ypros --skill design-system-ryan0122
This Skill addresses the critical accessibility issue of ensuring design tokens (colors, spacing, focus indicators) meet WCAG AA/AAA contrast and size requirements before they are implemented in UI, preventing costly redesigns and ensuring compliance.
Use the design-system skill to validate the contrast ratio between the color tokens '#6B7280' and '#FFFFFF'.
High-intent search queries and answers about installing and using this skill.
To validate design tokens for WCAG AA contrast ratios, use this Skill to compute the exact contrast ratio between your color pairs and verify they meet accessibility thresholds before implementation.
Yes, you can check WCAG focus indicator compliance for Tailwind and shadcn/ui by mapping framework-specific token paths and auditing focus ring implementations against WCAG 2.4.13 size and contrast requirements.
The best way to audit color contrast in a design system is to automatically evaluate all color token pairs against WCAG AA and AAA thresholds using JavaScript for accurate contrast computation and severity classification.
Yes, this tool supports MUI and Chakra token path mapping by identifying relevant token paths in popular frameworks to ensure accurate accessibility validation across your design system.
To verify focus ring width meets WCAG 2.4.13 requirements, use this Skill to audit your focus ring implementations and ensure they are at least 2px wide with sufficient contrast against their background.
Your design tokens fail WCAG accessibility standards when color pairs lack sufficient contrast ratios or focus indicators do not meet size and appearance requirements, which this Skill identifies through severity classification.
josephblaisValidate design system tokens against WCAG AA/AAA accessibility standards.
Community-AccessAudit design system tokens for WCAG AA and AAA accessibility compliance.
dodygValidate design token accessibility and consistency across Tailwind, MUI, Chakra, and shadcn.
tsuji-tomonoriValidate UI elements for WCAG 2.2 AA color contrast requirements.
