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 copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.: 61
skills.sh installs: 72.7K
GitHub stars: 42.4K
last updated: Aug 21, 2026

View on GitHub

Install

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

Installs into .claude/skills of the current project.

Files

Tailwind Design System (v4)

Build production-ready design systems with Tailwind CSS v4, including CSS-first configuration, design tokens, component variants, responsive patterns, and accessibility.