Does it support dark mode implementation?

Yes, it includes advanced configuration patterns for class-based dark mode using CSS variables and semantic tokens for seamless theme switching.

Is this skill compatible with React?

Yes, the skill is optimized for modern React environments, featuring best practices for forwardRefs, compound components, and accessibility (Aria) attributes.

How does this skill handle component variants?

It utilizes the Class Variance Authority (CVA) pattern, allowing Claude to generate type-safe and manageable style variations for buttons, inputs, and other UI elements.

What is the Tailwind Design System skill?

It is a specialized capability for Claude Code that provides structured patterns and implementation logic for building scalable UI systems using Tailwind CSS and design tokens.

Tailwind Design System Architect

Name: Tailwind Design System Architect
Author: EricGrill

byEricGrill

•

デザインツール

Builds scalable, production-ready design systems using Tailwind CSS, design tokens, and accessible component patterns.

概要

This skill empowers Claude to architect comprehensive UI design systems from scratch or migrate existing styles to Tailwind CSS. It focuses on implementing a strict design token hierarchy—mapping brand colors to semantic and component levels—while utilizing industry-standard patterns like Class Variance Authority (CVA) for robust component libraries. Whether you're setting up dark mode, building responsive layouts, or ensuring accessible form components, this skill provides the structured logic and implementation patterns necessary for maintainable, high-performance frontend architectures.

主な機能

Responsive grid and container system generation
Semantic dark mode and color scheme configuration
CVA (Class Variance Authority) component architecture
2 GitHub stars
Design token hierarchy implementation (Brand, Semantic, Component)
Accessible form and compound component patterns

ユースケース

Standardizing UI patterns and design tokens across a large codebase
Building responsive, accessible dashboards with compound components
Creating a multi-theme component library with Tailwind CSS

概要

主な機能

Responsive grid and container system generation
Semantic dark mode and color scheme configuration
CVA (Class Variance Authority) component architecture
2 GitHub stars
Design token hierarchy implementation (Brand, Semantic, Component)
Accessible form and compound component patterns

ユースケース

Standardizing UI patterns and design tokens across a large codebase
Building responsive, accessible dashboards with compound components
Creating a multi-theme component library with Tailwind CSS