--- name: tailwind-review description: > Skill for reviewing, optimizing, and migrating Tailwind CSS code, including HTML accessibility checks. Always use this skill when: · Asked to "review", "clean up", "check", or "look at" Tailwind classes · v3 classes like `space-y-*`, `space-x-*`, `flex-shrink`, `shadow-sm`, `bg-opacity-*` are present · Hardcoded arbitrary values like `text-[#1e40af]` or `w-[320px]` are used · Conflicting or redundant classes like `flex` and `block` on the same element are found · Asked whether to use `cn()` / `clsx`, or whether to consolidate with `*:` variants · Asked to migrate or rewrite from v3 to v4 · Asked to check HTML accessibility structure: `aria-label`, `ul/li`, `button type`, `label`, etc. · Asked to review `.html`, `.tsx`, `.jsx`, `.vue`, or `.astro` files (if Tailwind is used) Framework-agnostic (HTML / React / Vue / Svelte / Astro, etc.). Also use for vague requests like "something looks off with the classes", "the design changed after upgrading to v4", or "migrating from CSS modules". --- # Tailwind CSS Code Review & Optimization Skill ## Overview This skill reviews Tailwind CSS code across 5 dimensions and provides improvement suggestions or applies automatic fixes. --- ## Opening Message Before starting the review, always display the following message to the user: ``` > **Note:** If auto-fixes will be applied, make sure you can revert the changes. > If you're using Git, run `git status` to check for uncommitted changes. > Consider running `git stash` or `git commit` before proceeding if you have unsaved work. ``` After displaying this message, proceed immediately to Step 0 — do not wait for a response. --- ## How to Run the Review ### Step 0: Detect Design System Definitions Before reviewing, check whether a **`DESIGN.md`** exists in the project root. This file may define the project's design tokens (colors, typography, spacing) and takes the highest priority in Dimension 3 suggestions. ```bash # Check for DESIGN.md in common locations ls DESIGN.md 2>/dev/null || ls docs/DESIGN.md 2>/dev/null || ls .design/DESIGN.md 2>/dev/null ``` **If found:** - Read the full file - Extract defined tokens: color names/values, font families, spacing scale, type scale - Store them as **Priority 1** references for Dimension 3 (see priority order below) - Display a brief notice to the user: ``` DESIGN.md found — design tokens defined there will be used as the primary reference for suggestions. ``` **If not found:** proceed without it. `@theme` variables and the built-in Tailwind scale serve as fallbacks. --- ### Step 0.5: Detect Tailwind Version Before starting, detect the project's Tailwind version. This determines how Dimension 2 (v3→v4 migration check) is handled. **Detection steps (check in order, stop at first match):** ```bash # 1. Check version in package.json cat package.json | grep '"tailwindcss"' # 2. Check for tailwind.config.js (a v3 indicator) ls tailwind.config.js 2>/dev/null && echo "found" # 3. Check import style in CSS entry file grep -r "@tailwind\|@import.*tailwindcss" src/ --include="*.css" | head -5 ``` **Decision criteria:** | Detection result | Verdict | |---|---| | `"tailwindcss": "^3.*"` or `"tailwindcss": "3.*"` | **v3** | | `"tailwindcss": "^4.*"` or `"tailwindcss": "4.*"` | **v4** | | `tailwind.config.js` exists | Likely **v3** | | CSS contains `@tailwind base;` | **v3** | | CSS contains `@import "tailwindcss";` | **v4** | | Cannot determine | **Unknown** (see below) | --- **If v3 is detected → ask via `AskUserQuestion`:** > "Tailwind CSS v3 detected. How would you like to proceed?" > > 1. Review only — report issues without rewriting > 2. Migrate to v4 — rewrite to v4 syntax - **Option 1 (Review only):** Dimension 2 reports issues in v3 code only. No rewrites. - **Option 2 (Migration):** Apply all conversions from the Dimension 2 table and rewrite the files. --- **If v4 is detected:** Dimension 2 checks for any v3 patterns that may have slipped in. If v3 patterns are found in a v4 project, report them as bugs. --- **If unknown → ask via `AskUserQuestion`:** > "Could not determine the Tailwind version. Which are you using?" > > 1. v4 > 2. v3 --- ### Step 1: Identify Target Files If no files are specified, search the project for HTML / JSX / TSX / Vue / Svelte files containing Tailwind classes. ```bash grep -rl "class=" . --include="*.html" --include="*.tsx" --include="*.jsx" --include="*.vue" --include="*.astro" | grep -v "node_modules" | grep -v "dist" ``` ### Step 1.5: Confirm Review Scope (HTML files only) Only applies to `.html` files. Skip this step for component files like `.tsx` / `.jsx` / `.vue` — they're already small units. **Read the file and assess its size:** - 80+ lines, or 3+ `
` / `id`-bearing `
` elements → ask about scope - Smaller files → review the whole file without asking **If scope confirmation is needed, auto-detect sections and present them:** Detect section boundaries in this priority order: 1. `
` tags (use `id` or `aria-label` value if present) 2. Top-level `
` blocks 3. `` comment-delimited blocks 4. Semantic elements: `
` / `
` / `