# Stitched Full Page Capture

Capture or repair reliable full-page screenshots for lazy-loaded, scroll-animated...

- Repository: https://github.com/MengTo/Skills (7170 stars)
- Category: Writing
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add MengTo/Skills --skill stitched-full-page-capture -g -a claude-code -y`
Codex: `npx skills add MengTo/Skills --skill stitched-full-page-capture -g -a codex -y`
Cursor: `npx skills add MengTo/Skills --skill stitched-full-page-capture -g -a cursor -y`
Gemini CLI: `npx skills add MengTo/Skills --skill stitched-full-page-capture -g -a gemini-cli -y`

## Description

Capture or repair reliable full-page screenshots for lazy-loaded, scroll-animated, Framer, WebGL/canvas, or reveal-heavy web pages. Use when full-page screenshots are blank, gray, white, sparse, show a tiny content strip, disagree with a working scroll video, or when article evidence/section crops must be derived from a trustworthy full-page image.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Stitched Full-Page Capture

## Overview

Use settled viewport screenshots instead of trusting one-shot browser `fullPage` captures. This is especially important for Framer pages and other lazy/scroll-animated sites where the MP4 can look correct while the tall screenshot is mostly blank.

## Core Workflow

1. Open the real page URL, not a marketplace thumbnail, cover image, remix page, or asset URL.
2. Warm the page by scrolling from top to bottom once so lazy media and reveal sections mount.
3. Return to the top.
4. Scroll downward in viewport-sized or slightly-overlapping steps.
5. Wait about 2 seconds after each scroll stop.
6. Capture the settled viewport.
7. Stitch the viewport captures vertically into one full-page image.
8. Cut section crops from that stitched image, not from the native browser `fullPage` screenshot.
9. Validate the stitched image against the representative still, MP4, and motion frames.

Reject a full-page candidate when it has blank/gray/white bands, very low visual content, missing lazy-loaded sections, an extremely narrow content column, or obvious disagreement with the scroll video.

## Script

For daily UI inspiration articles, use the helper script from this skill directory when available:

```bash
node <skills-root>/stitched-full-page-capture/scripts/stitch_full_page_capture.mjs \
  --manifest articles/YYYY-MM-DD-ui-inspiration-capture/manifest.json
```

The script:

- reads `items[].pageUrl`, `fullPageImage`, and `sectionImages`;
- opens each live page in Playwright Chromium;
- warms lazy content by scrolling once;
- captures settled viewport slices;
- stitches slices into `fullPageImage`;
- regenerates each existing section crop from the stitched image;
- updates `manifest.json` with `fullPageCaptureMethod: "stitchedViewportScreenshots"`, viewport, step, segment count, and corrected crop coordinates.

Useful options:

The rest: https://github.com/MengTo/Skills/blob/HEAD/agent-skills/codex/stitched-full-page-capture/SKILL.md