Design System Auditor
OfficialAudit design tokens for accessibility.
Design & Creative#accessibility#WCAG#design system#design tokens#color contrast#touch targets#focus styles
AuthorCommunity-Access
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill proactively identifies and rectifies accessibility issues like poor color contrast, insufficient focus indicators, and inadequate touch target sizes directly within design tokens, preventing them from reaching deployed UI.
Core Features & Use Cases
- Color Contrast Auditing: Validates WCAG AA/AAA contrast ratios for text, UI components, and focus rings against background colors. Supports various token formats (Style Dictionary, CSS variables, Tailwind, MUI, Chakra UI).
- Focus Appearance Validation: Checks for minimum focus ring size (>= 2px), sufficient contrast change (>= 3:1), and ensures focus styles are not removed.
- Spacing & Touch Target Analysis: Ensures interactive elements meet minimum size requirements (24x24px) and have adequate spacing.
- Motion Token Compliance: Verifies adherence to
prefers-reduced-motionprinciples. - Use Case: Before merging a new color palette into your design system, run this Skill to ensure all text and background combinations meet WCAG AA contrast standards, preventing costly redesigns later.
Quick Start
Audit the color tokens in the attached 'tokens.json' file for WCAG AA compliance.
Dependency Matrix
Required Modules
None requiredComponents
scriptsreferences
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: Design System Auditor Download link: https://github.com/Community-Access/accessibility-agents/archive/main.zip#design-system-auditor Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.