tailwind-audit

w3bsuki's avatarfrom w3bsuki

Tailwind v4 + shadcn token/theme audit. Triggers on "TAILWIND:" prefix.

⭐0stars🔀0forks📁View on GitHub🕐Updated Jan 11, 2026
[Code Review]

When & Why to Use This Skill

The Tailwind Audit skill is a specialized developer tool designed to automate theme and token audits for Tailwind CSS v4 and shadcn/ui projects. It proactively scans codebases for styling anti-patterns, such as arbitrary values and hardcoded colors, while ensuring alignment with official documentation and project-specific design tokens to maintain high-quality frontend standards.

Use Cases

  • Design System Compliance: Automatically scan projects to identify and eliminate arbitrary values (e.g., h-[42px]) and hardcoded colors that deviate from the established design tokens.
  • Tailwind CSS v4 Migration: Streamline the upgrade process to Tailwind v4 by auditing palettes, gradients, and token definitions against the latest framework requirements.
  • Shadcn/UI Theme Auditing: Ensure consistent implementation of shadcn/ui components by cross-referencing project registries and verifying dark mode variant coverage.
  • Automated Quality Gates: Integrate styling audits into the development workflow to flag critical CSS issues and anti-patterns before they reach production.
nametailwind-audit
descriptionTailwind v4 + shadcn token/theme audit. Triggers on "TAILWIND:" prefix.

Tailwind Audit Skill

On "TAILWIND:" Prompt

  1. Run palette/gradient scan: pnpm -s exec node scripts/scan-tailwind-palette.mjs
  2. Check app/globals.css for token definitions
  3. Grep for arbitrary values: \[\d+px\], \[\d+rem\], text-\[
  4. Cross-reference with Context7 Tailwind v4 docs
  5. Output findings in Phase 1 Audit format

MCP Commands

mcp_io_github_ups_resolve-library-id({ libraryName: "tailwindcss" })
mcp_io_github_ups_get-library-docs({ context7CompatibleLibraryID: "/tailwindlabs/tailwindcss", topic: "theme" })
mcp_shadcn_get_project_registries()
mcp_shadcn_list_items_in_registries({ registries: ["@shadcn"] })

Anti-Patterns to Flag

  • bg-gradient-*, from-*, to-* (no gradients rule)
  • h-[42px], text-[13px] (arbitrary values)
  • Hardcoded colors not in theme
  • Missing dark mode variants for custom colors

Output Format

## Tailwind Lane Phase 1 Audit — {date}

### Critical (blocks Phase 2)
- [ ] Issue → File → Fix

### High (do in Phase 2)
- [ ] Issue → File → Fix

### Deferred (Phase 3 or backlog)
- [ ] Issue → File → Fix

Gates

After any fix:

pnpm -s exec tsc -p tsconfig.json --noEmit
REUSE_EXISTING_SERVER=true pnpm test:e2e:smoke

Docs

Topic File
Design tokens docs/DESIGN.md
Styling guide docs/styling/README.md
Globals CSS app/globals.css