valdi-mock-iterate

Provide both the mock image and the rendered screenshot from valdi inspect snapshot, then scan layout, spacing, typography, colors, and components systematically. Report each difference as a structured entry with expected value, actual value, and a specific code fix.

Run the bundled diff.py script with the --auto-mask flag on the mock and rendered images. It prints a match percentage and writes a side-by-side diff image to /tmp/mock-vs-render-diff.png where bright spots indicate mismatches.

The most frequent issues are font sizes 30-50% too small, vertical spacing too tight, text colors too dark, card padding too small, and border radii too sharp. Recommending all of these fixes at once dramatically reduces iteration count.

Avatars, thumbnails, and Bitmoji render as colored placeholder circles that unfairly penalize the match score. The --auto-mask flag auto-detects and excludes these regions so the score reflects real layout and styling differences.

Do not report platform rendering differences like system font rendering, shadow approximation, scroll indicators, or status bar chrome. Also skip animation timing, gesture behavior, and dynamic data, since these cannot be fixed by editing the .tsx layout file.