design-system-tokens
CommunityManage design tokens for consistent UIs.
Authoryonatangross
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill streamlines the creation and management of design tokens, ensuring consistency across your design system and codebase, and simplifying theme management, including dark mode.
Core Features & Use Cases
- W3C DTCG Compliance: Adheres to the W3C Design Token Community Group specification for maximum interoperability.
- Three-Tier Hierarchy: Organizes tokens into global, alias, and component layers for scalability and theming.
- OKLCH Color Space: Utilizes perceptually uniform OKLCH for accurate color definitions and accessible shade generation.
- Style Dictionary Integration: Transforms tokens into various platform outputs (CSS, Tailwind, iOS, Android).
- Theming & Dark Mode: Enables easy theme switching and dark mode implementation.
- Use Case: When building a new component library, use this Skill to define all foundational design tokens (colors, spacing, typography) in a standardized format that can be consumed by both designers and developers, and easily themed for different brand variations.
Quick Start
Create a new design token file following the W3C DTCG specification for a primary color.
Dependency Matrix
Required Modules
None requiredComponents
scriptsreferences
💻 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: design-system-tokens Download link: https://github.com/yonatangross/orchestkit/archive/main.zip#design-system-tokens Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.