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

0•

设计工具

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.

主要功能

010 GitHub stars

02Type-safe component variants using Class Variance Authority (CVA)

03Multi-tier design token implementation including brand and semantic layers

04Built-in support for dark mode and dynamic color scheme switching

05Compound component architecture for flexible and reusable UI structures

06Accessible form components with integrated validation and error states

使用场景

01Standardizing inconsistent UI patterns across a large-scale React codebase

02Creating an enterprise-grade internal component library from scratch

03Implementing responsive mobile-first layouts with standardized grid systems

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add drgaciw/academic-compliance-hub-glm tailwind-design-system

For use in Claude.ai and ChatGPT

Download Skill