Full Page Screenshot
Use when the user asks to capture a full-page screenshot, long screenshot, or complete page capture of a web page.
Before & after
Same prompt, same agent — the only difference is the skill.
I can take a screenshot of the SPA for you, but with lazy-loaded images I'd need to be careful to make sure everything loads. The tricky part with single-page apps is that sometimes images don't load until you scroll to them. I'd probably need to scroll through the page or wait for images to load. Do you want me to just capture what's visible above the fold, or do you need the entire page including all the lazy-loaded content? How tall is this page? Are there any specific sections you want to make sure are included? Once I understand what you need, I can take the screenshot.
FULL-PAGE SCREENSHOT: SPA with Lazy-Load Handling
PROCESS EXECUTED
1. Chrome DevTools Protocol connection established
2. Page loaded; waited for network idle (all requests complete)
3. Lazy-load detection:
- Scanned DOM for Intersection Observer instances
- Simulated viewport scrolls in 100px increments from top to bottom
- Waited 200ms after each scroll for images to load (async image requests detected)
4. Final content height: 8420px (scrolled to bottom)
5. Screenshot captured at full viewport height using DevTools Protocol
OUTPUT DETAILS
Filename: spa-full-page-screenshot-2026-07-31.png
Format: PNG, 1280x8420 pixels (1280px viewport width × full scroll height)
File size: 4.2MB
Image coverage: 100% of all lazy-loaded images captured (342 images total, all loaded)
Compression: Lossless (no quality reduction)
LAZY-LOAD VERIFICATION
Images detected and loaded during scroll simulation: 342
Images visible in final screenshot: 342 (100% coverage)
Loading time per scroll increment: Avg 180ms
Total time to full page load: 18 seconds (includes all lazy-load delays)
Stalled requests: None
QUALITY ASSURANCE
Page ready signal: DOM fully rendered + network idle
All text content readable: Yes
All images loaded: Yes (no broken placeholders)
No infinite scroll detected: Page has defined bottom (8420px)
Console errors: None
DOWNLOAD READY
Path: /tmp/spa-full-page-screenshot-2026-07-31.png
Ready to: Download, share with team, add to documentation, or upload to design toolAbout this skill
name: full-page-screenshot description: Use when Use when the user asks to capture a full-page screenshot, long screenshot, or complete page capture of a web page.
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 images, and very tall pages via Chrome DevTools Protocol with zero external dependencies.
What you get
- Public GitHub repo (alirezarezvani/claude-skills)
- the full-page-screenshot skill folder with SKILL.md. Part of a 337-skill / 30-agent / 70-command install.
Customize your output
- Fork the repo and adapt the skill's instructions and references to your workflow.
Example output
Activates automatically when your request matches Full Page Screenshot; chains with the other skills, agents, and commands in the collection.
Best for
Creators, builders, and teams using Claude Code.
SKILL.md preview
---
name: full-page-screenshot
description: Use this skill when the user asks to capture a full-page, long, or complete screenshot of a web page.
version: 1.0.0
category: Development / Engineering
author: AgentVolt
license: proprietary
tags:
- development
- engineering
---
# Full Page Screenshot
Captures a complete, full-page screenshot of a web page via the Chrome DevTools Protocol, handling scroll containers, lazy-loaded images, and very tall pages.
## When to use
… (sign up to view the full skill)More development skills
View all Development skills →Generate
Scaffold code, tests, and boilerplate from a short spec.
Performance Profiler
Systematic performance profiling for Node.js, Python, and Go applications.
Threat Detection
Use when hunting for threats in an environment, analyzing IOCs, or detecting behavioral anomalies in telemetry.
Agent Harness
Turns a domain folder of skills into a bounded agentic loop: compile a goal into a task plan, execute with the domain's tools, verify every task, retry within a budget.