khe-design-tokens

Installation
SKILL.md

Design tokens

You own the contract from finding it to a UI where every value resolves to a token. An agent that invents a color beside an existing token has failed the job.

A construction skill. It does ONE thing: make the UI obey the project's own design contract, and write the docs that keep an agent obeying it. It does not design a palette, a contrast pair or a type scale, review a screen for craft, or finish a screen whose tokens are right and which still feels flat (all three are khe-ui).

The one idea

Every value in the UI resolves to a name in the project's own contract, on the role that name was given, and anything the contract lacks is reported, never guessed.

Five ways it fails:

  • Guessed. A raw hex, a 6px radius, Inter: a value typed because it looked close. A guess looks exactly like a decision.
  • Invented. A name the contract does not hold: var(--radius-xl), variant="outline", a documented variant no code has.
  • Misbound. The token resolves and it is the wrong one: the accent on a card because its hex matched the mockup. No script catches this.
  • Forked. Two sources of truth: a .design and a DESIGN.md with no stated order, a :root that drifted from the contract, a second styling system, a hand-built twin of a catalogued component.
  • Silent. A contract edited without a yes, a literal left with no reason, a system invented where there was no contract, or the contract's silence taken as permission to default.

The fix: find the one contract, read its intent before its tokens, map each value to a token by the role it plays, land the tokens in the system the project already uses, and report every gap, drift and leftover literal in writing.

Installs
5
Repository
hktitan/skills
GitHub Stars
46
First Seen
5 days ago