How do I install the Screenshot skill?

Run npx skillmds add zernie/screenshot 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 Screenshot safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: executes scripts, makes network calls. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Screenshot?

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 Screenshot free to use?

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

Who published Screenshot?

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

Screenshot by zernie — Agent Skill

Name: Screenshot
Rating: 4.2 (5 reviews)
Author: zernie

Screenshot

Render a local web page / built site and capture full-page screenshots (desktop + mobile) using the pre-installed Chromium. Use when asked to screenshot, render, or "see how it looks" for the vigiles landing site (site/), the audit report (report/), or any local HTML/dev server. Handles the scroll-reveal gotcha (below-the-fold cards captured blank) automatically.

zernie c197352 2 files · 5.7 KB Updated Sep 9, 2026

File contents

screenshot — render a local page and capture it

Contributor dev skill. Drives the container's pre-installed Chromium (no playwright install, no browser download) via playwright-core to full-page-screenshot a locally-served page. Built from the hard-won gotchas of doing this by hand (see below).

When to use

"screenshot the landing page / site", "how does the report look", "render site/ and show me".
Verifying a UI change in site/ (the landing) or report/ (the audit report) before committing.

Procedure

Build the target (if it's a Vite app, you need dist/):
- Landing: cd site && npm install && npm run build → site/dist/
- Report: it builds with the root npm run build → dist/audit-report.template.html

Serve it on a port (relative asset refs need the dir as web root):

cd site/dist && python3 -m http.server 8899 >/tmp/httpd.log 2>&1 &
sleep 1 && curl -s -o /dev/null -w "%{http_code}\n" http://localhost:8899/   # expect 200

Ensure the driver (no browser download — uses PLAYWRIGHT_BROWSERS_PATH):

node -e "require.resolve('playwright-core')" 2>/dev/null || npm install --no-save playwright-core

Shoot with the bundled script → writes <outDir>/<name>-desktop.png + -mobile.png:
```
node .claude/skills/screenshot/scripts/shot.mjs http://localhost:8899/ "$SCRATCHPAD" landing
```
Override viewports with SHOT_WIDTHS="1440x900,768x1024,390x844".
Look before sending: Read the desktop PNG to sanity-check it rendered, THEN SendUserFile (display: render) so the user sees it. Send to the scratchpad dir, not the repo.

Gotchas this skill encodes (don't relearn them)

Scroll-reveal = blank cards. Sections that fade in on scroll (opacity-0 + IntersectionObserver) are captured INVISIBLE by a naive fullPage screenshot — the hero renders, everything below the fold is blank. The script scrolls top→bottom to trigger the reveals, then returns to top before shooting. If cards are blank, this is why.
Chromium is pre-installed at /opt/pw-browsers/chromium-*/chrome-linux/chrome; pass it as executablePath + --no-sandbox. NEVER run playwright install (blocked; wastes time).
CJS-from-ESM import: playwright-core's entry is CJS, and a script run from the scratchpad can't resolve the repo's node_modules by a bare import — use createRequire(cwd + '/package.json') (the script does this).
Mobile uploads sometimes 400 on SendUserFile — retry once, or send desktop alone.

Not shipped

This is a .claude/ contributor skill (this repo's own harness), not a published consumer skill.

---name: screenshotdescription: Render a local web page / built site and capture full-page screenshots (desktop + mobile) using the pre-installed Chromium. Use when asked to screenshot, render, or "see how it looks" for the vigiles landing site (site/), the audit report (report/), or any local HTML/dev server. Handles the scroll-reveal gotcha (below-the-fold cards captured blank) automatically.--- # screenshot — render a local page and capture it Contributor dev skill. Drives the container's **pre-installed Chromium** (no `playwright install`, no browser download) via `playwright-core` to full-page-screenshot a locally-served page. Built from the hard-won gotchas of doing this by hand (see below). ## When to use - "screenshot the landing page / site", "how does the report look", "render `site/` and show me". - Verifying a UI change in `site/` (the landing) or `report/` (the audit report) before committing. ## Procedure 1. **Build the target** (if it's a Vite app, you need `dist/`): - Landing: `cd site && npm install && npm run build` → `site/dist/` - Report: it builds with the root `npm run build` → `dist/audit-report.template.html` 2. **Serve it** on a port (relative asset refs need the dir as web root): ```bash cd site/dist && python3 -m http.server 8899 >/tmp/httpd.log 2>&1 & sleep 1 && curl -s -o /dev/null -w "%{http_code}\n" http://localhost:8899/ # expect 200 ``` 3. **Ensure the driver** (no browser download — uses `PLAYWRIGHT_BROWSERS_PATH`): ```bash node -e "require.resolve('playwright-core')" 2>/dev/null || npm install --no-save playwright-core ``` 4. **Shoot** with the bundled script → writes `<outDir>/<name>-desktop.png` + `-mobile.png`: ```bash node .claude/skills/screenshot/scripts/shot.mjs http://localhost:8899/ "$SCRATCHPAD" landing ``` Override viewports with `SHOT_WIDTHS="1440x900,768x1024,390x844"`. 5. **Look before sending**: `Read` the desktop PNG to sanity-check it rendered, THEN `SendUserFile` (display: render) so the user sees it. Send to the scratchpad dir, not the repo. ## Gotchas this skill encodes (don't relearn them) - **Scroll-reveal = blank cards.** Sections that fade in on scroll (`opacity-0` + IntersectionObserver) are captured INVISIBLE by a naive `fullPage` screenshot — the hero renders, everything below the fold is blank. The script scrolls top→bottom to trigger the reveals, then returns to top before shooting. If cards are blank, this is why. - **Chromium is pre-installed** at `/opt/pw-browsers/chromium-*/chrome-linux/chrome`; pass it as `executablePath` + `--no-sandbox`. NEVER run `playwright install` (blocked; wastes time). - **CJS-from-ESM import**: `playwright-core`'s entry is CJS, and a script run from the scratchpad can't resolve the repo's `node_modules` by a bare import — use `createRequire(cwd + '/package.json')` (the script does this). - **Mobile uploads sometimes 400** on `SendUserFile` — retry once, or send desktop alone. ## Not shipped This is a `.claude/` contributor skill (this repo's own harness), not a published consumer skill.

Frequently asked questions