Frontend Tailwind Best Practices

A solid set of opinionated Tailwind conventions that pushes you toward custom stack utilities (v-stack, h-stack) instead of raw flex classes, and enforces the cn() merge pattern for every className prop. The layout rules are the real win here, especially preferring gap over child margins and the responsive stack switching pattern. Also includes guidance on class-based dark mode, affordance patterns, and capability-based responsive design (pointer-coarse vs device sizes). It's prescriptive in a good way. If you're starting a new project or tired of flex flex-col gap-4 everywhere, this gives you a cleaner vocabulary. Just know you'll need to set up those custom utilities in your Tailwind config first.

Install to Claude Code

npx -y skills add sergiodxa/agent-skills --skill frontend-tailwind-best-practices --agent claude-code