design-tokens
Set up design tokens in a project that has none, and catch drift in one that does - color palette with a neutral ramp, spacing scale, radii, type scale, shadows, dark mode. Use when starting a project, when styles are full of hardcoded hex values, or when grays and spacing values multiply. For applying tokens to components use ui-polish; for motion tokens (curves, durations) use motion; for state coverage use ux-check; for words use ux-writing.
Install
With your agent
Install OMGSkills skill "icons8/agent-skills:skills/design-tokens" into this agent's normal skills directory: call the OMGSkills MCP get_install_plan tool for your agent and run the script it returns (it installs only the pinned commit and verifies SKILL.md), and stop if MCP or the pin is unavailable. Do not overwrite or change existing skills without asking me.
Manual command
git clone https://github.com/icons8/agent-skills /tmp/agent-skills && ln -s /tmp/agent-skills/skills/design-tokens ~/.claude/skills/design-tokensFrom README
Design Tokens A project without tokens accumulates twelve grays and five blues nobody chose. This skill bootstraps a minimal token system in one pass for projects that have no design system, then keeps the system from drifting. Icons8 assets are built to drop into it. Scope This skill owns creating the token system, its vocabulary, and drift detection. Neighbors own how tokens are applied to surfaces is ui-polish; motion tokens (curves, durations) are defined in motion and only referenced here; state coverage is ux-check. Two contested lines, settled here: the motion token file is not a parallel palette, it is motion territory and is excluded from the counts below. Radii derived by the concentric rule in ui-polish are arithmetic on tokens (calc(var(--radius-lg) - var(--space-2))) and are not new scale values; the same number typed as a literal is drift. Skills outside this line can own the same ground. If one is loaded, follow it and add only what it does not cover.
More from this repo
asset-check
Four mechanical asset checks on an interface that was just built or changed - emoji standing in for icons, sections...
icons8
Pick and fetch icons through the Icons8 MCP so a project ends up with one consistent set instead of a pile of...
icons8-design
The front door to Icons8 design help.