Full Page Screenshot Skill
A zero-dependency Claude Code skill that captures any web page — including SPAs, lazy-loaded and ultra-long pages — as one complete PNG via the Chrome DevTools Protocol.
Uses only Node built-in modules, connects to local Chrome DevTools port, no external dependencies or signs of network exfiltration; output defaults to /tmp, --url mode auto-closes the tab, temporary style changes are declared as restored. Deducted for: requiring Chrome remote debugging enlarges local attack surface without discussion of that risk or recovery; no rollback guidance; publisher unverified.
SKILL.md and README workflows are consistent (--check/--list/--url/targetId) with a prerequisite check, timeout parameter, and fallbacks (proxy fallback, shards retained without Pillow); happy path is plausible. Deducted for: only documentation was reviewed — the script source is not in evidence, so abnormal-input behavior, error-message quality and key-path reproduction cannot be statically confirmed; capped at the static ceiling of 10.
Trigger scenarios (long screenshot, full-page capture, in Chinese and English), two usage modes, parameter boundaries and non-fit ranges (login-required pages in --url mode, memory issues on ultra-long pages at high DPR) are disclosed; local Chrome approach has no mainland-China reachability problem. Deducted for: semantic trigger precision and boundaries ultimately depend on unexecuted verification.
Well-structured docs with prerequisites, parameter tables, architecture diagram, notes and install instructions; README declares MIT license. Deducted for: no license metadata in SKILL.md itself, no versioning/changelog, unclear maintenance ownership and update path, and an implicit dependency on an external 'web-access' skill for proxy compatibility.
Claimed value (zero-dependency full-page capture with SPA/lazy-load/ultra-long handling) has clear marginal value over manual screenshots and yields a directly usable PNG. Deducted for: output quality unverified in a static review, no committed tests or artifacts evidencing representative results, and >16,000px stitching depends on optional Pillow.
Auditable primary material exists (SKILL.md, README, install/usage commands), and the built-in-modules-only claim can be checked against the script. Deducted for: no CI, no test suite, no third-party execution evidence; capability claims (DOM stability wait, tiling) are not independently reproducible; capped under the static ceiling of 5.
- This is a static documentation-only review; no script was executed and all capability claims are unverified.
- Enabling Chrome remote debugging exposes a local debug port; use only in trusted environments and disable it afterwards.
- SKILL.md itself carries no license metadata and there is no versioning/changelog; maintenance ownership and update path are unclear.
- Stitching pages over 16,000px depends on optional Python Pillow; without it only shard files are kept for manual handling.
- For login-protected internal systems, the --url mode background tab may fail authentication; use targetId mode instead.
What does this skill do, and when should you use it?
This is a Claude Code skill that renders an entire scrollable web page into a single full-page PNG. Instead of Puppeteer or Playwright, it discovers Chrome's debug port from the DevToolsActivePort file and talks to the Chrome DevTools Protocol over WebSocket directly. It supports two capture modes: screenshot an already-open tab by targetId, or pass a URL to open a background tab that auto-closes after capture. It has dedicated handling for SPA inner scroll containers, lazy-loaded images, and pages longer than 16,000px, which are captured in tiles and stitched with Python PIL.
The script reads the DevToolsActivePort file to find the Chrome debug port and opens a WebSocket connection; it sets the viewport via Emulation.setDeviceMetricsOverride, waits for readyState=complete, then keeps watching the DOM element count until rendering stabilizes; it detects containers with overflow-y auto/scroll and overrides their CSS height constraints with !important to expand all content; it scrolls step by step to trigger IntersectionObserver lazy loading and waits for every img.complete; pages over 16,000px are captured in 8,000px tiles and stitched with PIL; finally it calls Page.captureScreenshot and saves the PNG. When a web-access CDP Proxy is running, it tries a direct connection first and falls back to the proxy API on timeout.
- Users who want to archive a technical article, report, or documentation as a single complete image
- Frontend engineers reviewing their own SPA who need to see the fully expanded rendering including inner scroll containers
- Users capturing login-protected internal systems (SAP, enterprise SSO) they have already signed into in Chrome
- Capturing ultra-long pages over 16,000px (long tables, chat logs) as one image
- Users who want Retina-quality output with adjustable viewport width and device pixel ratio
What are this skill's strengths and limitations?
- Zero npm dependencies — uses only Node.js built-in modules, no Puppeteer/Playwright install
- Thorough SPA handling: scroll container expansion, DOM stability wait, lazy-load triggering are all automated
- Automatic tiling and stitching for pages longer than 16,000px
- Provides --list/--check/--url subcommands, so it works standalone as a CLI outside Claude Code
- Compatible with the web-access CDP Proxy, degrading gracefully if direct connection fails
- Requires Chrome remote debugging enabled, which is a setup hurdle for non-technical users
- Ultra-long pages (>20,000px) at high DPR may cause Chrome memory issues, requiring a manual --dpr reduction
- --url mode creates a background tab that cannot complete authentication for login-required pages; targetId mode is required instead
- Tile stitching needs Python 3 + Pillow (usually preinstalled on macOS, unverified elsewhere)
- Temporarily modifies page viewport and scroll container styles during capture (restored afterwards)
- No test suite is documented; license is marked unknown in source data (README states MIT)
How do you install this skill?
Option 1: npx skills add LewisLiu007/full-page-screenshot. Option 2: git clone https://github.com/LewisLiu007/full-page-screenshot.git ~/.claude/skills/full-page-screenshot. Then open chrome://inspect/#remote-debugging in Chrome and check "Allow remote debugging for this browser instance". Verify prerequisites with node "${CLAUDE_SKILL_DIR}/scripts/full-page-screenshot.mjs" --check. No platform-specific install steps beyond this are documented.
How do you use this skill?
In Claude Code, just ask: "Take a full-page screenshot of https://example.com" or "Screenshot this page as a long image" — the skill triggers automatically on screenshot intent. It also works standalone as a CLI: node scripts/full-page-screenshot.mjs --list to list open tabs; node scripts/full-page-screenshot.mjs --url "https://example.com" output.png for one-shot URL capture; node scripts/full-page-screenshot.mjs <targetId> output.png for an existing tab. Optional flags: --width (default 1200; 1440-1920 for wide tables), --dpr (2 for Retina quality, 4× file size), --wait (--url mode only, default 15000ms). Verify output with sips -g pixelWidth -g pixelHeight <output>.
How does this skill compare with similar options?
The README explicitly positions this against Puppeteer and Playwright: it avoids those npm libraries and connects to the Chrome DevTools Protocol with Node.js built-ins only, eliminating npm install — but its scope is narrower than a full browser automation framework, covering only screenshot capture.