stitched-full-page-capture

Captures full-page screenshots by stitching settled viewport slices for lazy-loaded web pages.

Updated May 5, 2026
One-click install
npx skills add https://github.com/josippapez/ai-setup --skill stitched-full-page-capture-josippapez
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: stitched-full-page-capture
Source: https://github.com/josippapez/ai-setup/tree/main/claude/plugins/better-design/skills/stitched-full-page-capture
Command: npx skills add https://github.com/josippapez/ai-setup --skill stitched-full-page-capture-josippapez

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, ffmpeg, and includes scripts (resource) components.

What problem does it solve? Native browser fullPage screenshots often come back blank, gray, or missing sections on lazy-loaded, scroll-animated, Framer, or WebGL pages, even when a scroll video of the same page looks correct. This Skill produces a trustworthy full-page image by capturing settled viewport slices and stitching them together. ## Core Features & Use Cases - Stitched viewport capture: Warms the page with a full scroll, then captures overlapping viewport screenshots with settle waits and stitches them vertically into one full-page image. - Section crop regeneration: Recomputes article section crops from the stitched image and updates the manifest with corrected coordinates and capture metadata. - Validation workflow: Rejects candidates with blank bands, low visual content, or disagreement with the scroll video, and verifies dimensions and crop contiguity. - Use Case: A daily UI inspiration article's full-page screenshot is mostly blank because the Framer page lazy-loads content; run the helper script with the article manifest to repair the capture and regenerate all section crops. ## Quick Start Ask the AI to repair the blank full-page screenshot for a UI inspiration article by running the stitch script against its manifest.json.

Frequently Asked Questions about stitched-full-page-capture

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I capture a full-page screenshot of a lazy-loaded website?

Scroll the page once to warm lazy content, return to the top, then capture viewport-sized slices with about 2 seconds of settle time after each scroll stop. Stitch the slices vertically into one full-page image rather than relying on the browser's native fullPage capture.

Why is my Playwright fullPage screenshot blank or gray?

Native fullPage captures render the page in one shot, so lazy-loaded media and scroll-triggered reveal animations never mount, leaving blank or gray bands. Pages built with Framer or using WebGL/canvas are especially prone to this even when a scroll video looks correct.

How do I repair a broken full-page screenshot for a UI inspiration article?

Run the stitch_full_page_capture.mjs script with the article's manifest.json, optionally passing --item to repair a single entry. It reopens the live page, captures stitched viewport slices, regenerates section crops, and updates the manifest with corrected coordinates.

What viewport and scroll step settings should I use for stitched captures?

The default viewport is 1440x1100 with a 950-pixel scroll step so slices overlap slightly, plus a 2000 ms wait after each stop. Use a step smaller than the viewport height to avoid gaps between stitched segments.

When should I reject a full-page screenshot candidate?

Reject captures with blank, gray, or white bands, very low visual content, missing lazy-loaded sections, an extremely narrow content column, or disagreement with the scroll video. Validate the stitched image against the representative still, MP4, and motion frames before accepting it.