skills.rest
MengTo
MengToCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

stitched-full-page-capture

Captures full-page screenshots by stitching settled viewport segments from lazy-loaded web pages.

5.7k|685|Updated Feb 3, 2026
Search Tags:#playwright#lazy loading#FFmpeg#screenshot#stitching#web capture#full-page capture
One-click install
npx skills add https://github.com/MengTo/Skills --skill stitched-full-page-capture
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: stitched-full-page-capture
Source: https://github.com/MengTo/Skills/tree/main/agent-skills/codex/stitched-full-page-capture
Command: npx skills add https://github.com/MengTo/Skills --skill stitched-full-page-capture

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, 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 replaces one-shot captures with a reliable stitched workflow so full-page images and section crops can be trusted as evidence.

Core Features & Use Cases

  • Stitched viewport capture: Scrolls the page in overlapping viewport-sized steps, waits for lazy media and reveal animations to settle, captures each segment, and stitches them vertically with ffmpeg.
  • Section crop regeneration: Recomputes section crop coordinates from the stitched image and updates the article manifest with capture method, viewport, step, and segment count metadata.
  • Validation workflow: Rejects candidates with blank bands or missing content and verifies results against scroll videos, image dimensions, and project checks.
  • Use Case: A daily UI inspiration article has a full-page screenshot with two gray sections from a Framer site. Run the helper script with the article manifest to re-capture the live page in Playwright, stitch the segments, and regenerate all section crops.

Quick Start

Ask the agent to use the stitched-full-page-capture skill to repair the blank full-page screenshot for a given article manifest by running its stitch script against the live page URL.

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 settled viewport screenshots in overlapping steps and stitch them vertically. The included Playwright and ffmpeg script automates this against a manifest of page URLs.

Why is my full-page screenshot blank or gray on Framer sites?▼

Framer and similar scroll-animated pages lazy-load media and trigger reveal animations only when sections enter the viewport, so a one-shot fullPage capture renders them as blank bands. Stitched viewport captures with wait times let each section mount before being photographed.

What tools are needed to stitch viewport screenshots together?▼

The workflow uses Playwright Chromium for scrolling and viewport screenshots, ffmpeg for cropping segments and vertically stacking them, and sips to verify final image dimensions. All are invoked by the included stitch_full_page_capture.mjs script.

Can I repair only one item in a capture manifest?▼

Yes, pass the --item flag with a 1-based index to repair a single manifest entry instead of all items. The script re-captures that page, regenerates its full-page image and section crops, and updates only that item's metadata.

When should I not trust a native browser fullPage screenshot?▼

Distrust it when it shows blank, gray, or white bands, very low visual content, a narrow content strip, or disagrees with a working scroll video of the same page. Use the stitched capture as the source of truth unless the native capture visually matches it.

Related Skills

Explore More Design & Creative Skills→
NaKMiersNaKMiers
1

canary

Monitor live URLs for console errors and performance regressions after deploy.

Community
Advanced
fysoul17fysoul17
4

image-to-code

Generate design images and extract layout, typography, and styling into frontend code.

Community
Advanced
lc0rplc0rp

ios-simulator-screenshot

Capture and stitch full-page screenshots from a booted iOS Simulator.

Community
Advanced
onbluerosesonblueroses
3

mobile-preview

Capture mobile viewport screenshots of web pages to test responsiveness.

Community
Basic