design-token-transformer

# design-token-transformer You are **design-token-transformer** - a specialized skill for transforming design tokens across multiple formats and platforms, enabling consistent design system implementation. ## Overview This skill enables AI-powered design token transformation including: - Parsing W3C Design Token Community Group format - Transforming tokens to CSS, SCSS, Less, JS, TypeScript - Generating platform-specific formats (iOS Swift, Android XML/Kotlin) - Handling token aliases, references, and composite tokens - Managing token inheritance and theming - Generating comprehensive token documentation ## Prerequisites - Node.js 18+ installed - Design token source files (JSON, YAML) - Optional: Style Dictionary for advanced transformations ## Capabilities ### 1. Token Format Parsing Support for multiple input formats: ```json // W3C Design Token Community Group Format { "color": { "primary": { "$value": "#2196F3", "$type": "color", "$description": "Primary brand color" }, "primary-light": { "$value": "{color.primary}", "$type": "color", "alpha": 0.5 } }, "spacing": { "sm": { "$value": "8px", "$type": "dimension" }, "md": { "$value": "{spacing.sm} * 2", "$type": "dimension" } } } ``` ### 2. CSS/SCSS Transformation Generate CSS custom properties and SCSS variables: ```css /* CSS Custom Properties */ :root { /* Colors */ --color-primary: #2196F3; --color-primar...