Skills
.Work. You
Rest

tailwind-v4-css-variables-enforcer

Community

Enforce Tailwind v4 and CSS variable usage.

Design & Creative#frontend#tailwind#lint#design-system#css-variables#tailwind-v4#ui-audit
AuthorDaFum
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Audit UI changes to ensure Tailwind v4 syntax and CSS variable usage align with design-system rules and prevent hardcoded colors.

Core Features & Use Cases

  • Detects hardcoded color values across src/index.css and UI components, flags Tailwind v3 bracket-variable usage, and verifies CSS variable token adoption.
  • Recommends compliant replacements that align with the project CSS variables, enabling quick handoffs for design-system compliance.
  • Use Case: A UI team discovers inconsistent color usage across components and runs this audit to bring all styles in line with v4 conventions.

Quick Start

Run the audit-tailwind-v4.sh script to scan for v3 syntax and hardcoded colors and generate a report.

Dependency Matrix

Required Modules

None required

Components

scriptsreferences

💻 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: tailwind-v4-css-variables-enforcer
Download link: https://github.com/DaFum/neurotoxic-game/archive/main.zip#tailwind-v4-css-variables-enforcer

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 223,000+ vetted skills library on demand.