Audits frontend design systems for token consistency, accessibility compliance, and CSS technical debt.
The Design System Auditor is a specialized Claude Code skill designed to evaluate and improve the health of your frontend codebase. It inventories design tokens such as colors, typography, and spacing, identifying hardcoded 'magic numbers' and inconsistencies against established standards like Vercel's web interface guidelines. By performing automated WCAG accessibility checks and generating comprehensive debt reports with RAMS scoring, it helps developers transition from fragmented styles to a unified, scalable, and compliant design system.
Key Features
01Detection of hardcoded hex values and CSS 'magic numbers'
02Comprehensive debt reporting with prioritized fix recommendations
03Analysis of Tailwind config and CSS variable consistency
04WCAG accessibility compliance auditing and scoring
055 GitHub stars
06Automated design token inventory for colors, typography, and spacing
Use Cases
01Performing pre-launch UI consistency and accessibility checks
02Refactoring legacy CSS codebases into structured design systems
03Identifying and fixing design debt in large-scale React or Next.js projects
