Does it work with custom Tailwind configurations?

Absolutely, it validates your source code specifically against the design tokens defined in your project's tailwind.config.mjs file.

How do I run a scan on a specific directory?

You can target specific folders by passing a path argument to the command, for example: npm run design-audit -- src/components/ui.

What types of issues does it detect?

It detects hardcoded colors, missing tokens, known rendering issues in custom namespaces, and inconsistent color choices across your components.

Can this skill fix design violations automatically?

Yes, the skill includes an interactive fix mode that suggests and applies corrections for identified color violations automatically.

Design System Auditor

Name: Design System Auditor
Author: imsaif

byimsaif

•

Design Tools

Analyzes codebase for Tailwind design system inconsistencies and hardcoded color violations to ensure visual consistency.

About

The Design System Auditor is a specialized tool for frontend developers that automates the process of maintaining UI consistency. By scanning your project's components against your tailwind.config.mjs, it identifies hardcoded color utilities that bypass your design tokens, flags rendering issues within custom namespaces, and generates detailed reports on design debt. It is particularly useful during large-scale refactors or as a pre-commit check to ensure every component adheres to your established design language.

Key Features

Granular violation reporting with exact file locations and line numbers
2 GitHub stars
Deep scan for hardcoded Tailwind color utilities in bg, text, and border classes
Interactive auto-fixing for simple color violations and token replacements
Design token validation against your specific tailwind.config.mjs
Detection of rendering inconsistencies in custom namespaced color tokens

Use Cases

Ensuring design system compliance before merging new UI components
Auditing large repositories for inconsistent color usage and rendering bugs
Refactoring legacy code to replace hardcoded hex codes with design tokens

About

Key Features

Granular violation reporting with exact file locations and line numbers
2 GitHub stars
Deep scan for hardcoded Tailwind color utilities in bg, text, and border classes
Interactive auto-fixing for simple color violations and token replacements
Design token validation against your specific tailwind.config.mjs
Detection of rendering inconsistencies in custom namespaced color tokens

Use Cases

Ensuring design system compliance before merging new UI components
Auditing large repositories for inconsistent color usage and rendering bugs
Refactoring legacy code to replace hardcoded hex codes with design tokens