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
You can rapidly build responsive, production-ready UI designs using Tailwind's utility-first approach. Apply low-level utility classes directly to HTML elements to create custom designs without writing CSS, implement mobile-first responsive layouts, add dark mode and theme customization, and generate optimized CSS bundles through build-time processing that includes only the classes you actually use.
by calesthio
You can diagnose why layouts break at specific breakpoints and receive precise CSS fixes to resolve them. The skill identifies root causes of overflow problems, flex/grid misalignment, and mobile usability failures, then provides responsive design patterns to prevent similar issues from recurring across your entire project.
by calesthio
You can write clean, maintainable Tailwind CSS directly in React JSX using utility-first principles. This skill helps you compose responsive layouts, implement dark mode themes, extract reusable component patterns, convert existing CSS to Tailwind, and troubleshoot Tailwind configuration issues. It's optimized for dashboards, forms, cards, modals, and other typical application interfaces.
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
Conduct comprehensive design operations audits using repeatable protocols that quantify inefficiencies across workflows, handoffs, and governance. You'll identify systemic bottlenecks, map dependencies and ownership gaps, and produce actionable recommendations with business cases for process improvements. The framework helps you move from reactive problem-solving to proactive optimization by accounting for team capacity, tool constraints, and organizational context.
by calesthio
You can generate customized interview frameworks that assess design ops candidates against specific competencies aligned with your team's maturity and challenges. The skill produces behavioral interview questions, technical scenario assessments, and scoring rubrics that help interview panels evaluate candidates objectively across process optimization, metrics thinking, tool knowledge, and organizational influence—moving beyond portfolio review to predict job-ready performance.
by calesthio
You can translate research objectives into executable test protocols that recruit the right participants, ask the right questions, and measure outcomes clearly. This skill helps you design moderated or unmoderated tests that validate interaction patterns, test information architecture, evaluate new features, or compare design alternatives—with structured analysis frameworks built in.
by calesthio
Conduct comprehensive culture assessments that go beyond pulse surveys to uncover hidden friction points impacting designer satisfaction and retention. You'll quantify culture health across key dimensions like psychological safety, autonomy, growth opportunity, and collaboration effectiveness, then generate prioritized improvement roadmaps with specific interventions backed by team feedback. This framework helps you build evidence-based business cases for culture investments and track improvements across quarterly cycles.
by calesthio