What utility is used for merging Tailwind classes?

It recommends and implements the cn() utility pattern, which combines clsx and tailwind-merge to handle conditional classes and resolve style conflicts efficiently.

Can I use this for dark mode implementation?

Yes, the skill provides specific patterns for implementing light and dark modes using CSS variables and Tailwind's layer base configurations.

How does this skill handle design tokens?

It centralizes your design tokens within the tailwind.config.js file, ensuring a single source of truth for colors, spacing, typography, and border radii across your entire project.

How are complex components managed?

The skill utilizes composition patterns, allowing you to build complex interfaces from smaller primitive components using a dot-notation structure (e.g., Card.Header, Card.Content).

Does it support TypeScript for component props?

Absolutely. It promotes the use of clear TypeScript interfaces for component props, variants, and sizes to ensure type safety and a better developer experience.

React Design Systems with Tailwind

Name: React Design Systems with Tailwind
Author: Expanly

byExpanly

设计工具

Builds scalable, production-ready React component libraries using Tailwind CSS design tokens and industry-standard patterns.

关于

The Design Systems skill empowers developers to architect robust UI foundations by standardizing React component creation within Claude Code. It provides a structured framework for defining design tokens in Tailwind CSS, implementing reusable component architectures with typed variants, and managing complex UI compositions. By enforcing systematic naming conventions and theming support via CSS variables, this skill ensures that your frontend infrastructure remains maintainable, consistent, and easy to scale across large-scale web applications.

主要功能

Advanced composition patterns using sub-component structures
Standardized design token integration via tailwind.config.js
Comprehensive light/dark mode support using CSS variables
Scalable component architecture with typed variants and sizes
Optimized class merging utility patterns using clsx and tailwind-merge
0 GitHub stars

使用场景

Migrating legacy CSS styles to a systematic design token approach
Building complex, reusable dashboard components with consistent styling
Bootstrapping a new corporate UI library for React-based web applications

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add expanly/expanly-claude-code-agents design-systems

For use in Claude.ai and ChatGPT

Download Skill

GitHub

关于