Works with the AI Agents you already use
Claude Code
Cursor
Codex CLI
DeepSeek
Muse+22 moreClaude CodeCursorCodex CLIDeepSeekMuse
Dots
Manus
Grok
Grok Bot+18 agentsTailwind CSS Review & Optimizer
Reviews Tailwind CSS code across 5 dimensions — class redundancy, v3→v4 migration, design token usage, and accessibility (both Tailwind classes and HTML structure) — then applies the fixes you approve.
Free
Tailwind CSS Review & Optimizer
Example session with this skill installed
Review the Tailwind classes in index.html and fix what's safe to auto-fix.
- Read your context and instructions
- Compiled the tailwind css review
- Generated the design tokens stylesheet
Tailwind CSS Review Results — index.html (v4)
Summary
| Dimension | Count |
|---|---|
| Class redundancy | 4 |
| v4 migration | 8 |
| Design tokens | 5 |
| Accessibility (Tailwind) | 2 |
| HTML structure a11y | 6 |
| Total | 25 |
Sample findings
[Redundancy] index.html:9
Issue: `flex` and `block` are both specified
Fix: <header class="flex items-center justify-between px-6 py-4">
[Shared Classes] index.html:27,31,35
Issue: 3 feature cards all have "bg-white p-6 rounded shadow-sm flex-shrink flex-grow"
Fix: move to the grid parent via *:
[v4 Migration] index.html:21
Issue: `bg-opacity-90` removed in v4 → slash syntax; `shadow-sm` renamed to `shadow-xs`
Fix: bg-[#294779]/90 shadow-xs
[Token] index.html:26
Issue: gap-[52px] is not in the common table but is a clean /4 step (52/4=13)
Fix: gap-13
[HTML a11y] index.html:19,25,43,56
Issue: Heading hierarchy skips from <h1> straight to <h3> (no <h2> anywhere)
Fix: change section headings from <h3> to <h2>
19 of 25 findings were auto-applied. 2 findings (footer contrast on text-gray-400/bg-gray-900, and two hardcoded colors with no @theme/DESIGN.md defined yet) were flagged for manual review only — contrast needs visual/WCAG verification, and colors need a design-token decision this skill won't make on its own.
Before / After (excerpt)
<!-- Before -->
<header class="flex block items-center justify-between px-6 py-4">
<nav class="flex space-x-6">
<a class="text-gray-800 hover:text-blue-600" href="#features">Features</a>
<a class="text-gray-800 hover:text-blue-600" href="#pricing">Pricing</a>
<a class="text-gray-800 hover:text-blue-600" href="#faq">FAQ</a>
</nav>
</header>
...
<a href="#" class="mt-8 inline-block bg-[#294779] bg-opacity-90 text-white px-6 py-3 rounded shadow-sm">GET STARTED</a>
<!-- After -->
<header class="flex items-center justify-between px-6 py-4">
<nav aria-label="Main navigation" class="flex gap-6 *:text-gray-800 *:hover:text-blue-600">
<a href="#features">Features</a>
<a href="#pricing">Pricing</a>
<a href="#faq">FAQ</a>
</nav>
</header>
...
<button type="button" class="mt-8 inline-block bg-[#294779]/90 text-white px-6 py-3 rounded shadow-xs uppercase">Get started</button>
Summary
tailwind-review complete (Tailwind v4, full page)
Fixes applied:
- 4 redundancy fixes (flex+block removed, 3 groups consolidated via *:)
- 8 v4 migration fixes (space-x/y → gap, bg-opacity → slash syntax, flex-shrink/grow → shrink/grow,
shadow-sm → shadow-xs ×3, bg-gradient-to-r → bg-linear-to-r, outline-none → outline-hidden)
- 2 design-token scale fixes (w-[320px] → w-80, gap-[52px] → gap-13)
- 3 typography suggestions applied (leading-tight added to text-xs)
- 1 Tailwind a11y fix (uppercase class instead of literal caps in HTML)
- 6 HTML structure a11y fixes (nav aria-label, CTA converted to <button>, 2× button type,
label added for the email input, 3 heading levels fixed h3 → h2)
Flagged, not auto-applied (advisory only, by design):
- footer text-gray-400 on bg-gray-900 — contrast warning, needs visual/WCAG verification
- 2 hardcoded colors — no @theme/DESIGN.md defined yet, flagged for future token definition
index.html
CSS · design tokens
Example file from a real run - the skill writes it into your workspace.
Connects securely to your tools. The creator never sees your data.
About this skill
Tailwind projects accumulate small rot over time: conflicting classes left over from edits, v3-era utilities that quietly changed meaning in v4, one-off hex colors that should have been design tokens, and accessibility gaps that don't show up until a screen reader hits them. This skill checks all of that in one pass, framework-agnostic, and fixes what's safe to fix automatically.
What it does
- Detects conflicting or redundant classes on the same element (flex + block, w-full + w-1/2), and finds groups of siblings that share classes worth consolidating with Tailwind's `*:` variant
- Detects your Tailwind version and flags v3-era classes that were removed, renamed, or silently changed scale in v4 (opacity utilities, flex-shrink/grow, shadow/blur/rounded scale shifts, gradients, and more) — offers a full v3→v4 migration when needed
- Finds hardcoded arbitrary values (`text-[#294779]`, `w-[320px]`, `font-['Inter']`) and suggests replacing them with your DESIGN.md tokens, your `@theme` variables, or the closest built-in Tailwind scale value — including computing the correct spacing step even for values not in any reference table
- Flags visual accessibility issues Tailwind styling can hide: uppercase text written directly in HTML instead of the `uppercase` class, and low-contrast gray-on-light-background text worth a WCAG check
- Checks HTML structure independent of Tailwind: missing `aria-label` on nav, buttons without a `type`, inputs relying on placeholder instead of a label, and heading hierarchy skips
- Applies auto-fixable items (redundancy, v4 renames, scale conversions) after you confirm — advisory-only items like contrast warnings are reported but never silently changed
How it works
- Detects your Tailwind version from package.json / tailwind.config.js / your CSS entry file, and reads DESIGN.md if present as the top-priority reference for design tokens
- Scans every HTML / JSX / TSX / Vue / Astro file with Tailwind classes across the 5 review dimensions
- Presents a full findings report grouped by dimension, with a total count and file/line references
- Asks whether to apply the auto-fixable items, review file by file, or stop after the report
- Applies approved fixes directly with the Edit tool, leaving advisory-only findings (contrast, undefined design tokens) as recommendations
What it is not
This reviews code already written in Tailwind. If a project isn't using Tailwind yet (plain CSS, Sass/SCSS), use a migration skill first to get Tailwind classes in place — this skill has nothing to review until then. It also doesn't invent design tokens on your behalf: if no DESIGN.md or `@theme` exists, hardcoded colors are flagged for you to decide on, not silently converted to a guessed token name.
Requirements
Framework-agnostic — works on `.html`, `.tsx`, `.jsx`, `.vue`, and `.astro` files using either `class=` or `className=`. No specific framework or build tool is required; Tailwind version is auto-detected where possible, or you'll be asked once.
Find more skills like this on the Claude Skills Marketplace, the Codex Skills Marketplace and the Gemini Skills Marketplace, or browse Claude Skills for Frontend & Web Apps.
Does not migrate plain CSS/Sass to Tailwind. Excludes classes defined via @apply from redundancy checks. Focuses on existing Tailwind implementations.
How to use
- 1
Connect your agent to the Agensi MCP
Copy the prompt and paste it into Claude, ChatGPT, Cursor or any agent that supports MCP. It sets up the connection for you. Manual setup
- 2
Sign in to Agensi
Your agent shows a sign-in link. Sign in and click Allow.
- 3
Ask for what you need
Your agent loads this skill and uses it on your task. It always asks before buying a skill.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill goes through the trust checks below.
Security scanned
Checked by our 8-point scan before listing
3 uses
Times used to date
Free to use
No account required to browse
Trust & safety
Security scan
Security scan passed 1 month ago
- Free with an Agensi account
Permissions
File Scopes
This skill reads and writes files only within the project you point it at — HTML/JSX/TSX/Vue/Astro files containing Tailwind classes (Read Files, Write Files) — and runs simple Node.js detection scripts locally to find patterns (Terminal). It makes no network calls and installs no dependencies.