How to use the Stitched Full-Page Capture agent skill

What does the skill make the agent do?

A one-shot browser full-page capture can miss content on modern sites. Lazy-loaded media and reveal animations often only appear when they scroll into view, so the tall screenshot ends up mostly empty even when the page works fine in a scroll video.

This skill tells the agent to use settled viewport screenshots instead. It opens the real page URL, scrolls from top to bottom once to load lazy sections, returns to the top, then moves down in screen-sized or slightly overlapping steps. It waits about 2 seconds after each scroll stop, captures the viewport, and stitches the captures vertically into one full-page image. Section crops are then cut from that stitched image rather than the native full-page screenshot.

• Rejects candidates with blank, gray or white bands, very low visual content, missing lower sections, or an extremely narrow content column.
• Checks the stitched image against representative stills, MP4 and motion frames where those exist.

How do you install the Stitched Full-Page Capture skill?

Download the skill ZIP from the item page on this directory. Then choose one of the install routes below. The skill folder is named stitched-full-page-capture and its main instructions are in SKILL.md.

For a personal install, unzip the download into ~/.claude/skills/. To limit it to one project, unzip it into that project's .claude/skills/ folder instead. In the Claude apps, you can also upload the skill under Settings, then Capabilities, then Skills.

• Personal install: ~/.claude/skills/
• Project install: the project's .claude/skills/ folder
• Claude apps: Settings, then Capabilities, then Skills, then upload

How do you trigger the skill with a natural request?

You do not need to memorise a command. Describe the problem in plain words and name the page. The skill's description lists the situations it covers, so requests about blank, gray, white or sparse full-page screenshots, lazy-loaded or Framer pages, or section crops that must match a trustworthy full-page image should match it.

If the agent does not pick the skill up on its own, name it directly with $stitched-full-page-capture, as the demo prompts in the source do.

• Our full-page screenshot of this Framer page is mostly blank. Please recapture it with the stitched method and check the lower sections.
• Use $stitched-full-page-capture to repair item 4 in the manifest and confirm the section crops are contiguous.
• The scroll video of this page looks right but the tall screenshot has two gray sections. Rebuild the full-page image from viewport captures.

How do you run the helper script for a UI inspiration manifest?

The bundled Node.js script automates the method for daily UI inspiration articles. It reads items' page URLs and image paths from a manifest.json file, opens each live page in Playwright Chromium, captures and stitches the slices, regenerates each section crop, and updates the manifest. The script is run from the skill's scripts folder with a path to your article's manifest. Replace the date placeholder with your own article folder name.

• --item 4 repairs only item 4, counting from 1.
• --viewport 1440x1100 is the default viewport.
• --step 950 is the default scroll step; use a value smaller than the viewport height to get overlap.
• --wait 2000 sets the wait in milliseconds after each scroll stop.
• --quality 3 sets the ffmpeg JPEG quality, where lower is better.

How do you check the result?

Do not accept the output just because the script finished. Look at the page that was visibly wrong before and confirm the new full-page image includes lower-page content. The skill also suggests checking the image dimensions with the macOS sips command, confirming that section crop coordinates are contiguous and end at the full-page image height, and running your project's normal checks.

• Confirm the image is not mostly blank.
• Run sips -g pixelWidth -g pixelHeight on the full-page JPEGs and check the sizes are as expected.
• Confirm crop coordinates run contiguously to the full image height.
• Run your project's checks, such as the git diff check and any duplicate checker the project uses.

What are the safety notes and limits?

The script runs code on your machine and uses the network, because it opens every URL listed in the manifest in a browser. Only capture pages you are authorised to capture. Pages behind a login or private content are not a good fit, since the script opens whatever URL the manifest lists.

The method also has trade-offs. Stitched slices may show seams or slight alignment differences, so do not use it where you need a pixel-perfect browser-native capture. For a simple static page, a standard full-page screenshot is usually enough, and the extra scrolling and waiting is unnecessary. The skill also says not to treat a scroll video as a substitute for full-page still evidence.

• Requires Node.js, Playwright with Chromium, ffmpeg for JPEG encoding, and a manifest.json in the expected folder structure.
• The sips validation step is a macOS command.
• Native full-page screenshots can be kept as comparison candidates but should not be the source of truth unless they match the stitched capture.