tailwind-design-system

The tailwind-design-system skill guides the creation and management of a centralized design system built on Tailwind CSS (v4.1+) and shadcn/ui. Rather than covering individual utilities or component installs, it focuses on system-level orchestration: defining design tokens, standing up theming infrastructure with CSS variables, and wrapping shadcn/ui primitives so an entire application stays visually consistent. It positions itself alongside two sibling skills -- one for utility-first Tailwind patterns and one for shadcn/ui component work -- and takes the coordinating role between them.

It is intended for setting up a design system from scratch, defining tokens for colors, typography, spacing, radius, and shadows, configuring globals.css with light and dark modes, migrating from a JavaScript Tailwind config to CSS-first configuration, and establishing oklch color palettes for perceptual uniformity. The instructions follow five steps: initialize the Tailwind and shadcn/ui configuration, define design tokens as CSS variables, bridge those variables to Tailwind utilities with the theme inline directive, wrap shadcn/ui components into constrained design-system primitives, then validate and document. Each step includes a validation checkpoint, for example counting defined tokens or checking that wrapped components reference design-system tokens.

Beyond the basics it shows how to add custom tokens with light and dark values, support multiple brand themes through data-theme selectors such as ocean or forest, and keep wrapper components thin so they enforce token usage without duplicating shadcn/ui logic. Constraints call out that oklch is not universally supported in older browsers and that every token should define a dark-mode value to avoid missing styles.