Tailwind Design System
Build scalable design systems with Tailwind CSS v4 and design tokens
What You Can Do
You can architect complete design systems leveraging Tailwind v4's CSS-first approach, including semantic color tokens, component variants, responsive patterns, and native dark mode. This skill helps you build reusable component libraries with proper theming infrastructure, accessibility standards, and migration strategies from Tailwind v3 to v4.
Features
Define design tokens directly in CSS using @theme instead of config files
Create semantic color tokens, spacing scales, and typography systems with OKLCH color space
Build flexible, composable UI components with multiple states and responsive breakpoints
Set up native CSS dark mode with @custom-variant and proper inheritance
Structure components with semantic HTML, ARIA attributes, and focus management
Define @keyframes and @starting-style for smooth entry animations and transitions
Convert existing v3 projects to v4 syntax with configuration patterns and best practices
Create mobile-first layouts with container queries and flexible grid/flexbox systems
Example Output
Example 1: Color Token System
@theme {
--color-primary: oklch(50% 0.2 240);
--color-primary-hover: oklch(45% 0.22 240);
--color-surface: oklch(98% 0.01 0);
}
Example 2: Component Button Variants
<!-- Primary button -->
<button class="px-4 py-2 rounded-lg bg-primary text-white hover:bg-primary-hover transition-colors">
Click me
</button>
<!-- Secondary variant -->
<button class="px-4 py-2 rounded-lg border-2 border-primary text-primary hover:bg-primary/10">
Cancel
</button>
Example 3: Dark Mode with Semantic Tokens
@custom-variant dark (&:where(.dark, .dark *));
@theme {
--color-text: oklch(20% 0 0);
}
@dark {
--color-text: oklch(95% 0 0);
}
What's Included
- SKILL.md: Complete Tailwind v4 design system reference with key changes from v3
- CSS-first configuration template: Starter @theme block with semantic tokens and color scales
- Component library checklist: Responsive components, variants, states, and accessibility requirements
- Design token framework: Color, spacing, typography, and animation token definitions
- Dark mode setup guide: Implementation patterns for CSS-native dark mode with fallbacks
- Migration workflow: Step-by-step conversion from Tailwind v3 config to v4 CSS approach
Who It's For
- UI/UX Designers — Build design systems that align technical implementation with design intent
- Frontend Engineers — Create reusable component libraries and maintain consistent styling patterns
- Design System Leads — Architect token systems and standardize design across teams
- Product Teams — Establish scalable design infrastructure that grows with your product
- Full-stack Developers — Implement responsive, accessible components with modern CSS features
Best For
- Creating component libraries from scratch with consistent patterns
- Implementing design tokens and semantic theming systems
- Migrating from Tailwind v3 to v4 with minimal breaking changes
- Building responsive, accessible UI systems with dark mode support
- Standardizing spacing, color, typography, and animation across codebases
You might also like
Analyze raw usability testing data—transcripts, session notes, task completion rates, and participant feedback—to surface recurring patterns and user behaviors. Claude identifies the highest-impact issues, extracts testable insights about user mental models, and generates prioritized recommendations ranked by severity, frequency, and business impact. This cuts manual synthesis time from hours to minutes while maintaining analytical rigor.
by calesthio
You can conduct comprehensive microcopy audits across your entire product, categorizing copy by type and user journey stage. Claude helps you identify clarity gaps, consistency issues, and conversion blockers, then generates tested alternatives with clear rationale. You'll produce copy guidelines, A/B test frameworks, and localization-ready copy that drives measurable improvements in user completion rates and confidence.
by calesthio
This skill helps you craft error messages and notifications that prioritize clarity and actionability over cleverness. You'll generate empathetic microcopy for error states, in-app notifications, empty states, and edge cases—then test variations against different user personas to minimize cognitive load and maximize task completion rates. It bridges UX research insights with production-ready copy that reduces support tickets and builds user trust.
by calesthio
You can systematically design reusable responsive grid systems, establish spacing scales and breakpoint strategies, and document component layout behaviors for seamless developer handoff. This skill generates technical layout specifications that reduce design-to-development friction and ensure accessibility compliance from the design phase, enabling teams to build consistent, scalable web interfaces across all devices.
by calesthio
You can systematically evaluate your design system's health using structured frameworks that assess component consistency, design token usage, documentation completeness, and developer adoption. The skill generates prioritized gap analysis reports that quantify issues—like duplicate components, token sprawl, or implementation friction—and translates findings into executive-ready roadmaps with business cases for remediation. You'll move beyond subjective design assessments to data-backed improvement strategies.
by calesthio
You can generate production-ready web interfaces, dashboards, forms, and navigation structures grounded in actual design system best practices. This skill provides access to 60+ documented UI component patterns sourced from industry standards, ensuring your designs follow modern conventions for restraint, typography hierarchy, color strategy, and spacing. Every interface Claude generates will feel polished and professional—not templated.
This skill guides you through creating strategic content frameworks that go beyond tone and voice guidelines. You'll synthesize user research with business goals, define content principles, structure information architecture, and document messaging frameworks that teams can reference repeatedly. The result is a comprehensive strategy that ensures every piece of UX content—from microcopy to help documentation—serves both users and business outcomes.
by calesthio
You'll conduct structured culture audits that go beyond surface-level observations to identify root causes of dysfunction in design teams. Using organizational psychology research, you can analyze team feedback patterns, map collaboration barriers across disciplines, and design targeted interventions that address psychological safety gaps, siloed workflows, and retention risks. Claude helps you transform culture diagnostics into measurable improvement plans tied to specific team performance outcomes.
by calesthio