Shokhnur Ruziev

/handoff

Use it when the build keeps drifting from the design.

npx skills add rshokhnur/skills

Drift is not a discipline problem. It is a specification problem: the file said what the screen looks like and not what the component is, so every case the file did not draw got invented at build time.

Draw the states, not the screen

A screen is one frame of a component’s life. The build needs the rest: hover, press, focus, disabled, loading, error, empty, and — the one everybody forgets — the longest plausible content. A card designed with a four-word title will be shipped with a forty-word one.

Half of all drift is a state nobody drew.

Hand over values, not pictures

16px is a measurement. --space-4 is an instruction. The moment the file names its tokens the same thing the code does, handoff stops being translation and starts being lookup — and the two can be diffed, which is the only way drift gets caught early.

Say which numbers are load-bearing

Not every value in a file is a decision. Some are the grid; some are a text box that happened to land there. Mark the ones that matter — this gap is 12 because the row is 64 and the icon is 40 — so the build knows what it is allowed to round.

Review the build, in a browser

The design file is a claim about a rendered page and it is often wrong: text renders differently, real content is longer, the hover state you drew is unreachable on touch. Open the actual thing. Both directions of drift are real, and the file is not automatically the one that is correct.

Craft · Jun 2026