rendering-chromium-to-png

name: rendering-chromium-to-png description: Render a web page, local HTML file, or a real unpacked Chrome MV3 extension popup to a PNG so you can SEE it — then Read the image to put the actual rendered pixels in context. Catches layout / color / empty-state / render-throw bugs that code-reading misses (a view can look correct in source and render broken). Use before redesigning UI, when "verify rendered output before commit" applies, or to inspect an extension popup with its real chrome.* powers. Page mode renders any url/file; extension mode loads an unpacked MV3 extension (background SW + content scripts + popup) and screenshots a page inside it. user-invocable: true allowed-tools: Read, Bash(node:), Bash(pnpm exec playwright:), Bash(ls:*) model: claude-haiku-4-5 context: fork

Type-checking and tests verify code correctness, not feature correctness — a UI can be green on tsc/vitest and render broken (empty section, stuck spinner, wrong colors, a throw that aborts the render partway). This skill gives you eyes: render to a PNG, then Read the PNG so the actual pixels enter context. It's the HOW behind the fleet's "verify rendered output before commit" rule.

Page mode — render any URL or local file

node .claude/skills/fleet/rendering-chromium-to-png/screenshot.mts <url|file> \
  [--out p.png] [--width 580] [--height 0=full] [--theme dark|light] [--wait 2500] [--full]

Then Read the --out PNG. Defaults: 580px wide, full-page, dark theme, 2.5s settle.

Extension mode — load a real unpacked MV3 extension

node .claude/skills/fleet/rendering-chromium-to-png/screenshot.mts \
  --extension <unpacked-dir> [--page popup.html] [--out p.png] [--width 580] [--theme dark|light]

This loads the extension with its REAL powers — background service worker, content scripts, chrome.* APIs — via launchPersistentContext + channel: 'chromium' (the documented way to run extensions in headless Chromium; plain headless silently ignores --load-extension). It resolves the extension id from the background service worker, navigates to chrome-extension://<id>/<page> (popup by default), and screenshots it. Use this to see an extension popup as it actually renders in-browser, not a static file:// approximation.

How you actually "see" it

Run the script → it writes a PNG.
Read that PNG path. The harness decodes the image; the rendered pixels go into your context. You observe the UI the same as a human looking at a screenshot.

Caveats (state these honestly in your summary)

Static snapshot, not interactive. You can't hover/click/scroll in one shot. For a state behind a click, drive it (a small playwright script that clicks then screenshots) or capture different states by timing the --wait. Each state = its own screenshot.
Mock vs live data. If the page needs a backend that isn't running, you're seeing empty/placeholder states — say so. (A built-in ?preview mock, if the app has one, is still mock data; the layout/colors/bugs are real, the content isn't.)
MV3 service workers suspend after ~30s idle and restart on demand — long-lived evaluate() may throw "Service worker restarted"; keep interactions short.
No browser available (headless CI without chromium): say so explicitly rather than claiming you verified — run pnpm exec playwright install chromium first.

Browser dependency

playwright-core (fleet catalog devDep) drives a headless Chromium. If the binary is missing the script says so — install it with pnpm exec playwright install chromium.