using-theme-variables
CommunityDefine design tokens with CSS OKLCH themes.
Authordjankies
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill explains how to define and consume design tokens via the Tailwind v4 @theme system, enabling semantic, scalable theming with okLCh color formats.
Core Features & Use Cases
- Theme Tokens: Centralized color, typography, spacing definitions.
- Semantic Naming: Meaningful variable names for design systems.
- Cross-Platform Utilities: Namespace-based utilities generated from theme.
Quick Start
Add a @theme block with color and typography tokens, then use the generated utilities in HTML/CSS.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: using-theme-variables Download link: https://github.com/djankies/claude-configs/archive/main.zip#using-theme-variables Please download this .zip file, extract it, and install it in the .claude/skills/ directory.