{"enrichment":{"faq":[{"a":"design-system-tokens follows the W3C Design Token Community Group specification with a three-tier hierarchy: global tokens define base values, alias tokens reference globals for semantic meaning, and component tokens scope styling to specific UI elements. This structure lets you define tokens once and reuse them across themes without modifying component code. The MIT-licensed toolkit includes templates and validation to ensure your token files conform to the W3C standard.","q":"How do I create design tokens in W3C format?"},{"a":"design-system-tokens uses Style Dictionary integration to transform your token definitions into multiple formats: CSS variables for web, Tailwind theme configurations, iOS platform files, and Android resources. This design-to-code pipeline eliminates manual transcription and keeps all outputs synchronized with your source tokens, supporting both light and dark themes across all target platforms.","q":"What outputs can design-system-tokens transform tokens into?"},{"a":"design-system-tokens enables dark mode through token aliasing and multi-theme systems. Define semantic alias tokens that reference different global tokens per theme, then switch themes by changing a CSS class or configuration flag\u2014component definitions never change. The three-tier hierarchy makes it straightforward to maintain multiple color schemes, contrast levels, and visual treatments without code duplication.","q":"How does design-system-tokens implement dark mode theming?"},{"a":"design-system-tokens supports OKLCH color space to generate perceptually uniform shade scales. Unlike RGB or HSL, OKLCH separates lightness from hue and chroma, so incremental lightness steps produce visually consistent color ramps. This ensures your design token shade scales feel balanced across the spectrum and maintain readability for contrast enforcement without manual tweaking.","q":"Why use OKLCH color space for design tokens?"},{"a":"design-system-tokens provides versioning strategies and migration guidance to evolve tokens without breaking consumer code. Track token changes, deprecate old names gradually, and use alias tokens to bridge old and new naming conventions during transitions. This approach lets design systems scale across teams and products while maintaining backward compatibility during updates.","q":"How does design-system-tokens handle token versioning and migration?"},{"a":"design-system-tokens recommends semantic naming that describes intent rather than appearance: use names like `color-background-interactive` instead of `color-blue-500`. Pair semantic tokens with the three-tier hierarchy so global tokens hold raw values, aliases add meaning, and component tokens scope to UI elements. This pattern makes tokens self-documenting and easier to maintain as designs evolve.","q":"What are semantic token naming conventions in design-system-tokens?"}],"shadow_tags":["token-hierarchy","perceptual-color","design-to-code","theme-switching","token-versioning","w3c-standard","accessibility-contrast","multi-platform-output","semantic-naming"],"summary_rewrite":"Manage design tokens using the W3C Design Token Community Group specification with a three-tier hierarchy (global, alias, component) that enables theme switching without touching component definitions. Built-in support for OKLCH color spaces ensures perceptually uniform shade scales, while Style Dictionary integration transforms tokens into CSS variables, Tailwind themes, and platform-specific outputs. Includes guidance on contrast enforcement, dark mode implementation, versioning strategies, and design-to-code pipelines."},"files":[{"bytes":10265,"path":"src/skills/design-system-tokens/SKILL.md","sha256":"e3e4766bba236a517a15900f56b2aa5be1fbd9765b8787538ce05e8a550ce5e3","url":"https://skillfed.io/files/yonatangross/orchestkit/design-system-tokens/9c229a92/SKILL.md"}],"id":"yonatangross/orchestkit/design-system-tokens","links":{"html":"https://skillfed.io/yonatangross/orchestkit/design-system-tokens","md":"https://skillfed.io/yonatangross/orchestkit/design-system-tokens.md","repo":"https://github.com/yonatangross/orchestkit"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":20,"language":"TypeScript","last_updated":"2026-07-28","license":"MIT","name":"design-system-tokens","publisher":"yonatangross","stars":208},"relations":{"similar":[{"id":"yonatangross/orchestkit/figma-design-handoff"},{"id":"JosiahSiegel/claude-plugin-marketplace/tailwindcss-advanced-design-systems"},{"id":"yonatangross/orchestkit/design-context-extract"},{"id":"Pixel-Process-UG/superkit-agents/ui-design-system"},{"id":"NousResearch/hermes-agent/design-md"},{"id":"samhvw8/dot-claude/ui-design-system"},{"id":"giuseppe-trisciuoglio/developer-kit/tailwind-design-system"},{"id":"plugin87/ux-ui-agent-skills/token-build"},{"id":"modu-ai/moai-adk/moai-domain-uiux"},{"id":"yonatangross/orchestkit/ui-components"}]},"slug":{"owner":"yonatangross","repo":"orchestkit","skill":"design-system-tokens"},"version":"9c229a92"}