skills.rest
bilacchi
bilacchiCOMMUNITY
Explore all skills by this author →
GitHub

tailwind-design-system

Build Tailwind CSS design systems with design tokens, CVA component variants, and dark mode theming.

Updated Jun 12, 2026
Search Tags:#theming#design system#design tokens#tailwind css#dark mode#react components#cva
One-click install
npx skills add https://github.com/bilacchi/agents-skills --skill tailwind-design-system-bilacchi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-design-system
Source: https://github.com/bilacchi/agents-skills/tree/main/skills/tailwind-design-system
Command: npx skills add https://github.com/bilacchi/agents-skills --skill tailwind-design-system-bilacchi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires tailwindcss, class-variance-authority, clsx, tailwind-merge, tailwindcss-animate, react-hook-form, zod, @radix-ui/react-dialog, and includes references (resource) components.

What problem does it solve? Building a consistent component library with Tailwind CSS requires coordinating design tokens, variant systems, responsive layouts, and dark mode, which is error-prone when done ad hoc. This Skill provides proven patterns and ready-to-adapt code for creating a production-grade design system. ## Core Features & Use Cases - Design Token Architecture: Set up semantic color tokens with CSS variables and HSL values, wired into tailwind.config.ts for runtime theming and dark mode. - Component Patterns: Implement CVA-based variant components (Button, Card, Input, Grid), compound components, and accessible form controls with React Hook Form and Zod validation. - Theming & Animation: Add class-based dark mode with a ThemeProvider, plus animation utilities using tailwindcss-animate for dialogs and dropdowns. - Use Case: When scaffolding a new React app's UI layer, use this Skill to generate a themed Button component with variants, a responsive grid system, and a working dark mode toggle. ## Quick Start Use the tailwind-design-system skill to create a themed Button component with CVA variants and dark mode support for my React project.

Frequently Asked Questions about tailwind-design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a Tailwind design system with design tokens?▼

Define semantic color tokens as HSL CSS variables in globals.css, then map them in tailwind.config.ts using hsl(var(--token)) syntax. This creates a three-layer hierarchy from brand tokens to semantic tokens to component tokens, enabling runtime theming.

How to build variant components with CVA and Tailwind?▼

Use class-variance-authority to define base styles plus variant and size options, then merge with the cn utility combining clsx and tailwind-merge. This gives type-safe props like variant="destructive" and size="lg" on React components.

Does Tailwind dark mode work with CSS variables?▼

Yes, set darkMode to 'class' in the Tailwind config and define a .dark selector overriding the CSS variable values. A ThemeProvider toggles the class on the root element and persists the choice in localStorage.

What is the difference between shadcn/ui and a custom Tailwind component library?▼

The patterns in this Skill follow the shadcn/ui approach: you own the component source code built on Radix primitives and CVA, rather than importing a prebuilt package. This allows full customization of tokens, variants, and accessibility behavior.

When should I not use Tailwind for a design system?▼

Avoid this approach when the task is unrelated to Tailwind-based UI development or requires a different styling paradigm. Also do not treat generated output as a substitute for environment-specific validation, testing, or accessibility review.

Related Skills

Explore More Software Engineering Skills→
wredziowredzio

using-tailwind-design-tokens

Enforce Tailwind design tokens from globals.css in TSX/CSS files.

Community
Basic
gulati8gulati8
3

e2e-regression-testing

Generates Playwright-based end-to-end regression suites with nine-phase workflow and CI-ready artifacts.

Community
Advanced
doanchienthangdevdoanchienthangdev
4

building-with-shadcn

Create accessible React UIs with shadcn/ui components and Radix primitives.

Community
Intermediate
google-labs-codegoogle-labs-code
8.2k

shadcn-ui

Integrates and customizes shadcn/ui components in React applications using Tailwind CSS.

Official
Advanced