Babysitter design-tokens

Design token management, generation, and multi-platform support.

install

source · Clone the upstream repo

git clone https://github.com/a5c-ai/babysitter

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/a5c-ai/babysitter "$T" && mkdir -p ~/.claude/skills && cp -r "$T/library/specializations/web-development/skills/design-tokens" ~/.claude/skills/a5c-ai-babysitter-design-tokens && rm -rf "$T"

manifest: library/specializations/web-development/skills/design-tokens/SKILL.md

Design Tokens Skill

Expert assistance for design token management.

Capabilities

Define design tokens
Generate platform outputs
Configure Style Dictionary
Manage token hierarchies
Handle theming

Token Structure

{
  "color": {
    "primary": {
      "50": { "value": "#eff6ff" },
      "500": { "value": "#3b82f6" },
      "900": { "value": "#1e3a8a" }
    }
  },
  "spacing": {
    "xs": { "value": "0.25rem" },
    "sm": { "value": "0.5rem" },
    "md": { "value": "1rem" }
  }
}

Style Dictionary Config

module.exports = {
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      transformGroup: 'css',
      buildPath: 'build/css/',
      files: [{ destination: 'variables.css', format: 'css/variables' }],
    },
  },
};

Target Processes

design-system
multi-platform-design
theming-implementation