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

•

Herramientas de Diseño

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

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.

Características Principales

01Granular violation reporting with exact file locations and line numbers

022 GitHub stars

03Deep scan for hardcoded Tailwind color utilities in bg, text, and border classes

04Interactive auto-fixing for simple color violations and token replacements

05Design token validation against your specific tailwind.config.mjs

06Detection of rendering inconsistencies in custom namespaced color tokens

Casos de Uso

01Ensuring design system compliance before merging new UI components

02Auditing large repositories for inconsistent color usage and rendering bugs

03Refactoring legacy code to replace hardcoded hex codes with design tokens

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add imsaif/aiex design-audit

For use in Claude.ai and ChatGPT

Download Skill