toge:design-tokens
CommunityDesign token management for consistent UI styles.
Authormicserr
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill provides a centralized management system for design tokens, ensuring consistent use of colors, typography, and spacing across a product UI.
Core Features & Use Cases
- Token Mapping: Maps design intent to the correct token class, using a three-layer architecture.
- References: Provides comprehensive references for all tokens, including CSS custom properties and semantic tokens.
- Dark Mode Support: Automatically adapts tokens for light and dark mode interfaces.
- Typography Scale: Defines a typography scale for consistent font sizes and line heights.
- Max-Width Tokens: Offers predefined max-width tokens for various layout scenarios.
- Token Enforcement: Enforces the use of tokens over raw values, ensuring style consistency.
Quick Start
Use the toge:design-tokens skill to generate a background color token for a primary button.
Dependency Matrix
Required Modules
None requiredComponents
scriptsreferencesassets
💻 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: toge:design-tokens Download link: https://github.com/micserr/sprout-design-agent/archive/main.zip#toge-design-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 620,000+ vetted skills library on demand.