skills.rest
DucCuong159
DucCuong159COMMUNITY
Explore all skills by this author →
GitHub

tailwind-design-system

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

Updated Aug 11, 2026
Search Tags:#react#design system#component library#design tokens#tailwind css#dark mode#cva
One-click install
npx skills add https://github.com/DucCuong159/Realtime-chatapp --skill tailwind-design-system-duccuong159
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-design-system
Source: https://github.com/DucCuong159/Realtime-chatapp/tree/main/.agent/skills/tailwind-design-system
Command: npx skills add https://github.com/DucCuong159/Realtime-chatapp --skill tailwind-design-system-duccuong159

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building a consistent, themeable component library with Tailwind CSS requires coordinating design tokens, variant systems, responsive layouts, and accessibility patterns, which is error-prone when done ad hoc across a codebase. ## Core Features & Use Cases - Design Token Architecture: Implements a three-tier token hierarchy (brand, semantic, component) using CSS variables and HSL color channels for runtime theming and dark mode. - Type-Safe Component Variants: Provides CVA (Class Variance Authority) patterns for buttons, cards, inputs, grids, and dialogs with forwardRef composition and accessibility attributes. - Theming & Animation: Includes a ThemeProvider with system preference detection, dark mode toggling, and tailwindcss-animate enter/exit animation utilities. - Use Case: When standardizing UI across a React application, apply this Skill to scaffold a shadcn/ui-style component library with semantic colors, form validation states, and responsive grid primitives. ## Quick Start Ask the AI to create a Tailwind design system with semantic color tokens, a CVA-based Button component, and dark mode support for your 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 component library with Tailwind CSS?▼

Define semantic color tokens as CSS variables, then build components with CVA for type-safe variants covering base styles, sizes, and states. Use forwardRef and a cn utility combining clsx and tailwind-merge for composable class names.

How to implement dark mode in Tailwind CSS?▼

Set darkMode to 'class' in the Tailwind config and define light and dark CSS variable sets under :root and .dark selectors. A ThemeProvider toggles the class on the document root and respects the system prefers-color-scheme setting.

What is CVA and when should I use it with Tailwind?▼

CVA (Class Variance Authority) generates type-safe class strings from variant definitions like size and intent. Use it when components need multiple visual variants, since it provides TypeScript autocomplete and default variant handling.

Does this approach work with React Hook Form and Zod?▼

Yes, the form components accept error props and ARIA attributes that integrate with React Hook Form's register API and Zod schema validation via zodResolver. Error messages render with role="alert" and aria-describedby linkage.

Why should I avoid arbitrary values in Tailwind?▼

Arbitrary values bypass the design token system, causing inconsistency and breaking runtime theming. Extend the theme configuration with semantic tokens instead so colors and spacing stay centralized and dark-mode compatible.

Related Skills

Explore More Design & Creative Skills→
musher-devmusher-dev

writing-visual-identity

Define color tokens, typography systems, and spatial rules for marketing pages.

Official
Advanced
TheBushidoCollectiveTheBushidoCollective
187

storybook-component-documentation

Generate Storybook component documentation with autodocs, MDX pages, and JSDoc comments.

Official
Intermediate
asmortongptasmortongpt

visual-testing

Automate Playwright visual regression, accessibility, and performance checks across browsers.

Community
Advanced
richardadonnellrichardadonnell
45

radix-ui-design-system

Build accessible React design systems with Radix UI primitives.

Community
Advanced