Tailwind Design System
Stand up a Tailwind-based component library with semantic tokens, variants, dark mode, and accessible patterns so UI stays consistent as a solo builder ships pages and features.
Overview
Tailwind Design System is an agent skill for the Build phase that implements Tailwind CSS design tokens, component variants, responsive patterns, and accessibility for a consistent component library.
Install
npx skills add https://github.com/sickn33/antigravity-awesome-skills --skill tailwind-design-systemWhat is this skill?
- Maps a 3-level token stack—brand, semantic, and component tokens—for theming without hard-coded colors everywhere.
- Documents a component pipeline: base styles → variants → sizes → states → overrides, aligned with CVA-style APIs.
- Covers class-based dark mode, semantic color roles (primary, destructive, muted), and accessibility-focused component pa
- Includes tailwind.config.ts quick-start with content globs and extended theme hooks for production codebases.
- Supports migrating or extending an existing Tailwind setup and standardizing UI patterns across a growing repo.
- Documents a 3-level design token hierarchy: brand → semantic → component.
- Component architecture follows five layers: base styles, variants, sizes, states, and overrides.
Adoption & trust: 1k installs on skills.sh; 40.1k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your app UI drifts because every screen uses ad-hoc Tailwind classes with no shared tokens, variants, or dark-mode contract.
Who is it for?
Solo builders shipping React or similar frontends who want semantic colors, CVA-style variants, and dark mode wired through tailwind.config and CSS variables.
Skip if: Backend-only services, teams committed to a non-Tailwind stack, or throwaway prototypes where a shared component system is explicitly out of scope.
When should I use this skill?
Creating a component library with Tailwind, implementing design tokens and theming, building responsive and accessible components, standardizing UI patterns, migrating to or extending Tailwind CSS, or setting up dark mod
What do I get? / Deliverables
You get a documented token hierarchy, config and component patterns, and repeatable variant rules so new screens reuse the same Tailwind design system instead of one-off utilities.
- tailwind.config theme extensions and token mapping guidance
- Component variant patterns (base, size, state) suitable for library reuse
- Dark mode and accessibility conventions for shared UI primitives
Recommended Skills
Journey fit
Tailwind design-system work happens while you are actively building the product UI—tokens, components, and global styles—not during distribution or ops. The playbook centers on frontend implementation: tailwind.config, CSS variables, React/Vue component variants, and responsive layout—not backend APIs or agent tooling.
How it compares
Use as a structured frontend playbook instead of asking the agent to freestyle utility classes on every new component.
Common Questions / FAQ
Who is tailwind-design-system for?
It is for solo and indie builders implementing or extending Tailwind CSS in a real codebase—especially when you need tokens, reusable components, and dark mode without hiring a separate design ops pass.
When should I use tailwind-design-system?
Use it during Build → frontend when creating a component library, implementing design tokens, standardizing UI patterns, migrating to Tailwind, or setting up class-based dark mode and accessible component defaults.
Is tailwind-design-system safe to install?
Treat it like any third-party agent skill: review what the agent changes in your repo and check the Security Audits panel on this Prism page before relying on it in production workflows.
SKILL.md
READMESKILL.md - Tailwind Design System
# Tailwind Design System Implementation Playbook This file contains detailed patterns, checklists, and code samples referenced by the skill. # Tailwind Design System Build production-ready design systems with Tailwind CSS, including design tokens, component variants, responsive patterns, and accessibility. ## When to Use This Skill - Creating a component library with Tailwind - Implementing design tokens and theming - Building responsive and accessible components - Standardizing UI patterns across a codebase - Migrating to or extending Tailwind CSS - Setting up dark mode and color schemes ## Core Concepts ### 1. Design Token Hierarchy ``` Brand Tokens (abstract) └── Semantic Tokens (purpose) └── Component Tokens (specific) Example: blue-500 → primary → button-bg ``` ### 2. Component Architecture ``` Base styles → Variants → Sizes → States → Overrides ``` ## Quick Start ```typescript // tailwind.config.ts import type { Config } from 'tailwindcss' const config: Config = { content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'], darkMode: 'class', theme: { extend: { colors: { // Semantic color tokens primary: { DEFAULT: 'hsl(var(--primary))', foreground: 'hsl(var(--primary-foreground))', }, secondary: { DEFAULT: 'hsl(var(--secondary))', foreground: 'hsl(var(--secondary-foreground))', }, destructive: { DEFAULT: 'hsl(var(--destructive))', foreground: 'hsl(var(--destructive-foreground))', }, muted: { DEFAULT: 'hsl(var(--muted))', foreground: 'hsl(var(--muted-foreground))', }, accent: { DEFAULT: 'hsl(var(--accent))', foreground: 'hsl(var(--accent-foreground))', }, background: 'hsl(var(--background))', foreground: 'hsl(var(--foreground))', border: 'hsl(var(--border))', ring: 'hsl(var(--ring))', }, borderRadius: { lg: 'var(--radius)', md: 'calc(var(--radius) - 2px)', sm: 'calc(var(--radius) - 4px)', }, }, }, plugins: [require('tailwindcss-animate')], } export default config ``` ```css /* globals.css */ @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --primary: 222.2 47.4% 11.2%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --ring: 222.2 84% 4.9%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --primary: 210 40% 98%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --ring: 212.7 26.8% 83.9%; } } ``` ## Patterns ### Pattern 1: CVA (Class Variance Authority) Components ```typescript // components/ui/button.tsx import { cva, type VariantProps } from 'class-variance-authority' import { forwardRef } from 'react' import { cn } from '@/lib/utils' const buttonVariants = cva( // Base styles 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50', { variants: { variant: { default: 'bg-pri