How does this handle React 19 refs?

The skill utilizes React 19's new ref pattern, which treats 'ref' as a standard prop, eliminating the need for the complex forwardRef higher-order component.

Does this skill support Tailwind CSS v3?

This skill is specifically optimized for Tailwind CSS v4's CSS-first architecture. While component logic is similar, the configuration patterns (using @theme instead of tailwind.config.ts) are unique to v4.

What are the advantages of the OKLCH color tokens included?

OKLCH provides more consistent perceptual lightness across different hues, making it easier to create accessible color palettes and smooth dark mode transitions.

Can I implement custom animations with this skill?

Yes, it includes patterns for defining CSS @keyframes within the @theme block, which are then exposed as standard Tailwind utility classes.

Tailwind Design System v4

Name: Tailwind Design System v4
Author: markky21

bymarkky21

0•

Design Tools

Build scalable, production-ready design systems using Tailwind CSS v4's CSS-first configuration and modern React 19 patterns.

This skill empowers developers to implement comprehensive design systems using the latest Tailwind CSS v4 features. It provides standardized patterns for CSS-first theme configuration, semantic design tokens using OKLCH colors, and accessible component architectures. By leveraging Class Variance Authority (CVA) and React 19's simplified ref handling, it ensures that your UI library is maintainable, high-performance, and follows the most recent industry best practices for modern frontend development.

Key Features

01Component variance management with Class Variance Authority (CVA)

020 GitHub stars

03Semantic design token implementation using OKLCH color spaces

04Modern React 19 component patterns without forwardRef

05Tailwind CSS v4 CSS-first configuration and @theme integration

06Accessible UI patterns for forms, cards, and interactive elements

Use Cases

01Migrating an existing Tailwind CSS v3 project to the v4 CSS-first architecture

02Building a custom, high-performance component library from scratch

03Standardizing design tokens and responsive patterns across a large codebase

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add markky21/claude-skills tailwind-design-system

For use in Claude.ai and ChatGPT

Download Skill