Design tokens

Skill a5c-ai/babysitter/library/specializations/web-development/skills/design-tokens

Design token management, generation, and multi-platform support.From its SKILL.md

Install

npx -y skills add a5c-ai/babysitter --skill design-tokens

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

SKILL.md

1.3 KB, 253 tokens by cl100k_base, as published. Nobody here has run it

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

What ships with it: 1 file

346 B alongside SKILL.md

README.md346 B