---

name: render-verify category: debug description: This skill should be used when the user generates HTML pages, figures, or visual artifacts and needs to verify they actually render correctly — "check the page", "does it look right", or after any site/figure build before publishing.

Render-Verify Loop

Never ship generated visual output you have not looked at. Text-level checks (grep for a string) catch missing content; only a rendered screenshot catches invisible content — overlapping curves, unreadable scales, broken layout, fonts that didn't load.

The loop

cd <site-dir>
(python3 -m http.server 8899 >/dev/null 2>&1 &)
sleep 1
google-chrome --headless --disable-gpu \
  --window-size=1100,2400 --hide-scrollbars \
  --virtual-time-budget=6000 \
  --screenshot=/tmp/render.png http://localhost:8899/page.html
kill %1

Then look at the image (multimodal read), judge, fix, re-render. Serve over HTTP rather than file:// so fetch()-driven scripts run.

What screenshots catch that grep cannot

• Two curves at different magnitudes plotted on one axis → one invisible (fix: plot the difference/offset on its own scale).
• A 0.2 mm effect on a 100 mm axis → invisible band.
• Template placeholders rendered literally (__VAR__, {name}).
• CJK fallback fonts, clipped labels, legend covering data.
• Interactive JS silently failing (readout stuck at "–").

Rules

1. Screenshot at desktop width AND once at ~375 px if the page is public.
2. For long pages, set window height to cover the section under change; for full-page checks use a tall window rather than scrolling stitches.
3. After publishing, verify the LIVE URL too: fetch it and assert key strings AND asset URLs return 200 — local success does not imply the deployment picked everything up.
4. Word-count pass for content pages: strip tags/scripts, count words; a page that doubled in words without new findings is duplicating.
5. Delete throwaway screenshots after judging; keep only ones that document a decision.