Output format·Web, Search & Scraping

Full Page Screenshot

Use when the user asks to capture a full-page screenshot, long screenshot, or complete page capture of a web page.

You say
Install this skill Read the source first Free Written by alirezarezvani · unverified publisher
Context cost
1.4k tokensestimated from the bundle, loaded when it triggers
Bundle
1 file · 5.5 kBtext throughout, nothing executable
Licence
MITfree to use
Last change
no release on file
Servers it uses
Noneruns standalone

What it does

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.

Installed, it changes the agent in these ways.

What this skill changes about the agent is not written down here yet. The listing was collected from its source, and the description is in its own SKILL.md.

Output format

Produces one artefact, exactly shaped.

browserautomationscreenshot

The skill itself

This is the whole product. A skill is instructions the model reads, so there is nothing behind the listing you cannot see first — the front matter loads with every session, and the body below it loads when the skill triggers.

SKILL.md5.5 kB · 124 lines
--- name: "full-page-screenshot" description: "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." ---
6# Full Page Screenshot
7
8Capture 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.
9
10## Prerequisites
11
12- **Node.js 22+** (uses built-in WebSocket)
13- **Chrome/Chromium** with remote debugging enabled
14
15Check environment readiness:
16
17```bash
18node "${SKILL_DIR}/scripts/full-page-screenshot.mjs" --check
19```
20
21If Chrome check fails, instruct user to open chrome://inspect/#remote-debugging and enable **"Allow remote debugging for this browser instance"**.
22
23## Workflow
24
25### Option A: Screenshot an already-open tab (recommended for authenticated pages)
26
271. List available tabs:
28
29```bash
30node "${SKILL_DIR}/scripts/full-page-screenshot.mjs" --list
31```
32
332. Identify the target by title/URL, then capture:
34
35```bash
36node "${SKILL_DIR}/scripts/full-page-screenshot.mjs" <targetId> /tmp/screenshot.png --width 1200 --dpr 1
37```
38
39### Option B: Screenshot a URL (opens a background tab, captures, closes)
40
41```bash
42node "${SKILL_DIR}/scripts/full-page-screenshot.mjs" --url "https://example.com" /tmp/screenshot.png --width 1200 --dpr 1 --wait 15000
43```
44
45> **Note:** --url mode creates a background tab. Pages requiring authentication (SSO, login walls) should use Option A instead.
46
47### Parameters
48
49| Parameter | Description | Default |
50|-----------|-------------|---------|
51| output | Output PNG file path | /tmp/screenshot.png |
52| --width | Viewport width in CSS pixels (articles: 1200, dashboards: 1440-1920) | 1200 |
53| --dpr | Device pixel ratio (2 = Retina, but 4x file size) | 1 |
54| --wait | Page load timeout in ms (--url mode only) | 15000 |
55| --css | Custom CSS to inject before capture (e.g., hide elements) | — |
56
57### Verify Output
58
59```bash
60# macOS
61sips -g pixelWidth -g pixelHeight /tmp/screenshot.png
62
63# Linux
64file /tmp/screenshot.png
65```
66
67## Core Capabilities
68
691. **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.
70
712. **DOM stability detection** — After readyState=complete, monitors DOM element count until it stabilizes. This ensures SPA frameworks finish rendering dynamic content.
72
733. **Lazy-load triggering** — Scrolls the viewport incrementally to fire IntersectionObserver callbacks, then waits for all <img> elements to complete loading.
74
754. **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.
76
775. **Auto-discovery of Chrome** — Reads DevToolsActivePort file to find the debugging port. Falls back to probing ports 9222, 9229, 9333.
78
796. **CDP Proxy fallback** — When a CDP proxy holds the browser WebSocket, the script falls back to proxy API endpoints (/eval, /screenshot, /scroll) for capture.
80
81## How It Works
82
83```
841. Discover Chrome debugging port
852. Connect via WebSocket (CDP)
863. Attach to target / create background tab
874. Set viewport width via Emulation domain
885. Wait: readyState + DOM stability
896. Detect & expand scroll containers
907. Scroll through page (trigger lazy-load)
918. Wait for images to complete
929. Measure final content height
9310. Page.captureScreenshot (or tiled capture)
9411. Stitch tiles if needed (PIL)
9512. Restore viewport, detach, clean up
96```
97
98## Anti-Patterns
99
100| Do NOT | Do instead |
101|--------|-----------|
102| Use --dpr 2 on pages > 10,000px tall | Use --dpr 1 to avoid Chrome memory issues |
103| Use --url for authenticated/SSO pages | Use --list + targetId on a tab where user is logged in |
104| Set --wait below 5000 for SPAs | SPAs need time to fetch data and render; use 10000-15000 |
105| Capture without checking --check first | Always verify Chrome debugging is available |
106| Hardcode viewport widths for all pages | Use 1200 for articles, 1440+ for dashboards/tables |
107| Skip output verification | Always verify with sips or file command after capture |
108
109## Troubleshooting
110
111| Symptom | Cause | Fix |
112|---------|-------|-----|
113| "Cannot find Chrome debugging port" | Remote debugging not enabled | Open chrome://inspect/#remote-debugging, enable it |
114| "WebSocket connection timeout" | CDP proxy holding the connection | Script auto-falls back to proxy API |
115| Blank/white screenshot | Page not loaded yet | Increase --wait value |
116| Truncated at bottom | Scroll container not expanded | Script handles this automatically; file an issue if it persists |
117| Out of memory | Very tall page + high DPR | Reduce --dpr to 1 and/or reduce --width |
118| "PIL not available for stitching" | Python Pillow not installed | Install with pip3 install Pillow or accept separate tile files |
119
120## Cross-References
121
122- [engineering/browser-automation](../browser-automation/SKILL.md) — General browser automation patterns via CDP/Playwright
123- [engineering/performance-profiler](../performance-profiler/SKILL.md) — Performance analysis that may complement visual captures
124
In the file
SKILL.md795 words
Files1
LicenceMIT
Why you can read it

Nothing in a skill executes. The client loads the text and the model follows it, so a skill can be audited the way a runbook is — by reading it.

What it costs in context

Skills are not billed by the call. They are paid for in context: every token the instructions occupy is a token your code, your diff and your conversation cannot use. Here is what this one takes and when it takes it.

≈70
always loaded
The name and description, so the model knows the skill exists and when to reach for it.
1,305
on trigger
The instruction body, read only when the skill fires.
0.69%
of a 200k window
Ten skills this size would take about 7% of the window before you open a file.
050k100k150k200k context window

1.4k tokens, estimated from the bundle at four bytes to the token, held for the rest of the session once it triggers. Middling. Fine to keep on in a project where you use it weekly, worth unloading in one where you never do.

Servers bill, skills cost

A server charges by the month. A skill charges once per session, in context, and then keeps charging it for as long as the session lives.

Before and after

The same question, put to the same model twice: once as it comes, and once with these instructions loaded.

No worked example has been published for this skill yet.

Adoption
Installsnone yet
Ratingno reviews yet

The procedure it runs

The procedure has not been published here. It is in the skill’s own SKILL.md, which its author has not sent to the marketplace yet.

Prose, not code

These steps are written for a model to follow, not executed by a runtime. It can still be told to skip one, and it will say so when it does.

Servers it uses

None. This skill calls no MCP servers at all.

Everything it needs is in the instructions, so it works in a project with nothing connected — the model reads the file and changes how it works with what it can already reach.

It writes no files and reaches no network. All it changes is how the model reasons and writes.

What it asks for
Writes filesno
Network accessno

Read from the allowed-tools line of this skill’s own SKILL.md. A skill grants no permissions of its own — it can only ask for tools your client already has.

What it will not do

Every skill is narrow, and the useful ones say where they stop. These are the jobs this one is the wrong tool for.

What this skill is not for has not been published here. Nothing is implied by that: it is a section the author has not filled in.

What is in the bundle

1 file, 5.5 kB on disk. A bundle is text throughout: the instructions the model reads, plus the templates it fills in.

  • SKILL.md5.5 kB
What is not in it

No dependencies and nothing executable: a skill is text the agent reads, so the bundle is 1 file you can review in full before installing. The MIT licence covers the templates and examples as well as the instructions.

Install

Installing copies the bundle into your project. Nothing runs at install time — the files sit on disk until the model reads them.

# Full Page Screenshot · 1.4k tokens when loaded npx mcprush@latest skill add alirezarezvani/full-page-screenshot

Writes to .claude/skills/full-page-screenshot/ in the current project. Add --global to put it in your home directory instead, for every project.

Which clients pick it up on their own

A skill is a folder of text. A client with a skills folder reads it without being told; everywhere else the same text works, it is just handed to the model rather than found.

Claude Code.claude/skills/
Claude Desktop
ChatGPT
Cursor.cursor/skills/
VS Code.github/skills/
Codex CLI.agents/skills/
Gemini CLI.gemini/skills/
Grok.grok/skills/
Zed.agents/skills/
Windsurf.windsurf/skills/
Agent SDK.claude/skills/
HTTP / API
This release
Versionnot versioned
Publishedno release date on file
PriceFree
Referencealirezarezvani/full-page-screenshot

Versions

Its author publishes no version number, so there is nothing here to pin to: what you install is the folder as it stands today. Instructions change more often than APIs do — a skill can be rewritten entirely without anything it depends on moving.

v
  • No earlier releases have been published to the marketplace.
Pinning

Nothing to pin to: this skill carries no version number of its own. What you install is what the folder holds on the day you install it.

Reviews

no reviews yet · no installs yet

Nobody has reviewed this skill yet. The rating is the mean of the reviews written here, so there is none until somebody writes the first.

Who can post

Only accounts that have had the skill installed for fourteen days, so a review is written after living with it rather than after reading it. Publishers may reply once.

Publisher
Servers0