AI in practice / Quality

A component can pass five gates and fail the sixth.

Six component tickets arrived for a final design pass, four already signed off with “looks good to me”. I found defects in all six.

ContributionAuthor of the review method
PeriodAugust 2026
StatusIn use · Three reference documents published
6 / 6Components reviewed; all six had defects
515Override tests passing while the focus ring geometry was still wrong
1.89:1A completed checkmark against a 3:1 non-text requirement

A clean report on a broken component

A single-pass review produces a clean report on a broken component, and the defect then surfaces in a consuming product where it is expensive to trace back.

One of the six carried two AA failures that every other gate on it passed: a step number at 3.05:1 against a 4.5:1 text requirement, and a completed checkmark at 1.89:1 against a 3:1 non-text requirement.

Six gates, never implied

Structural correctness says nothing about token correctness. Token correctness says nothing about contrast. Contrast says nothing about whether a typed override survives a variant switch. Collapsing them into one review is what produces the clean-report-on-a-broken-component outcome.

The second decision was to diff against the builder’s own corrected reference file rather than an abstract standard. That gives the intended state, proof the fix works, and a filter against noise at once.

The rule that came out of it

Nothing goes in a review comment unless it is measured and confirmed absent from the reference file. Anything present in both is a shared pre-existing issue, and the builder should not be caught defending their own work.

Each run separately

API & namingRead by character code, not by eye — a lowercase versus capitalised property name is invisible in a scan and is a real convention break
Default variantThe default is the top-left-most variant by canvas position, not child index and not the order the options array reports
Mode & themeWalk explicit variable modes on every descendant, not the variant root, and check both collections
Token resolutionCall the resolve-for-consumer API at several depths and read the hex back, rather than reasoning about what a token should produce
ContrastComputed from measured hexes, per state, per theme
Override & structureText layer names identical across variants, plus height parity and fractional sizes

Severity discipline on top: three tiers, with renders-wrong-now leading, convention breaks in the middle, and fragile-mechanism last, so it is the first thing to cut if the list needs shortening.

Three causes, not one

On the checkbox, the override gate found a bug with three separate causes that a single sweep would have half-fixed: forty-four variants with a sibling name collision, ten with a colliding layer that is an ancestor rather than a sibling, and two with the label nested at a different depth alongside twenty-nine inconsistently named wrappers.

A sibling-only sweep reports success and leaves the middle group broken, which is exactly why the bug looked intermittent and already-fixed.

Five hundred and fifteen override tests passed while the focus ring geometry was still wrong — the atom rendering 22 by 22 instead of 18 by 18, pushing every label 4px right. Override correctness and geometry correctness needed separate gates.

Resolution measured at four depths turned a claimed blocker into housekeeping: semantic tokens resolved correctly and only the component-collection tokens leaked. That is the difference between “the mechanism is ugly” and “it renders wrong”.

Caught before publishing

A downscaled screenshot made two identical components look like they had different fills, because compression invents colour. A defect was inferred from a sibling measurement rather than measured on the node being accused, and turned out not to exist. An alignment complaint came from a crop, where absolute coordinates showed a normal layout. A stray mode pin reported on both variants was on one by the time of a re-scan minutes later, in a file someone else was actively editing. And one consequence was stated too broadly until resolution was measured.

A correction to my own work

It caught me. Earlier the same day I rebound fifteen focus-state fills on the reasoning that a focus state bound to a token named hover is a semantic violation. The shipped theme settles it: focus genuinely uses the hover blue. The original binding was correct and I had created the drift, so I reverted.

What I handed over

Review output is now one paste-ready comment per ticket, every item measured and confirmed absent from the builder’s own reference file, with nothing changed in their working file.

The pass was the occasion; three standing reference documents are the deliverable — the six-gate method, a write-up of why variant switching drops text overrides and the three separate causes, and a component normalisation method. The next person reviewing a build should not have to rediscover that a sibling-only sweep reports success on a component that is still broken.