← ClaudeAtlas

full-page-screenshotlisted

Use when the user asks to capture a full-page screenshot, long screenshot, or complete page capture of a web page. Handles SPA scroll containers, lazy-loaded images, and very tall pages via Chrome DevTools Protocol with zero external dependencies.
SanctifiedOps/nami-creative-brain-template · ★ 0 · Web & Frontend · score 60
Install: claude install-skill SanctifiedOps/nami-creative-brain-template
# Full Page Screenshot Capture a full-page screenshot of any web page via Chrome DevTools Protocol. Produces a single PNG that includes all content — even portions that require scrolling. Zero external dependencies beyond Node.js 22+ and Chrome with remote debugging enabled. ## Prerequisites - **Node.js 22+** (uses built-in `WebSocket`) - **Chrome/Chromium** with remote debugging enabled Check environment readiness: ```bash node "${SKILL_DIR}/scripts/full-page-screenshot.mjs" --check ``` If Chrome check fails, instruct user to open `chrome://inspect/#remote-debugging` and enable **"Allow remote debugging for this browser instance"**. ## Workflow ### Option A: Screenshot an already-open tab (recommended for authenticated pages) 1. List available tabs: ```bash node "${SKILL_DIR}/scripts/full-page-screenshot.mjs" --list ``` 2. Identify the target by title/URL, then capture: ```bash node "${SKILL_DIR}/scripts/full-page-screenshot.mjs" <targetId> /tmp/screenshot.png --width 1200 --dpr 1 ``` ### Option B: Screenshot a URL (opens a background tab, captures, closes) ```bash node "${SKILL_DIR}/scripts/full-page-screenshot.mjs" --url "https://example.com" /tmp/screenshot.png --width 1200 --dpr 1 --wait 15000 ``` > **Note:** `--url` mode creates a background tab. Pages requiring authentication (SSO, login walls) should use Option A instead. ### Parameters | Parameter | Description | Default | |-----------|-------------|---------| | `output` | Output PNG file path | `/tm