skills.rest
fusengine
fusengineCOMMUNITY
Explore all skills by this author →
Website𝕏@fusengineGitHub

theming-tokens

Organize primitive, semantic, and component design tokens for UI theming.

22|3|Updated Jan 10, 2026
Search Tags:#theming#design system#design tokens#tailwind#css variables#semantics#primitives
One-click install
npx skills add https://github.com/fusengine/agents --skill theming-tokens
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: theming-tokens
Source: https://github.com/fusengine/agents/tree/main/plugins/design-expert/skills/theming-tokens
Command: npx skills add https://github.com/fusengine/agents --skill theming-tokens

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the complexity of creating and maintaining consistent design systems by providing a structured approach to defining and managing theming tokens.

Core Features & Use Cases

  • Token Hierarchy: Manages primitive, semantic, and component tokens for a robust design system.
  • Cross-Framework Compatibility: Supports CSS variables and integrates with Tailwind CSS v4's @theme directive.
  • Use Case: Implement a new design system or refactor an existing one to ensure brand consistency across all UI elements, from basic colors to complex component styles.

Quick Start

Use the theming-tokens skill to define primitive color tokens using OKLCH for the attached design system.

Frequently Asked Questions about theming-tokens

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure design tokens for a UI theming system?▼

Structure design tokens by organizing them into primitive, semantic, and component levels to ensure consistency across UI theming. This hierarchy manages raw values, contextual meanings, and specific component styles effectively.

Can I use CSS variables and Tailwind CSS v4 for design tokens?▼

Yes, CSS variables and Tailwind CSS v4 are fully supported for design tokens. The system integrates with Tailwind's @theme directive to define styling tokens and ensure consistent application across your components.

What is the best way to define colors for dark mode overrides in a design system?▼

Define colors using OKLCH definitions and structure your tokens to support dark mode overrides. This approach ensures perceptual color consistency and simplifies switching between light and dark themes.

How do I manage semantic and primitive tokens when refactoring a design system?▼

Manage refactoring by separating primitive tokens, like raw color values, from semantic tokens, like background colors. This ensures brand consistency and allows UI updates without breaking underlying design definitions.

Does this design token approach require specific color formats?▼

Yes, the approach enforces best practices by requiring OKLCH color definition for primitive tokens. This ensures perceptual uniformity and reliable color adjustments when generating semantic tokens for dark mode.

Related Skills

Explore More Design & Creative Skills→
trueratruera
3.5k

trulens-dataset-curation

Create and curate ground-truth evaluation datasets for TruLens.

Official
Intermediate
julianoczkowskijulianoczkowski
3

style-modus-components-with-tailwind

Replace Tailwind border and opacity patterns with CSS-variable utilities for Modus components.

Community
Intermediate
vmobifystudiovmobifystudio
4

design-system

Enforce design tokens and reusable UI components for iOS and Android.

Community
Intermediate
JosiahSiegelJosiahSiegel
51

tailwindcss-advanced-design-systems

Create advanced Tailwind CSS design systems with CSS variables and the @theme directive.

Community
Advanced