What are the benefits of using OKLCH colors in this skill?

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

Does this skill support Tailwind CSS v3?

While specifically optimized for the v4 CSS-first architecture, it provides comprehensive guidance for migrating from v3 patterns to modern standards.

How does it handle dark mode?

It implements dark mode using Tailwind v4's native @custom-variant and CSS variables for high-performance, class-based theme switching.

Is it compatible with the latest React versions?

Yes, the component patterns are specifically authored for React 19, utilizing modern features like direct ref props and simplified compound components.

Tailwind v4 Design System

Name: Tailwind v4 Design System
Author: aki-0517

byaki-0517

0•

Design Tools

Builds scalable, production-grade design systems and accessible component libraries using Tailwind CSS v4's CSS-first architecture.

This skill empowers developers to architect modern frontend interfaces by leveraging the advanced features of Tailwind CSS v4. It provides deep expertise in CSS-first configuration, semantic design tokens using OKLCH color spaces, and high-performance component patterns like Class Variance Authority (CVA) and React 19 compound components. It is particularly useful for teams looking to standardize their UI, migrate from Tailwind v3 to v4, or implement robust dark mode and responsive layouts with native CSS capabilities rather than complex JavaScript configurations.

Key Features

01Creation of accessible, reusable component libraries with CVA and Radix UI

02Tailwind CSS v4 CSS-first theme configuration using the @theme directive

03React 19-ready component patterns with simplified prop and ref handling

04Implementation of semantic design tokens using OKLCH for superior color perception

050 GitHub stars

06Native CSS-based dark mode implementation and hardware-accelerated animation tokens

Use Cases

01Migrating legacy Tailwind CSS v3 projects to the modern v4 engine and syntax

02Building a custom, enterprise-grade internal component library from scratch

03Standardizing UI patterns and design tokens across distributed frontend teams

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add aki-0517/walipay tailwind-design-system

For use in Claude.ai and ChatGPT

Key Features

01Creation of accessible, reusable component libraries with CVA and Radix UI

02Tailwind CSS v4 CSS-first theme configuration using the @theme directive

03React 19-ready component patterns with simplified prop and ref handling

04Implementation of semantic design tokens using OKLCH for superior color perception

050 GitHub stars

06Native CSS-based dark mode implementation and hardware-accelerated animation tokens

Use Cases

01Migrating legacy Tailwind CSS v3 projects to the modern v4 engine and syntax

02Building a custom, enterprise-grade internal component library from scratch

03Standardizing UI patterns and design tokens across distributed frontend teams

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add aki-0517/walipay tailwind-design-system

For use in Claude.ai and ChatGPT