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

- **Type:** Skill
- **Install:** `agentstack add skill-zernie-vigiles-screenshot`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [zernie](https://agentstack.voostack.com/s/zernie)
- **Installs:** 0
- **Category:** [Developer Tools](https://agentstack.voostack.com/c/developer-tools)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [zernie](https://github.com/zernie)
- **Source:** https://github.com/zernie/vigiles/tree/main/.claude/skills/screenshot
- **Website:** https://vigiles.sh

## Install

```sh
agentstack add skill-zernie-vigiles-screenshot
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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 `/-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.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [zernie](https://github.com/zernie)
- **Source:** [zernie/vigiles](https://github.com/zernie/vigiles)
- **License:** MIT
- **Homepage:** https://vigiles.sh

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** yes
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-zernie-vigiles-screenshot
- Seller: https://agentstack.voostack.com/s/zernie
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.