Screenshot

Published by zernie in vigiles

Review recommended337 installs

What this skill does

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.

Add Screenshot to your agent

Review the source and files first. When you are ready, copy the prompt instruction or use the CLI command supported by your environment.

Install with a prompt

Paste this into a compatible coding agent:

add this skill "screenshot" from https://github.com/zernie/vigiles

Install with the CLI

Run this command in a controlled environment after reviewing the repository:

npx skills add https://github.com/zernie/vigiles --skill screenshot

Skill instructions

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.

Files included

scripts/shot.mjs
SKILL.md