How does this skill handle component variants?

It utilizes Class Variance Authority (CVA) to define base styles, variants, and sizes in a type-safe manner, making it easy to manage complex UI states.

Is it compatible with React Hook Form?

Yes, the skill provides specific implementation patterns for building form components that integrate directly with React Hook Form and Zod for validation.

Can I use this for mobile-first design?

Absolutely. The skill includes specific patterns for responsive grids and mobile-optimized layout containers to ensure a consistent experience across devices.

Does it support dark mode implementation?

Yes, the skill provides a comprehensive semantic token system and Tailwind configuration designed for seamless light and dark mode transitions using CSS variables.

Tailwind UI Design System

Name: Tailwind UI Design System
Author: drgaciw

bydrgaciw

デザインツール

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

概要

This skill empowers Claude to architect comprehensive frontend design systems by implementing a hierarchy of design tokens, responsive UI patterns, and accessible component libraries. It leverages industry-standard practices like Class Variance Authority (CVA) for managing complex style variants and compound component patterns for modular UI elements. By utilizing semantic token mapping, it ensures consistent theming across light and dark modes while providing a standardized approach for migrating legacy CSS to a modern Tailwind-based architecture.

主な機能

0 GitHub stars
Type-safe component variants using Class Variance Authority (CVA)
Multi-tier design token implementation including brand and semantic layers
Built-in support for dark mode and dynamic color scheme switching
Compound component architecture for flexible and reusable UI structures
Accessible form components with integrated validation and error states

ユースケース

Standardizing inconsistent UI patterns across a large-scale React codebase
Creating an enterprise-grade internal component library from scratch
Implementing responsive mobile-first layouts with standardized grid systems

概要

主な機能

0 GitHub stars
Type-safe component variants using Class Variance Authority (CVA)
Multi-tier design token implementation including brand and semantic layers
Built-in support for dark mode and dynamic color scheme switching
Compound component architecture for flexible and reusable UI structures
Accessible form components with integrated validation and error states

ユースケース

Standardizing inconsistent UI patterns across a large-scale React codebase
Creating an enterprise-grade internal component library from scratch
Implementing responsive mobile-first layouts with standardized grid systems