Skip to content
Beta Multi-model support (OpenAI, Gemini, and more) launching soon.
RBA RBA Skills

token-transform-pipeline

Installable Ships in design-system-manager — or copy the raw skill below.
Open Claude.ai

Paste into Claude Code, Claude.ai, the desktop app, or the browser extension — ⌘/Ctrl+V.

ExperimentalNo security review

Token Transform Pipeline (Style Dictionary v4)

Configure a Style Dictionary v4 build pipeline that transforms DTCG JSON token files into every platform output the project needs. Generates style-dictionary.config.js, build scripts, and platform-specific integration notes.

Usage

/token-transform-pipeline <tokens-path> [--outputs css,scss,js,tailwind,ios,android] [--brands brand-a,brand-b] [--platform sitecore|optimizely|umbraco|headless] [--prefix ds]

Examples:

  • /token-transform-pipeline tokens/ --outputs css,scss,js — web-only output
  • /token-transform-pipeline tokens/ --outputs css,tailwind --platform sitecore — SXA integration
  • /token-transform-pipeline tokens/ --brands acme,nova --outputs css,js — multi-brand build
  • /token-transform-pipeline tokens/ --outputs css,ios,android --prefix brand — all platforms

Phase 1 — Dependency Check and Install

Verify Style Dictionary v4 is installed:

node -e "require('style-dictionary'); console.log('sd ok')" 2>/dev/null || echo "not installed"

If not present, install:

npm install --save-dev style-dictionary@^4

For Tokens Studio users (sd-transforms):

npm install --save-dev @tokens-studio/sd-transforms@^1

For Tailwind output:

npm install --save-dev style-dictionary-tailwind@^1

Phase 2 — Detect Token Structure

Scan <tokens-path> to understand the file layout:

ls <tokens-path>

Expected structure (from design-token-generator):

  • tokens/core/ — primitive tokens
  • tokens/semantic/ or tokens/base/semantic/ — semantic aliases
  • tokens/component/ — component tokens
  • tokens/brands/<name>/semantic/ — brand overrides (multi-brand)

If a different structure is found, adapt the source globs in the generated config accordingly.

Phase 3 — Generate style-dictionary.config.js

Single-brand configuration

Generate style-dictionary.config.js at the project root (or tokens/):

// style-dictionary.config.js
import StyleDictionary from 'style-dictionary';
// Uncomment if using Tokens Studio exports:
// import { register } from '@tokens-studio/sd-transforms';
// register(StyleDictionary);

const sd = new StyleDictionary({
  source: [
    'tokens/core/**/*.json',
    'tokens/semantic/**/*.json',
    'tokens/component/**/*.json',
  ],
  platforms: {
    // ─── outputs based on --outputs flag ───
  },
});

await sd.buildAllPlatforms();

Populate platforms based on --outputs flag. See reference.md for each platform config block.

Multi-brand configuration

When --brands is specified, generate a build-tokens.js script that loops over brands:

// build-tokens.js
import StyleDictionary from 'style-dictionary';

const brands = ['brand-a', 'brand-b'];

for (const brand of brands) {
  const sd = new StyleDictionary({
    source: [
      'tokens/core/**/*.json',
      'tokens/base/semantic/**/*.json',
      `tokens/brands/${brand}/semantic/**/*.json`,
      'tokens/component/**/*.json',
    ],
    platforms: {
      css: {
        transformGroup: 'css',
        prefix: '<prefix>',
        buildPath: `dist/css/${brand}/`,
        files: [
          { destination: 'tokens.css', format: 'css/variables', options: { selector: `[data-brand="${brand}"]` } }
        ]
      },
      // ... other platforms
    },
  });
  await sd.buildAllPlatforms();
}

Brand themes are scoped under a [data-brand="<name>"] attribute selector, enabling runtime theme switching by setting document.documentElement.dataset.brand = 'brand-b'.

Phase 4 — CSS Custom Properties Output

Standard web output — recommended for all projects:

Config block (included when css in --outputs):

css: {
  transformGroup: 'css',
  prefix: '<prefix>',     // e.g. 'ds' → --ds-color-action-primary
  buildPath: 'dist/css/',
  files: [
    { destination: 'tokens.css',           format: 'css/variables', filter: (token) => token.filePath.includes('core') },
    { destination: 'semantic.css',         format: 'css/variables', filter: (token) => token.filePath.includes('semantic') },
    { destination: 'components.css',       format: 'css/variables', filter: (token) => token.filePath.includes('component') },
    { destination: 'tokens-all.css',       format: 'css/variables' },
  ]
}

Sitecore SXA: import tokens-all.css in the SXA theme's styles/ folder and reference via /sitecore/media library/Themes/<ThemeName>/Styles. Map --ds-* variables to SXA component CSS.

Optimizely: bundle tokens-all.css in the resource bundle registered via IRequiredClientResourceList. Inject on <body> or :root level.

Umbraco: add the generated CSS file to App_Plugins/<YourPackage>/css/ and reference in package.manifest under css.

Phase 5 — SCSS Output

Config block (included when scss in --outputs):

scss: {
  transformGroup: 'scss',
  prefix: '<prefix>',
  buildPath: 'dist/scss/',
  files: [
    { destination: '_tokens.scss', format: 'scss/variables' },
    { destination: '_maps.scss',   format: 'scss/map-deep' },
  ]
}

SCSS output generates both $ds-color-action-primary: ...; variables and Sass maps for programmatic access: map.get($tokens, 'color', 'action', 'primary').

Phase 6 — JavaScript / TypeScript Output

Config block (included when js in --outputs):

js: {
  transformGroup: 'js',
  buildPath: 'dist/js/',
  files: [
    { destination: 'tokens.js',  format: 'javascript/es6' },
    { destination: 'tokens.d.ts',format: 'typescript/es6-declarations' },
  ]
}

Exports named constants: export const DsColorActionPrimary = '#3b82f6'; The TypeScript declarations file provides full type safety in consuming projects.

Phase 7 — Tailwind Config Output

Config block (included when tailwind in --outputs):

tailwind: {
  transformGroup: 'js',
  buildPath: 'dist/tailwind/',
  files: [
    {
      destination: 'tailwind-tokens.js',
      format: 'javascript/es6',
      filter: (token) => ['color','dimension','fontFamily','fontWeight'].includes(token.type),
    }
  ]
}

After build, integrate into tailwind.config.js:

import tokens from './dist/tailwind/tailwind-tokens.js';

export default {
  theme: {
    extend: {
      colors:      tokens.colors,
      spacing:     tokens.spacing,
      fontFamily:  tokens.fontFamily,
    }
  }
};

Phase 8 — iOS Swift Output (optional)

Config block (included when ios in --outputs):

ios: {
  transformGroup: 'ios-swift',
  buildPath: 'dist/ios/',
  files: [
    { destination: 'DesignTokens.swift', format: 'ios-swift/enum.swift', className: 'DesignTokens' }
  ]
}

Generates a Swift enum with nested Color, Spacing, Typography structs compatible with SwiftUI and UIKit.

Phase 9 — Android Kotlin Output (optional)

Config block (included when android in --outputs):

android: {
  transformGroup: 'android',
  buildPath: 'dist/android/res/',
  files: [
    { destination: 'values/colors.xml', format: 'android/colors' },
    { destination: 'values/dimens.xml', format: 'android/dimens' },
  ]
}

Phase 10 — npm Scripts and CI Integration

Add to package.json scripts:

{
  "scripts": {
    "tokens:build":       "node style-dictionary.config.js",
    "tokens:build:watch": "nodemon --watch tokens/ --ext json --exec 'npm run tokens:build'",
    "tokens:clean":       "rimraf dist/css dist/scss dist/js dist/tailwind"
  }
}

For multi-brand builds:

{
  "scripts": {
    "tokens:build": "node build-tokens.js"
  }
}

Print integration checklist per platform once files are written.

Reference files

  • reference.md — All platform config blocks, custom transform recipes, Tokens Studio sd-transforms setup, file format options
  • examples.md — Complete working configs for single-brand CSS + Tailwind, and multi-brand CSS + JS setups
Technical details
Plugin
design-system-manager
Author
Dakota Smith
Skill name
token-transform-pipeline
Maturity
experimental
Security review
No security review
Owners
  • design
  • engineering
Argument hint
<tokens-path> [--outputs css,scss,js,tailwind,ios,android] [--brands brand-a,brand-b] [--platform sitecore|optimizely|umbraco|headless] [--prefix ds]
Allowed tools
  • Read
  • Write
  • Edit
  • Glob
  • Bash(node *)
  • Bash(npm install *)
  • Bash(npx style-dictionary *)
  • Bash(ls *)
  • Bash(cat *)
Source
plugins/design-system-manager/skills/token-transform-pipeline/SKILL.md

Edit this skill on GitHub — opens GitHub's web editor. No git knowledge needed.