tailwind-spacing-auditlisted

This skill should be used when the user mentions uneven spacing, alignment issues, inconsistent gaps between elements, mixed margin/gap strategies, navbar or toolbar spacing problems, or asks to "clean up", "normalize", or "audit" spacing in a Tailwind component. This skill also applies when reviewing UI code where flex/grid containers use a mix of gap-*, margin (m*, me-*, ms-*), padding, and fixed widths to space sibling elements — even if the user doesn't explicitly say "spacing." If someone pastes a nav bar, toolbar, header, or action bar and says "something looks off," this skill is almost certainly what they need.
tony/ai-workflow-plugins · ★ 1 · Web & Frontend · score 68

Install: claude install-skill tony/ai-workflow-plugins

# Tailwind Spacing Audit & Refactor Systematically detect and fix inconsistent spacing in Tailwind CSS v4+ layouts. The root cause of most spacing bugs is **fragmented spacing authority** — multiple competing mechanisms (gap, margin, padding, fixed widths) controlling the space between the same set of visual peers. Use `$ARGUMENTS` as the target scope. If `$ARGUMENTS` is empty, ask the user which component or file to audit. ## Philosophy Good spacing has one property: **a single source of truth per spacing relationship.** Every pair of adjacent items should have exactly one class/mechanism determining the space between them. When `gap-2` appears on a parent AND `me-1` on a child AND `ms-2` on a sibling, three competing authorities produce visual noise. The goal is never "make all numbers the same" — it's to ensure each spacing decision is intentional, non-redundant, and traceable to one mechanism. ## Workflow ### Step 0: Detect Framework Before auditing, detect the project's templating framework to determine which attribute name and file globs to use throughout the audit. Scan the project for template files: - `*.tsx` / `*.jsx` — React (`className=`) - `*.vue` — Vue (`class=`, `:class=`) - `*.svelte` — Svelte (`class=`) - `*.astro` — Astro (`class=`) - `*.html` — plain HTML (`class=`) - `*.erb` — Rails ERB (`class=`) - `*.blade.php` — Laravel Blade (`class=`) Use the detected attribute name(s) and file globs for all subsequent search commands. If multiple framework