菜单
Use when writing Tailwind classes, fixing spacing issues, reviewing CSS, or auditing Tailwind patterns. Enforces v4 best practices for grid and responsive.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
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.
| 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: