Tailwind Design System

Builds component libraries with Tailwind v4's new CSS-first configuration, swapping out the old JavaScript config for @theme blocks and native CSS variables. Generates CVA-based components with proper variant handling, sets up semantic design tokens using OKLCH color space, and implements dark mode with @custom-variant instead of the old class strategy. Most useful when migrating from v3 or starting fresh design systems where you need consistent theming across components. The OKLCH color approach alone makes this worth using since it handles color perception way better than HSL, and the CSS-first config eliminates a lot of build complexity.

Install to Claude Code

npx -y skills add wshobson/agents --skill tailwind-design-system --agent claude-code