How do I install the Fleet Rendering Chromium To Png skill?

Run npx skillmds@latest add tomevault-io/fleet-rendering-chromium-to-png in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Fleet Rendering Chromium To Png safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Fleet Rendering Chromium To Png?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Fleet Rendering Chromium To Png free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Fleet Rendering Chromium To Png?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Fleet Rendering Chromium To Png by tomevault-io

Name: Fleet Rendering Chromium To Png
Author: tomevault-io

Fleet Rendering Chromium To Png

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. Use when this capability is needed.

tomevault-io Updated Sep 17, 2026

File contents

rendering-chromium-to-png

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.

Source: SocketDev/socket-mcp — distributed by TomeVault.

---name: fleet-rendering-chromium-to-pngdescription: 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. Use when this capability is needed.---# rendering-chromium-to-pngType-checking and tests verify code *correctness*, not *feature correctness* — a UI can begreen on `tsc`/`vitest` and render broken (empty section, stuck spinner, wrong colors, athrow 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```shnode .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```shnode .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 wayto 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 anextension popup as it actually renders in-browser, not a static file:// approximation.## How you actually "see" it1. Run the script → it writes a PNG.2. `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 ismissing the script says so — install it with `pnpm exec playwright install chromium`.---> Source: [SocketDev/socket-mcp](https://github.com/SocketDev/socket-mcp) — distributed by [TomeVault](https://tomevault.io).

Frequently asked questions