Tailwind Design System

This handles the system-level orchestration when you're building a design system with Tailwind CSS v4.1+ and shadcn/ui. It walks you through defining design tokens as CSS variables (using oklch for perceptual uniformity), setting up theming infrastructure with light/dark mode support, and wrapping shadcn components into constrained primitives that enforce your token usage. The workflows include validation checkpoints to verify tokens are defined correctly and components are using the right variables. Use this when you need centralized theming and token management, not just one-off component styling. It's opinionated about the CSS-first approach over JavaScript config, which makes sense for modern Tailwind but assumes you're working with newer versions.

skills.sh installs: 4.7K
GitHub stars: 369
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add giuseppe-trisciuoglio/developer-kit --skill tailwind-design-system --agent claude-code

Installs into .claude/skills of the current project.

Files

Tailwind CSS & shadcn/ui Design System

Overview

Expert guide for creating and managing a centralized Design System using Tailwind CSS (v4.1+) and shadcn/ui. This skill provides structured workflows for defining design tokens, configuring themes with CSS variables, and building a consistent UI component library based on shadcn/ui primitives.

Relationship with other skills:

tailwind-css-patterns covers utility-first styling, responsive design, and general Tailwind CSS usage
shadcn-ui covers individual component installation, configuration, and implementation
This skill focuses on the system-level orchestration: design tokens, theming infrastructure, component wrapping patterns, and ensuring consistency across the entire application