Audit Tailwind CSS codebases for spacing, sizing, and responsive anti-patterns.
npx skills add https://github.com/ruchernchong/claude-kit --skill tailwind-ruchernchong
Please help me install this Agent Skill. Skill: tailwind Source: https://github.com/ruchernchong/claude-kit/tree/main/skills/tailwind Command: npx skills add https://github.com/ruchernchong/claude-kit --skill tailwind-ruchernchong
Tailwind projects often drift into anti-patterns that reduce consistency and increase maintenance costs. This Skill audits Tailwind usage to enforce spacing direction, size-* usage, gap preference, and 8px grid alignment.
Use Case: A frontend team standardizes Tailwind usage across a large React/Next.js/Vue project to ensure predictable spacing and sizing.
Run the Tailwind audit against your codebase to identify anti-patterns and apply fixes according to the rules above.
High-intent search queries and answers about installing and using this skill.
To audit Tailwind CSS for inconsistent spacing and sizing, run an audit against your codebase to identify anti-patterns, enforcing bottom-only spacing, size-* usage, gap preferences, and 8px grid alignment for improved consistency and maintainability.
Common Tailwind CSS anti-patterns include using mt-* and pt-* instead of bottom-only mb-* or pb-* spacing, misusing h-* and w-* when size-* is preferred, and neglecting mobile-first responsive design and 8px grid alignment across components.
Yes, this Tailwind CSS lint workflow is applicable to frontend projects built with React, Vue, and Next.js, guiding teams to standardize spacing direction, sizing utilities, and mobile-first responsive rules across the entire codebase.
Enforce a consistent 8px grid and mobile-first design in Tailwind by auditing your codebase to identify rule violations, guiding developers to apply standardized spacing, sizing utilities, and responsive prefixes correctly across all components.
Use size-* utilities in Tailwind CSS when an element requires equal width and height, and reserve h-* and w-* utilities only when the dimensional values differ, ensuring consistent sizing practices and reducing codebase maintenance overhead.
berkcangumusisikRemove unused Tailwind classes and consolidate repeated patterns into components.
wildbitcaApply Tailwind CSS 4 patterns to React projects with cn() and design tokens.
Lyiu-10Apply Tailwind CSS v4.1+ utility classes for responsive, dark mode-supported component styling.
calexandarApplies Tailwind CSS v4 utilities to style components following project conventions.
