Menü
Use when writing Tailwind classes, fixing spacing issues, reviewing CSS, or auditing Tailwind patterns. Enforces v4 best practices for grid and responsive.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
| name | tailwind |
| description | Use when writing Tailwind classes, fixing spacing issues, reviewing CSS, or auditing Tailwind patterns. Enforces v4 best practices for grid and responsive. |
| license | MIT |
| allowed-tools | Read Glob Grep Edit |
| model | haiku |
| effort | medium |
| compatibility | Requires Tailwind CSS v4; audits any file carrying utility classes (JSX/TSX, Vue, Svelte, Astro, HTML, CSS) |
| metadata | {"short-description":"Tailwind CSS v4 anti-pattern audit."} |
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.
| 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 |
Classify the request before acting, and default to read-only when intent is ambiguous or diagnostic:
When intent is ambiguous, stay in Audit mode and end the report by offering to apply the fixes.
Scan the target scope for violations of each rule in rules/. Search patterns:
mt-* / pt-* classes (spacing direction)h-X w-X pairs where both values match (equal dimensions)p-1, gap-3, m-5 (8px grid)transition-all usage (GPU animations)List all findings grouped by rule:
## Tailwind CSS Audit Results
### HIGH Severity
- `src/components/Card.tsx:15` - `mt-4` → use `mb-4` or `gap` on parent
- `src/components/Avatar.tsx:12` - `h-10 w-10` → `size-10`
### MEDIUM Severity
- `src/components/Button.tsx:8` - `p-3` (12px) → use `p-2` (8px) or `p-4` (16px)
### Summary
| Rule | Violations | Files |
|------|-----------|-------|
| Spacing direction | X | N |
| Equal dimensions | Y | N |
| **Total** | **Z** | **N** |
Skip this step entirely in Audit mode. Only apply changes when the request is in Fix mode (see Mode Detection).
Apply fixes. For each fix:
Use when committing changes, staging files, saving work, or making a git commit. Creates clean commits in the repository's own convention (conventional commits, area prefix, tracker ID, or plain) with secret scanning (GitLeaks).
Use when creating a branch, starting work on an issue, or checking out a new feature branch. Validates branch naming and links to GitHub issues automatically.
Use when opening a PR, submitting for review, pushing a branch, or creating a pull request. Pushes and creates GitHub PRs with auto-assignment and description.
Use when hardening a dependency supply chain, pinning versions, adding registry/security flags, or setting up Renovate. Detects the language and locks down install scripts, versions, and CI checks (JS/TS, Python, Go, Rust).
Use when adding CI/CD, creating workflows, auditing GitHub Actions, or fixing action pinning. Creates and audits workflows for SHA pinning and permissions.
Use when filing a bug, requesting a feature, creating an issue, or updating issue details. Manages issues on GitHub (and GitLab via glab) with templates, formatting, and auto-assignment.