design-token-audit

Extract design tokens from DESIGN.md, tailwind.config, and CSS variables to compare against implementation.

2|Updated Apr 8, 2026

Search Tags:#css #audit #compliance #tailwind #design-system #design-token

Ready to run

npx skills add https://github.com/krzemienski/validationforge --skill design-token-audit

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-token-audit
Source: https://github.com/krzemienski/validationforge/tree/main/skill-audit-workspace/design-token-audit/skill-snapshot
Command: npx skills add https://github.com/krzemienski/validationforge --skill design-token-audit

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Audit CSS/Tailwind/inline styles against the project's design system specification to detect hardcoded values, off-palette colors, spacing drift, and typography deviations.

Core Features & Use Cases

Extract tokens from DESIGN.md, tailwind.config, and CSS variables to build a canonical token map.
Scan implementation for hardcoded values and non-standard typography/spacing, then flag deviations.
Compare implementation tokens against design-spec tokens, generate a compliance score, and provide concrete recommendations.
Use Case: During design-system migrations or pre-release checks, surface drift before it impacts users.

Quick Start

Run the design token audit on your CSS/Tailwind project to surface token drift and inconsistencies.

Frequently Asked Questions about design-token-audit

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I audit CSS for design-system drift in a Tailwind project?▼

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.

What is design-token drift and how does it impact my stylesheet?▼

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.

Can I check Tailwind configuration compliance against a DESIGN.md specification?▼

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.

How do I detect hardcoded CSS values instead of design tokens?▼

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.

Does this design token audit work for pre-release design-system rollouts?▼

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.

What is the best way to generate a design token compliance report?▼

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.