design-tokens
Design token management, generation, and multi-platform support.
npx skills add a5c-ai/babysitter --skill design-tokens --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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 ```json { "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 ```javascript 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
- Capabilities
- Token Structure
- Style Dictionary Config
- Target Processes
What does the design-tokens skill do?
Design token management, generation, and multi-platform support.
How do I install it?
Run `npx skills add a5c-ai/babysitter --skill design-tokens --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From a5c-ai/babysitter, a repository with 1,642 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.