Agent skill · software engineering · alirezarezvani
full-page-screenshot
Use when asked for a full-page or long screenshot of a web page. Captures SPA scroll containers, lazy images and very tall pages through Chrome DevTools Protocol with no extra dependencies.
Why this skill is useful
Adds a complete executable script for capturing full-page screenshots with advanced handling of SPAs and lazy-loaded content, which the AI cannot generate on its own.
What it needs
Requires node installed locally. About 3k tokens when loaded. Last updated 2026-08-05. 23,939 stars on the source repository.
What this skill does
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: 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: 2. Identify the target by title/URL, then capture: Option B: Screenshot a URL (opens a background tab, captures, closes) 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 /tmp/screenshot.png --width Viewport width in CSS pixels (articles: 1200, dashboards: 1440-1920) 1200 --dpr Device pixel ratio (2 = Retina, but 4x file size) 1 --wait Page load timeout in ms (--url mode only) 15000 --css Custom CSS to inject before capture (e.g., hide elements) — Verify Output Core Capabilities 1. SPA scroll container expansion — Detects overflow-y: auto/scroll containers, scrolls through them to trigger lazy-loading, then removes overflow constraints (including Tailwind h-[calc(...)]) so all content renders in a single pass. 2. DOM stability detection — After readyState=complete, monitors DOM element count until it stabilizes. This ensures SPA frameworks finish rendering dynamic content. 3. Lazy-load triggering — Scrolls the viewport incrementally to fire IntersectionObserver callbacks, then waits for all <img> elements to complete loading. 4. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills alirezarezvani/full-page-screenshot--976698