DiscordSign up
SKILLS.SH

full-page-screenshot

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…

INSTALLATION
npx skills add https://github.com/alirezarezvani/claude-skills --skill full-page-screenshot
Run in your project or agent environment. Adjust flags if your CLI version differs.

SKILL.md

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:

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)

  • List available tabs:
node "${SKILL_DIR}/scripts/full-page-screenshot.mjs" --list
  • Identify the target by title/URL, then capture:
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)

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

ParameterDescriptionDefault
outputOutput PNG file path/tmp/screenshot.png
--widthViewport width in CSS pixels (articles: 1200, dashboards: 1440-1920)1200
--dprDevice pixel ratio (2 = Retina, but 4x file size)1
--waitPage load timeout in ms (--url mode only)15000
--cssCustom CSS to inject before capture (e.g., hide elements)—

Verify Output

# macOS

sips -g pixelWidth -g pixelHeight /tmp/screenshot.png

# Linux

file /tmp/screenshot.png

Core Capabilities

-

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.

-

DOM stability detection — After readyState=complete, monitors DOM element count until it stabilizes. This ensures SPA frameworks finish rendering dynamic content.

-

Lazy-load triggering — Scrolls the viewport incrementally to fire IntersectionObserver callbacks, then waits for all <img> elements to complete loading.

-

Tiled capture for very tall pages — Pages exceeding 16,000px are captured in 8,000px tiles and automatically stitched using Python PIL. Falls back to saving tiles separately if PIL is unavailable.

-

Auto-discovery of Chrome — Reads DevToolsActivePort file to find the debugging port. Falls back to probing ports 9222, 9229, 9333.

-

CDP Proxy fallback — When a CDP proxy holds the browser WebSocket, the script falls back to proxy API endpoints (/eval, /screenshot, /scroll) for capture.

How It Works

1. Discover Chrome debugging port

2. Connect via WebSocket (CDP)

3. Attach to target / create background tab

4. Set viewport width via Emulation domain

5. Wait: readyState + DOM stability

6. Detect & expand scroll containers

7. Scroll through page (trigger lazy-load)

8. Wait for images to complete

9. Measure final content height

10. Page.captureScreenshot (or tiled capture)

11. Stitch tiles if needed (PIL)

12. Restore viewport, detach, clean up

Anti-Patterns

Do NOTDo instead
Use --dpr 2 on pages > 10,000px tallUse --dpr 1 to avoid Chrome memory issues
Use --url for authenticated/SSO pagesUse --list + targetId on a tab where user is logged in
Set --wait below 5000 for SPAsSPAs need time to fetch data and render; use 10000-15000
Capture without checking --check firstAlways verify Chrome debugging is available
Hardcode viewport widths for all pagesUse 1200 for articles, 1440+ for dashboards/tables
Skip output verificationAlways verify with sips or file command after capture

Troubleshooting

SymptomCauseFix
"Cannot find Chrome debugging port"Remote debugging not enabledOpen chrome://inspect/#remote-debugging, enable it
"WebSocket connection timeout"CDP proxy holding the connectionScript auto-falls back to proxy API
Blank/white screenshotPage not loaded yetIncrease --wait value
Truncated at bottomScroll container not expandedScript handles this automatically; file an issue if it persists
Out of memoryVery tall page + high DPRReduce --dpr to 1 and/or reduce --width
"PIL not available for stitching"Python Pillow not installedInstall with pip3 install Pillow or accept separate tile files

Cross-References

BrowserAct

Let your agent run on any real-world website

Bypass CAPTCHA & anti-bot for free. Start local, scale to cloud.

Explore BrowserAct Skills →

Related skills

find-skills
2/3

Discover and install specialized agent skills from the open ecosystem when users need extended capabilities. Helps identify relevant skills by domain and task when users ask "how do I do X" or "find a skill for X" Provides npx skills find [query] command to search interactively and npx skills add <package> to install from GitHub or other sources Recommends skills based on install count (prefer 1K+), source reputation (official sources like Vercel, Anthropic), and GitHub stars to ensure quality Checks the skills.sh leaderboard first for battle-tested, popular options before running CLI searches

Verified authorvercel-labs
SKILLS.SH
3.1M29.5K
2026-08-25
grill-me
3/3

Relentless interviewing skill that stress-tests plans and designs through systematic questioning. Conducts deep-dive questioning across all aspects of a plan, walking through decision trees branch-by-branch until shared understanding is reached Automatically explores the codebase to answer questions where code context is available, reducing redundant back-and-forth Designed for design reviews, architecture validation, and pre-implementation planning where thorough vetting prevents downstream issues

mattpocock
SKILLS.SH
955K235K
2026-08-25
grill-with-docs
3/3

Relentless design interrogation that stress-tests plans against your domain model and sharpens terminology inline. Explores your codebase to ground discussions in existing code, glossaries (CONTEXT.md), and architectural decisions (ADRs) Challenges fuzzy language, resolves terminology conflicts, and updates your domain glossary as decisions crystallize Tests design decisions against concrete scenarios to expose edge cases and boundary violations Creates or updates CONTEXT.md and ADRs only when warranted, keeping documentation lean and decision-focused

mattpocock
SKILLS.SH
814K235K
2026-08-25
improve-codebase-architecture
3/3

Analyze codebases for architectural friction and propose module-deepening refactors as testability improvements. Explores codebases organically to surface shallow modules, tightly-coupled components, and untested seams rather than following rigid heuristics Applies John Ousterhout's "deep module" principle: small interfaces hiding large implementations for better testability and AI navigability Generates multiple radically different interface designs (minimalist, flexible, caller-optimized, ports & adapters) via parallel sub-agents, then recommends the strongest approach Creates GitHub issue RFCs documenting the problem space, design trade-offs, and refactoring rationale

mattpocock
SKILLS.SH
785K235K
2026-08-25

Stop writing automation&scrapers

Install the CLI. Run your first Skill in 30 seconds. Scale when you're ready.

Start free
free · no credit card