ontology-atlas: Skill for Claude Code

Build from the design system

• A primitive is a shared UI part such as a button or chip.
• A ramp is the finite set of allowed type, radius, shadow, and motion values.
• A hard cut is a surface appearing or disappearing in one frame.

The 2026-08-03 inventory found that only 1 of 419 raw buttons used the available primitive, 11 of 20 conditional surfaces hard-cut, and 143 chips used fifty size combinations. Missing parts and an unwritten order—not model taste—were the gap.

0-Z. Search before adding a value

--control-h-{sm,md,lg} (28/32/40) already existed when 24/30/34 were invented. Conflicts then produced an exception axis and one screen ended with 8–9 control heights.

Before proposing a new primitive or ramp value (dimension, colour, or spacing), follow this sequence. Reusing an existing value does not require repeating the history review; verify its current role and use it:

1. search app/globals.css for the role;
2. read “System growth rules” in docs/DESIGN-SYSTEM.md;
3. inspect git log --oneline -- app/globals.css | head -20 for history;
4. only then propose a value, with the measured number of blocked consumers.

The existing height family begins at --control-h-. A value invented without searching does not extend the system; it creates another one.

0-A. Route specification changes

Declare design-contract to pnpm design:route when changing:

• src/shared/ui/control-class.ts axes, options, or defaults;
• src/shared/ui/controls.tsx or surface.tsx primitive guarantees;
• type, leading, radius, shadow, or colour ramps in app/globals.css;
• the “Fixed scale contract” in .claude/rules/design.md.

The router selects design-system plus a contrasting seat, a design-system audit, and /gate-probe. During a 244-control normalization the author alone chose eight tones, seven shapes, three axes, and their values. Chip sizes fell from fifty to three but one screen retained 8–9 heights. A one-author specification is taste, not a system.