design-token-transformer
Transform design tokens across multiple formats and platforms. Parse W3C design token format, transform to CSS/SCSS/JS/iOS/Android, handle token aliases and references, and generate documentation.
npx skills add a5c-ai/babysitter --skill design-token-transformer --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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" } } }
- Overview
- Prerequisites
- Capabilities
- 1. Token Format Parsing
- 2. CSS/SCSS Transformation
- 3. JavaScript/TypeScript Transformation
- 4. iOS Swift Transformation
- 5. Android Transformation
- 6. Token Documentation Generation
- MCP Server Integration
- Best Practices
- Process Integration
- Output Format
- Error Handling
What does the design-token-transformer skill do?
Transform design tokens across multiple formats and platforms. Parse W3C design token format, transform to CSS/SCSS/JS/iOS/Android, handle token aliases and references, and generate documentation.
How do I install it?
Run `npx skills add a5c-ai/babysitter --skill design-token-transformer --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From a5c-ai/babysitter, a repository with 1,642 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.