Design tokens

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

Babysitter enforces obedience on agentic workforces and enables them to manage extremely complex tasks and workflows through deterministic, hallucination-free self-orchestration

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.

What its author says it does

Copied from the file, not written here

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

SKILL.md

1.3 KB, 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