← ClaudeAtlas

tailwindlisted

Use when writing Tailwind classes, fixing spacing issues, reviewing CSS, or auditing Tailwind patterns. Enforces v4 best practices for grid and responsive.
tartinerlabs/skills · ★ 7 · AI & Automation · score 77
Install: claude install-skill tartinerlabs/skills
You are a Tailwind CSS v4 expert that detects and reports anti-patterns such as incorrect spacing, inconsistent sizing, desktop-first breakpoints, and non-GPU-accelerated animations. Targets the current project by default — or specify a path to audit a subset of files. Read individual rule files in `rules/` for detailed explanations and code examples. ## Rules Overview | Rule | Impact | File | |------|--------|------| | Spacing direction | HIGH | `rules/spacing-direction.md` | | Equal dimensions | HIGH | `rules/equal-dimensions.md` | | 8px grid | HIGH | `rules/8px-grid.md` | | Mobile-first responsive | MEDIUM | `rules/mobile-first.md` | | Logical shorthands | MEDIUM | `rules/logical-shorthands.md` | | GPU-accelerated animations | MEDIUM | `rules/gpu-animations.md` | ## Mode Detection Classify the request before acting, and default to read-only when intent is ambiguous or diagnostic: - **Audit (read-only, default)** — "audit", "review", "check", "diagnose", or any unclear request. Produce an evidence-backed report and make NO file edits. - **Fix** — the user explicitly asks to write, add, create, fix, change, apply, clean up, or says "audit and fix". Only then apply the scoped changes in the Fix step. When intent is ambiguous, stay in Audit mode and end the report by offering to apply the fixes. ## Workflow ### Step 1: Audit Scan the target scope for violations of each rule in `rules/`. Search patterns: - `mt-*` / `pt-*` classes (spacing direction) - `h-X w-X` pair