screenshotlisted

# 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. **L