Skip to main content
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.
Aller à l'installation Skills Marketplace Découvrez et explorez les compétences IA créées par la communauté.
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Afficher les détails du prompt Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.
npx skills add https://github.com/a5c-ai/babysitter --skill design-token-transformerLa commande reste sur une seule ligne. Faites défiler horizontalement pour la vérifier avant de la copier.
Vous préférez une copie locale ? Téléchargez les fichiers actuellement disponibles dans SkillsMP.
Télécharger Zip Téléchargement... Plus depuis ce dépôt Reference for querying the Atlas knowledge graph through its MCP tools — the SECONDARY enrichment/comparison layer that adds best-practice context to systems you have ALREADY scanned from your real sources (`az`, repos, dirs). Use when you need to look up nodes, edges, kinds, clusters, stats, or wiki pages in Atlas to compare against your real inventory. (atlas graph, query atlas, atlas mcp, search the graph, graph neighbors, atlas record, atlas kinds, enrichment layer)
Atlas turns your STATED NEED into a real systems atlas by SCANNING your actual sources (Azure via `az`, git repos, local dirs) and process/data mining them, THEN enriching against the Atlas knowledge graph. Use this skill when asked to inventory/map your real systems, scan your cloud + repos + directories, mine the real processes or data they contain, or collect their real constraints/gotchas. (atlas, scan my systems, inventory our azure account, map my repos, real systems atlas, process mining, data mining, collect nuances, system discovery)
assimilate-popular-workflows This skill should be used when the user asks to "find skills in the wild", "assimilate popular workflows", "discover SKILL.md files in repos", "research external skills", "find workflow patterns", "survey the skill landscape", "what skills exist out there", or wants to investigate public repositories for extractable processes, babysitter plugins, and reusable procedural insights. Searches GitHub for SKILL.md files, classifies repos by archetype, and maintains structured research under docs/reference-repos/.
Explorateur de fichiers
2 fichiers Métiers associés SOC
Basé sur la classification professionnelle SOC
name design-token-transformer description 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. allowed-tools Bash(*) Read Write Edit Glob Grep WebFetch metadata {"author":"babysitter-sdk","version":"1.0.0","category":"design-systems","backlog-id":"SK-UX-003"} graph {"domains":["domain:web-development"],"specializations":["specialization:ux-ui-design"],"skillAreas":["skill-area:design-systems","skill-area:ui-styling"],"roles":["role:product-designer","role:frontend-engineer"],"workflows":["workflow:user-feedback-loop","workflow:product-discovery"]}
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:
{
"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:
:root {
--color-primary : #2196F3 ;
--color-primary-light : rgba (33 , 150 , 243 , 0.5 );
--color-secondary : #9C27B0 ;
--font-family-base : 'Inter' , -apple-system, BlinkMacSystemFont, sans-serif;
--font-size-base : 16px ;
--font-size-lg : 1.25rem ;
--font-weight-bold : 700 ;
--line-height-base : 1.5 ;
--spacing-xs : 4px ;
--spacing-sm : 8px ;
--spacing-md : 16px ;
--spacing-lg : 24px ;
--spacing-xl : 32px ;
--shadow-sm : 0 1px 2px rgba (0 , 0 , 0 , 0.05 );
--shadow-md : 0 4px 6px rgba (0 , 0 , 0 , 0.1 );
--shadow-lg : 0 10px 15px rgba (0 , 0 , 0 , 0.1 );
}
[data-theme="dark" ] {
--color-primary : #64B5F6 ;
--color-background : #121212 ;
--color-surface : #1E1E1E ;
}
$color-primary : #2196F3 ;
$color-primary-light : rgba (33 , 150 , 243 , 0.5 );
$color-secondary : #9C27B0 ;
$font-family-base : 'Inter' , -apple-system, BlinkMacSystemFont, sans-serif;
$font-size-base : 16px ;
$font-size-lg : 1.25rem ;
$spacing-xs : 4px ;
$spacing-sm : 8px ;
$spacing-md : 16px ;
$colors : (
'primary' : $color-primary ,
'primary-light' : $color-primary-light ,
'secondary' : $color-secondary
);
$spacing : (
'xs' : $spacing-xs ,
'sm' : $spacing-sm ,
'md' : $spacing-md
);
3. JavaScript/TypeScript Transformation Generate typed token modules:
export const colors = {
primary : '#2196F3' ,
primaryLight : 'rgba(33, 150, 243, 0.5)' ,
secondary : '#9C27B0' ,
} as const ;
export const typography = {
fontFamilyBase : "'Inter', -apple-system, BlinkMacSystemFont, sans-serif" ,
fontSizeBase : '16px' ,
fontSizeLg : '1.25rem' ,
fontWeightBold : 700 ,
lineHeightBase : 1.5 ,
} as const ;
export const spacing = {
xs : '4px' ,
sm : '8px' ,
md : '16px' ,
lg : '24px' ,
xl : '32px' ,
} as const ;
export type ColorToken = keyof typeof colors;
export type SpacingToken = keyof typeof spacing;
export interface Theme {
colors : typeof colors;
typography : typeof typography;
spacing : typeof spacing;
}
export const theme : Theme = {
colors,
typography,
spacing,
};
4. iOS Swift Transformation Generate Swift constants and extensions:
import UIKit
public enum DesignTokens {
public enum Colors {
public static let primary = UIColor (hex: "#2196F3" )
public static let primaryLight = UIColor (hex: "#2196F3" ).withAlphaComponent(0.5 )
public static let secondary = UIColor (hex: "#9C27B0" )
}
public enum Typography {
public static let fontFamilyBase = "Inter"
public static let fontSizeBase: CGFloat = 16
public static let fontSizeLg: CGFloat = 20
public static let fontWeightBold: UIFont .Weight = .bold
}
public enum Spacing {
public static let xs: CGFloat = 4
public static let sm: CGFloat = 8
public static let md: CGFloat = 16
public static let lg: CGFloat = 24
public static let xl: CGFloat = 32
}
}
extension UIColor {
convenience init (hex : String ) {
}
}
5. Android Transformation Generate Android resource files:
<?xml version="1.0" encoding="utf-8" ?>
<resources >
<color name ="color_primary" > #2196F3</color >
<color name ="color_primary_light" > #802196F3</color >
<color name ="color_secondary" > #9C27B0</color >
</resources >
<?xml version="1.0" encoding="utf-8" ?>
<resources >
<dimen name ="spacing_xs" > 4dp</dimen >
<dimen name ="spacing_sm" > 8dp</dimen >
<dimen name ="spacing_md" > 16dp</dimen >
<dimen name ="spacing_lg" > 24dp</dimen >
<dimen name ="spacing_xl" > 32dp</dimen >
<dimen name ="font_size_base" > 16sp</dimen >
<dimen name ="font_size_lg" > 20sp</dimen >
</resources >
6. Token Documentation Generation Generate comprehensive token documentation:
# Design Tokens Documentation
## Colors
| Token | Value | Description |
|-------|-------|-------------|
| `color-primary` | #2196F3 | Primary brand color |
| `color-primary-light` | rgba(33, 150, 243, 0.5) | Light variant of primary |
| `color-secondary` | #9C27B0 | Secondary brand color |
## Typography
| Token | Value | Usage |
|-------|-------|-------|
| `font-family-base` | Inter | Primary font family |
| `font-size-base` | 16px | Body text size |
| `font-size-lg` | 1.25rem | Large text size |
## Spacing Scale
| Token | Value | Usage |
|-------|-------|-------|
| `spacing-xs` | 4px | Tight spacing |
| `spacing-sm` | 8px | Small spacing |
| `spacing-md` | 16px | Medium spacing (default) |
MCP Server Integration This skill can leverage the following MCP servers:
Server Description Installation Superdesign MCP Server Design orchestrator with token support GitHub
Best Practices
Use semantic naming - Name tokens by purpose, not value (e.g., color-primary not color-blue)Establish a hierarchy - Use base/component/semantic token levelsDocument everything - Include descriptions and usage examplesVersion tokens - Track changes and migrationsValidate references - Ensure all token aliases resolve correctlyTest transformations - Verify output on target platforms
Process Integration This skill integrates with the following processes:
component-library.js - Design token consumptiondesign-system.js - Token management and versioningresponsive-design.js - Responsive token scaling
Output Format When executing operations, provide structured output:
{
"operation" : "transform" ,
"inputFormat" : "w3c-dtcg" ,
"outputFormats" : [ "css" , "scss" , "ts" ] ,
"status" : "success" ,
"tokenCount" : 45 ,
"artifacts" : [
"tokens.css" ,
"tokens.scss" ,
"tokens.ts"
] ,
"warnings" : [ ] ,
"validationResults" : {
"aliasesResolved" : true ,
"circularReferences" : false ,
"missingValues" : [ ]
}
}
Error Handling
Validate token structure before transformation
Report circular reference errors
Handle missing alias references gracefully
Provide helpful error messages for invalid values
Constraints
Token names must be valid identifiers for target platforms
Color values should be in standard formats (hex, rgb, hsl)
Dimension values must include units
Composite tokens require all sub-values
