the skill

Smoke Verify

Use when a UI change needs verification before being called done — after editing pages, components, or styles, when the user says "smoke verify", "check it renders", "verify that works", or before claiming any visual change is complete.

Overview

A clean compile proves nothing about the rendered page (undefined JSX references pass next build and crash at runtime). Verification means observing the rendered result. Gather the evidence below, then lead with a one-line verdict.

Required evidence (all four)

  1. Server or build log is clean. Check the dev server's background log (or build output) for error, Failed to compile, or runtime exceptions newer than the edit.
  2. The rendered page, seen. Navigate to the changed route and capture it.
    • Playwright MCP when connected: browser_navigate → browser_take_screenshot → browser_console_messages.
    • Otherwise headless Chrome (also the route for file:// pages): 
      "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
  --headless=new --disable-gpu --hide-scrollbars \
  --window-size=1400,900 --virtual-time-budget=5000 \
  --user-data-dir="$SCRATCH/chrome-smoke" \
  --screenshot="$SCRATCH/smoke.png" "<url>"
    Read the screenshot and confirm the intended change is visible — not merely that a page rendered.
  3. Console is clean. No new errors, React key warnings, or hydration mismatches.
  4. Second viewport when layout moved. If the change touches grid, flex, breakpoints, or a phone-frame prototype, re-capture at 390x844. This is the check most often skipped under time pressure and most often wrong.

Verdict shape

The first line of the report is exactly one of:

  • Smoke verify: PASS
  • Smoke verify: FAIL — <what broke>
  • Smoke verify: UNVERIFIED — <which evidence could not be gathered>

Evidence summary follows in 2–4 lines. Missing browser access means UNVERIFIED, never PASS.

Common mistakes

  • A curl 200 or "it compiles" upgraded to "verified" — that proves it didn't explode, nothing more.
  • Screenshot captured but never read.
  • Verifying the page instead of the change: the specific intended difference must be visible in the capture.