design-audit

Scan Tailwind UI components for hardcoded colors and design token violations.

3|1|Updated Apr 18, 2025

Search Tags:#css #design tokens #design audit #tailwind #lint #color scanning #violation reporting

Ready to run

npx skills add https://github.com/imsaif/aiex --skill design-audit

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-audit
Source: https://github.com/imsaif/aiex/tree/main/.claude/skills/design-audit
Command: npx skills add https://github.com/imsaif/aiex --skill design-audit

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill identifies design system inconsistencies, hardcoded colors, and design token violations across your codebase, helping teams maintain visual consistency and reduce maintenance time.

Core Features & Use Cases

Color Scanning: Detects hardcoded Tailwind colors and maps them to design tokens.
Design Token Validation: Verifies colors align with tailwind.config.mjs and flags deviations.
Violation Reporting: Produces detailed reports with locations and suggested fixes.
Integration: Can be integrated into pre-commit or CI to enforce design system compliance.

Quick Start

Run: npm run design-audit

You can also audit a subset: npm run design-audit -- src/components/ui
And enable auto-fix: npm run design-audit -- --fix

Frequently Asked Questions about design-audit

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

FAQPage Schema

How do I detect hardcoded colors and design token violations in my Tailwind codebase?▼

Design token validation scans your codebase to identify hardcoded colors and map them against your tailwind.config.mjs, flagging deviations from your design system. Run npm run design-audit to surface violations with file locations and line numbers.

Can I automatically fix design system inconsistencies across my UI components?▼

Yes, the auto-fix flag enables automated correction of design token violations. Run npm run design-audit -- --fix to apply suggested fixes, or audit a subset with npm run design-audit -- src/components/ui for targeted scanning.

What's the best way to enforce design system compliance in a CI pipeline?▼

Integrate design auditing into pre-commit or CI workflows to automatically enforce design token validation before code merges. The Skill generates detailed violation reports with file locations, enabling teams to maintain visual consistency at scale.

Does design token validation work with existing Tailwind configurations?▼

Yes, the Skill integrates directly with tailwind.config.mjs to compare tokens and flag rendering issues. It validates hardcoded Tailwind colors against your configuration to identify design system deviations.

Why should I scan for hardcoded colors instead of relying on code review?▼

Automated color scanning detects hardcoded values across your entire codebase instantly, catching inconsistencies that manual review misses. Violation reports pinpoint exact file locations and line numbers for rapid remediation.