Skills
.Work. You
Rest

design-audit

Community

Spot design system violations fast and precise.

Design & Creative#css#design tokens#design audit#tailwind#lint#color scanning#violation reporting
Authorimsaif
Version1.0.0
Installs0

System Documentation

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

Dependency Matrix

Required Modules

None required

Components

references

💻 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-audit
Download link: https://github.com/imsaif/aiex/archive/main.zip#design-audit

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.