The comp is king: phased reproduction doctrine

Phase one is near-pixel-perfect reproduction at the comp's breakpoint,
with exactly three concessions (closest font, icons unless a library
was chosen, genuine comp defects); the overlap comparison is the
authority because models systematically believe their code recreation
succeeded when it did not, and regions that keep losing the comparison
ship as composited rendered assets instead. Phase two brings the
reproduction to life (interaction, motion, responsiveness), and
anything beyond the comp inherits the recorded system, never invented
container chrome.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

skill/reference/new-work.md

@@ -88,6 +88,8 @@ For `shape`, return the selected direction to [shape.md](shape.md) and stop befo
 
 ## 6. Build with full commitment
 
+When an approved comp exists, the comp is king, and the build happens in phases. Phase one is reproduction: rebuild the comp at its own breakpoint until a screenshot at the comp's width and height overlaps it near pixel-perfectly, materials, components, elevation, assets, and implied design language included. Exactly three concessions exist: fonts (the closest obtainable face), icons (exact match unless the user already chose an icon library), and genuine defects in the generated comp such as spelling errors. Everything else must match, and models systematically believe their HTML, CSS, and SVG recreation succeeded when it did not, so the overlap comparison is the authority, never your conviction: set the screenshot beside the comp at identical dimensions after every region, and when a region keeps losing that comparison, stop recreating it in code and produce it as a rendered asset composited into the page. Only when reproduction holds does phase two begin: static regions that should live become animated or interactive, reveals and motion are added, then responsiveness across the surface's devices. Where the comp does not cover the whole surface, continue building the remainder inside the comp's recorded world and design language; a component the comp never shows inherits the recorded system's corner language, line weights, and materials, and may not introduce container styles, border weights, or chrome the comp never uses. <!-- rule:skill-comp-is-king -->
+
 Build the assigned direction, not a safer interpretation of it. The form supplies structure, reading order, component conventions, and native motion; the product supplies every fact. Commit every atom: nav, buttons, inputs, and links are rebuilt in the form's vocabulary, and a stock component inside a committed form is a lapse. Land the first build fully committed; committing is the hard part, and the passes that follow exist to make the committed thing clear and effective, never to dilute it. In unattended work, the safe rendition is the known risk. <!-- rule:skill-commit-every-atom -->
 
 - **The first viewport is a thesis, not a header.** Demonstrate the mechanism immediately, at the scale the form has in life; do not trap the concept inside a standard hero or card shell. The memory test: if someone left after one viewport, what would they describe an hour later? If the honest answer is a mood, the concept has not committed yet.