Skip to content
Get packs

Stitched Full-Page Capture

Take reliable full-page screenshots of lazy-loaded, animated web pages by stitching scrolled viewport shots.

Source Download skill
Repository
MengTo/Skills
Stars
7,187
Licence
MIT
Files
7 files

What it does

When a normal browser full-page screenshot comes out blank, gray, or sparse on modern sites with scroll animations or lazy-loaded content, this skill teaches the agent a more dependable method. The agent scrolls through the live page, pauses so content can appear, takes a screenshot of each screen-sized section, and joins them into one tall image. It can also cut section crops from that image and check the result against other evidence such as a scroll video. A bundled Node.js script automates this for a manifest file used in daily UI inspiration articles.

Great for

  • Designers or editors who need accurate full-page captures of Framer or other scroll-animated sites
  • Teams maintaining a UI inspiration article pipeline that repairs broken screenshots
  • Anyone whose full-page screenshots keep showing mostly empty space

Skip it if

  • Simple static pages where a standard full-page screenshot already works, since the extra scrolling and waiting is unnecessary
  • Pages behind logins or private content you are not authorised to capture, because the script opens whatever URL the manifest lists
  • Situations needing a pixel-perfect browser-native capture, since stitched slices may show seams or slight alignment differences

Try asking

  • “Repair the full-page screenshot for item 4 in my UI inspiration manifest using the stitching script.”
  • “My Framer page screenshot is mostly blank, so capture it again with a stitched full-page method.”
  • “Regenerate the section crops for this article from a trustworthy full-page image and validate the dimensions.”
Step-by-step guide: how to use Stitched Full-Page CaptureInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 7 original files, the MIT licence and an attribution note.

    stitched-full-page-capture.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip stitched-full-page-capture.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip stitched-full-page-capture.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Run with --item to repair a single entry first and check the output before processing the whole manifest.
  • Increase --wait for slow pages, or lower --step below the viewport height to get more overlap between slices.
  • Always visually inspect the stitched image and compare it with the scroll video before accepting it.

What's inside

  • agents/openai.yaml
  • demo/expected-output.md
  • demo/index.html
  • demo/input.md
  • demo/PROMPT.md
  • scripts/stitch_full_page_capture.mjs
  • SKILL.md

Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.