tartinerlabs/tailwind
skills/tailwind/SKILL.md
Use when writing Tailwind classes, fixing spacing issues, reviewing CSS, or auditing Tailwind patterns. Enforces v4 best practices for grid and responsive.
$ install --global
skillsauthnpx skillsauth add tartinerlabs/skills tailwindInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 15, 2026, 4:10 AM15.3s7 files scanned
SKILL.md
- 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.
- allowed-tools:
- Read Glob Grep Edit
- model:
- sonnet
- effort:
- medium
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 |
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-Xpairs where both values match (equal dimensions)- Odd spacing values like
p-1,gap-3,m-5(8px grid) - Desktop-first breakpoints (mobile-first)
- Verbose individual sides where shorthands apply (logical shorthands)
transition-allusage (GPU animations)
Step 2: Report
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** |
Step 3: Fix
Apply fixes. For each fix:
- Verify the change preserves visual appearance
- Keep changes minimal — only fix the identified issue
- Adjust surrounding elements when changing spacing direction
Related Skills
tartinerlabs/setup
development
VerifiedTrustedCommunity
Use when setting up a project, adding linting, formatting, git hooks, or TypeScript. Installs Biome, Husky, commitlint, lint-staged, and GitLeaks for JS/TS.
7SKILL.mdUpdated Apr 15, 2026
tartinerlabs/security
testing
VerifiedTrustedCommunity
Use when auditing security, checking for vulnerabilities, scanning for secrets, or reviewing dependencies. OWASP Top 10 audit with GitLeaks and dependency checks.
7SKILL.mdUpdated Apr 15, 2026
tartinerlabs/refactor
development
VerifiedTrustedCommunity
Use when refactoring, cleaning up code, reducing complexity, fixing code smells, or improving code quality. Audits TS/JS for dead code, nesting, and patterns.
7SKILL.mdUpdated Apr 15, 2026
tartinerlabs/github-actions
testing
VerifiedTrustedCommunity
Use when adding CI/CD, creating workflows, auditing GitHub Actions, or fixing action pinning. Creates and audits workflows for SHA pinning and permissions.
7SKILL.mdUpdated Apr 15, 2026