mcpField
S
screenshot

screenshot

github.com/zernieTesting & quality15337 installsUpdated 1d ago
Repository

About screenshot

screenshot is a contributor skill for capturing locally served pages with pre-installed Chromium and playwright-core. It produces full-page screenshots and scrolls through the page first to trigger scroll-revealed content, with configurable viewport sizes.

Key features

  1. 01Captures local pages with pre-installed Chromium
  2. 02Creates desktop and mobile viewport screenshots
  3. 03Scrolls to trigger reveal-on-scroll content
  4. 04Supports custom viewport dimensions
  5. 05Checks rendered screenshots before sending

Use cases

  1. 01Review landing-page UI changes before committing
  2. 02Preview the audit report's page layout
  3. 03Capture desktop and mobile views of a local site

Install

Copy the command and run it in a terminal.

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

After installing, type/screenshotin Claude Code to confirm it loaded.

Bundled filesscripts/shot.mjs

Details

From the project README

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): 
    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): 
    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: 
    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.

Comments

Markdown supported