← ClaudeAtlas

fidelity-gatelisted

Build a UI against a frozen visual reference without drift. An inventory extracted from the reference before any code, a relics list for what exists but should not, and a gate that MEASURES rather than judges - computed styles on a fixture carrying the reference's own data. Use when a mockup, design spec or screenshot is the contract.
jjanczur/tyran · ★ 79 · Code & Development · score 78
Install: claude install-skill jjanczur/tyran
# Fidelity gate — building against a frozen visual reference > Drift that goes uncaught on the first screen multiplies onto every screen > after it. Measured on one initiative that skipped this: four waves of > rework plus a reconciliation audit, because "looks right" had been accepted > as a verdict fourteen times. ## The division of labour, which is the whole idea **Appearance is read by a MACHINE. Intent is described in WORDS.** Text, typography, colour, geometry and icons are extracted from the reference *mechanically*. Never let a model retype them into prose: every restatement is a **lossy copy**, and the source is more precise than any description of it — `22px/700/#0a2540` has exactly one interpretation, and "large bold dark-blue heading" has hundreds. Words describe only what a static reference cannot contain: which content is an example and which is binding, where the data comes from, visibility conditions, the empty state, and the states that do not render (hover, focus, error). ## The overriding rule **The reference is the only source of visual truth.** Handoffs, tickets and prose describe BEHAVIOUR; appearance is settled by the reference alone. When prose disagrees with the reference about how something looks, **the reference wins**, you decide without asking, and you record the divergence. - An element **not** in the reference **does not exist**. Relics of older code are not carried over without an owner's decision. - An element **in** the reference **