How a pack is measured

A pack is a token layer, the rules for spending it, and a list of what it bans. It is extracted from a real production interface rather than composed: colours, type, spacing, radii and motion tokens are read off the running page, and every ratio is recomputed by a gate before the pack ships.

Thirteen headings, and the same thirteen every time

Register, palette, type, texture and surface, components, hero, responsive, motion tokens, signature motifs, the signature element, micro-interactions, bans, and the traps the reference carries. Alongside it ships a token CSS file to copy verbatim and a React reference kit that renders the states a token layer cannot describe — hover, focus-visible, disabled, selected. 6 of the 39 packs sit on the core contract: they deliberately leave components, hero, responsive rules and their signature element to you, and say so in their own contract line.

Why the ratios are computed

A production site is a real source and an imperfect one. Across this library, references were found putting white text on a fill at 2.9:1, secondary copy at 2.5:1, and a focus ring composited to 1.3:1 against a 3:1 floor. Each pack keeps the measured hue and moves only lightness until the pairing clears, then states the correction with its number at the declaration — so a derived value can never later be read as a measured one.

What the gates cannot see

Structure is checkable and layout is not. 26 of the 39 packs were read off the render rather than off the stylesheet, and each kit is mounted in a browser at three widths and read back through getComputedStyle before its pack ships — which is how a control that promised 50px and drew 78px, and a card that painted white on white inside an inverted section, were both caught. The collection audit is the standing record of that.

Installing it

npx sheleg-design-skill installs the skill for Claude Code, Cursor and any agent that reads a SKILL.md; npx sheleg-design-skill --kit <pack> materialises one pack's React kit. The repository holds the gates. This is the visual layer of a family of skills that split the work around the code — what the interface must do, how it sounds, how a change reaches the repository.