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.

주요 기능

01Responsive grid and container system generation

02Semantic dark mode and color scheme configuration

03CVA (Class Variance Authority) component architecture

042 GitHub stars

05Design token hierarchy implementation (Brand, Semantic, Component)

06Accessible form and compound component patterns

사용 사례

01Standardizing UI patterns and design tokens across a large codebase

02Building responsive, accessible dashboards with compound components

03Creating a multi-theme component library with Tailwind CSS

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ericgrill/agents-skills-plugins tailwind-design-system

For use in Claude.ai and ChatGPT

Download Skill