Tailwind Patterns

A solid collection of copy-paste Tailwind patterns that covers the stuff you build repeatedly: responsive containers, card layouts, form styles, buttons with proper hover states. The semantic color token system is the standout here, it handles light/dark mode automatically so you're not sprinkling dark: prefixes everywhere or breaking themes with hardcoded colors. Follows mobile-first with the standard six breakpoints and includes navigation, headers, footers, and grid patterns. Works with both Tailwind v3 and v4, pulled from real production code and shadcn/ui patterns. Best used when you're starting a new project or need consistent component scaffolding without reinventing spacing and responsive behavior every time.

Install to Claude Code

npx -y skills add jezweb/claude-skills --skill tailwind-patterns --agent claude-code