What is the benefit of the three-tier token hierarchy?

The hierarchy (Primitive > Semantic > Component) allows for maximum flexibility. You can change a brand color in one place (Primitive) or update all button backgrounds (Component) without affecting other UI elements.

Does this skill support the latest version of Tailwind CSS?

Yes, the skill is explicitly designed for Tailwind CSS v4.1 and uses the modern @theme directive for configuration.

Can this skill help implement dark mode?

Absolutely. Dark mode support is built into the validation checklist and the semantic token layer, ensuring that variables swap correctly based on the user's system preferences.

Why does the skill use OKLCH for colors instead of Hex?

OKLCH is a modern color space that supports P3 wide-gamut displays and provides better perceptual uniformity, making it easier to programmatically generate accessible color scales.

How does the 'TeamCreate' workflow work?

The skill invokes multiple specialized agents to first explore your existing codebase for tokens, research the best implementation patterns, and then validate the final code for consistency.

Theming Tokens Expert

Name: Theming Tokens Expert
Author: fusengine

byfusengine

•

デザインツール

Architects production-grade design systems using a multi-tier token hierarchy and modern CSS standards.

Theming Tokens is a specialized skill that enables Claude to build and maintain robust design systems through a structured three-tier token architecture: primitives, semantic mappings, and component-specific variables. It is specifically optimized for Tailwind CSS v4, utilizing the @theme directive and OKLCH color spaces to ensure high-gamut P3 support and perceptually uniform scales. By following a mandatory agent workflow for codebase exploration and validation, this skill eliminates hard-coded values and ensures seamless dark mode integration across complex frontend projects.

主な機能

01Automated dark mode and light mode override generation

02Multi-agent workflow for codebase research and token validation

03Three-tier token hierarchy implementation (Primitive, Semantic, Component)

042 GitHub stars

05OKLCH color space integration for modern P3 gamut displays

06Tailwind CSS v4 @theme directive optimization

ユースケース

01Refactoring legacy CSS or hard-coded hex values into a maintainable token system.

02Migrating existing design configurations to Tailwind CSS v4 architecture.

03Building a scalable design system for a new enterprise-level web application.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add fusengine/agents theming-tokens

For use in Claude.ai and ChatGPT

Download Skill