Token drift

Skill connordibble/dibble/plugins/token-drift/skills/token-drift

Guardrails and craft for coding agents: portable skills, Claude Code plugins, and zero-dependency CLI checks for design tokens, supply-chain safety, evidence-backed writing, UI verification, and agent-tooling workflows.

Install

npx -y skills add connordibble/dibble --skill token-drift

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

One thing to look at

0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Audit design-token drift between Figma Variables exports, W3C DTCG JSON, and code-side CSS custom properties. Use when syncing design tokens, after a Figma token export, before a design-system release, when tokens look out of sync between design and code, when setting up a token pipeline, or when a token-drift report flags VALUE_DRIFT, MISSING_IN_CODE, ORPHAN_IN_CODE, TYPE_MISMATCH, or CYCLE.

SKILL.md

2.3 KB, as published. Nobody here has run it

token-drift

Use this skill when design tokens need to match between design source and code. The deterministic checker is scripts/diff-tokens.mjs.

Workflow

Identify the design/reference token source. Prefer a Figma Variables export in W3C DTCG JSON, but any DTCG JSON file works.
Identify the code token source. For v1, use the CSS file that defines custom properties, usually globals.css, tokens.css, or theme.css.
Run:

node <this-skill-directory>/scripts/diff-tokens.mjs <design.tokens.json> <code.css>

Use --json for machine-readable output. Use --strict when missing or orphaned tokens should fail CI.

Reading verdicts

VALUE_DRIFT: same token key, different normalized value. Treat this as a release blocker until design or code is updated.
TYPE_MISMATCH: same token key, different DTCG $type. Fix the source of truth before changing consumers.
CYCLE: an alias chain loops. Break the cycle before trusting any derived token.
MISSING_IN_CODE: design exports a token code does not define. This warns by default because design may be ahead of rollout.
ORPHAN_IN_CODE: code defines a token design no longer exports. This warns by default because deprecation can be staged.

Presence gaps fail with --strict.

Name mapping

The CSS parser maps custom properties to DTCG paths by stripping --, splitting on hyphens, and joining with dots. Example:

--color-brand-500 -> color.brand.500

Override this with .token-drift.json at the project root:

{
  "cssPrefix": "--",
  "separator": "-",
  "dtcgSeparator": "."
}

Escape hatches

Use escape hatches rarely and leave the reason near the token.

DTCG: $extensions: { "token-drift": "ignore" }
CSS: /* token-drift-ignore */ on the custom-property line

Reference

Read references/dtcg.md when you need DTCG shape details, alias examples, or the comparison rules behind the checker.

Gives 0 of the 12 instructions most design systems skills give

Counted across 528 of the 534 authors here whose files we hold, read 2026-08-06

create a custom theme if neededin 54 of 528, across 10 files
read the corresponding theme filein 54 of 528, across 10 files
ask which theme to applyin 53 of 528, across 9 files
show the theme showcasein 53 of 528, across 9 files
maintain visual identity across all slidesin 50 of 528, across 6 files
apply the specified colors and fontsin 47 of 528, across 3 files
get explicit confirmationin 45 of 528, across 1 file
Generate a design system before codingin 19 of 528, across 6 files
Maintain at least 4.5:1 color contrast ratioin 19 of 528, across 8 files
Describe component shapes, colors, shadows, and interaction statesin 18 of 528, across 4 files
Check Python installation and install if missingin 17 of 528, across 4 files
Default to html-tailwind if stack is unspecifiedin 17 of 528, across 4 files

Said here and by no other author read

run the diff-tokens checker
use --json for machine-readable output
use --strict when missing tokens should fail CI
treat VALUE_DRIFT as a release blocker
fix the source of truth for TYPE_MISMATCH
break alias cycles before trusting derived tokens

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once.