design-token-audit

To audit CSS for design-system drift, the Skill extracts canonical tokens from DESIGN.md, tailwind.config, and CSS variables, then compares implementation values against design specifications to flag hardcoded colors, spacing, and typography deviations.

Design-token drift occurs when CSS implementation values deviate from design system specifications, introducing off-palette colors and non-standard spacing. Auditing detects these hardcoded values to maintain visual consistency during migrations and upgrades.

Yes, you can check Tailwind configuration compliance by extracting token definitions from tailwind.config and DESIGN.md, comparing color, typography, and spacing tokens across both sources to generate a compliance score with actionable recommendations.

To detect hardcoded CSS values, the Skill scans implementation files for non-standard typography and spacing, flagging values that bypass CSS variables and tailwind.config tokens in favor of inline or off-palette styles.

Yes, this audit works for design-system rollouts by surfacing token drift and inconsistencies before release. It compares implemented CSS variables against spec tokens to ensure full compliance during migrations and upgrades.

The best way to generate a design token compliance report is to compare extracted implementation tokens against design specifications, producing a compliance score and concrete recommendations for correcting color, typography, and spacing deviations.