stitched-full-page-capture
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.
- Installs
- 1.5K
- Last 24h
- +10
- Trending rank
- #8832
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/mengto/skills --skill stitched-full-page-capture- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads stitched-full-page-capture automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
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
- Open the real page URL, not a marketplace thumbnail, cover image, remix page, or asset URL.
- Warm the page by scrolling from top to bottom once so lazy media and reveal sections mount.
- Return to the top.
- Scroll downward in viewport-sized or slightly-overlapping steps.
- Wait about 2 seconds after each scroll stop.
- Capture the settled viewport.
- Stitch the viewport captures vertically into one full-page image.
- Cut section crops from that stitched image, not from the native browser
fullPagescreenshot. - 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:
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, andsectionImages; - 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.jsonwithfullPageCaptureMethod: "stitchedViewportScreenshots", viewport, step, segment count, and corrected crop coordinates.
Useful options:
--item 4 # repair only item 4, 1-based
--viewport 1440x1100 # default
--step 950 # default; use less than viewport height for overlap
--wait 2000 # ms to wait after each scroll stop
--quality 3 # ffmpeg JPEG quality, lower is better
Validation
After capture or repair:
- Inspect at least the page that was visibly wrong before.
- Confirm
sips -g pixelWidth -g pixelHeight full-page/*.jpgreports expected wide/tall dimensions. - Confirm the full-page image is not mostly blank and includes lower-page content.
- Confirm section crop coordinates are contiguous and end at the full-page image height.
- Run the project’s normal checks, for example:
git diff --check -- articles/YYYY-MM-DD-ui-inspiration-capture/content.md articles/YYYY-MM-DD-ui-inspiration-capture/manifest.json
node scripts/check-ui-inspiration-duplicates.mjs articles/YYYY-MM-DD-ui-inspiration-capture/manifest.json
for f in articles/YYYY-MM-DD-ui-inspiration-capture/videos/*.mp4; do ffprobe -v error "$f" >/dev/null; done
Notes
- The scroll video is evidence that the page can render during real scrolling, but it is not a substitute for full-page still evidence.
- Native
fullPagescreenshots can still be saved as comparison candidates, but do not use them as source of truth unless they visually match the stitched capture. - For daily UI articles, update the manifest and commit only the repaired article assets and metadata.
FAQ
What does the stitched-full-page-capture skill do?
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.
How do I install stitched-full-page-capture?
Run npx skills add https://github.com/mengto/skills --skill stitched-full-page-capture in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/stitched-full-page-capture/ (personal) or .claude/skills/stitched-full-page-capture/ (project).
Which AI agents can use stitched-full-page-capture?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is stitched-full-page-capture safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains stitched-full-page-capture?
It is published by mengto in mengto/skills. It has 1,491 recorded installs.
More from mengto/skills
build-awwwards-quality-sites
mengto/skills
Art-direct and implement distinctive, motion-rich marketing, editorial, portfolio, and landing websites with original reference-inspired imagery, standout heroes, GSAP choreography, one smooth-scroll engine, optional Three.js shaders, honest icon and logo sourcing, photo avatars, accessibility, and performance safeguards. Use when a user asks for an Awwwards-quality, premium, cinematic, interactive, high-concept, or motion-led website, or explicitly requests this visual and motion system.
cinematic-gsap-lenis-motion-system
mengto/skills
Create premium cinematic web motion systems with GSAP, ScrollTrigger, and Lenis. Use for luxury editorial websites, creative studio portfolios, Awwwards-style interactions, smooth scroll reveals, staggered text, parallax, pinned sections, magnetic hover states, custom cursors, and mouse-reactive layered movement.
beautiful-shadows
mengto/skills
Apply exact Tailwind arbitrary shadow utilities for polished, layered neutral elevation. Use when compact cards, controls, panels, popovers, hero media, feature callouts, or modal-like containers need refined shadows without default Tailwind shadow scales or colored tinting.
cinematic-scroll-storytelling
mengto/skills
Create cinematic scroll-driven landing pages with Lenis smooth scrolling, GSAP ScrollTrigger, scroll-linked progression, staggered text reveals, sticky card stacks, parallax backgrounds, scroll-scrubbed transitions, footer reveals, and immersive preloaders. Use when analyzing or building premium editorial scroll experiences, sticky project stacks, kinetic typography, or section-by-section storytelling.
animation-on-scroll
mengto/skills
Create an on-scroll animation trigger using IntersectionObserver with Tailwind-friendly animation classes and keyframes. Use when asked for scroll-reveal, animate-on-scroll, or sequencing element animations when they enter the viewport.
landing-page
mengto/skills
Use when designing or rewriting a high-converting landing page (single-offer page) for SaaS/apps/services. Covers structure, layout patterns, conversion strategies, copywriting, SEO/AEO, and common pitfalls.
Popular media & creative skills
hyperframes
heygen-com/hyperframes
Read first to make, edit, animate or render any video with HyperFrames (HTML rendered to video), including launch films, explainers, music videos, charts, maps, vertical clips, title cards, captions and overlays. Holds the render contract, the work loop and what each kind of video needs.
media-use
heygen-com/hyperframes
Get or make any media for a HyperFrames video - music, sound effects, images, icons, logos, voiceover, avatar and generated video, transcripts, cutouts, colour grades and looks - with HeyGen or free local tools, and mix placed audio. Also for footage that looks dark, flat or dull, or should be stylized or hidden.
hyperframes-registry
heygen-com/hyperframes
About 450 ready-made HyperFrames blocks and components installed as editable source - transitions, overlays, titles, kinetic type, captions, charts, map overlays, 3D, camera moves. Use it before hand-building any named visual (CRT scanlines, glitch, film grain, a chart); also for hyperframes add and catalog.
hyperframes-creative
heygen-com/hyperframes
Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use hyperframes-animation.
ai-video-generation
101-skills/superpowers
Generate AI videos with Google Veo, Seedance 2.0, HappyHorse, Wan, Grok and 40+ models via inference.sh CLI. Models: Veo 3.1, Veo 3, Seedance 2.0, HappyHorse 1.0, Wan 2.5, Grok Imagine Video, OmniHuman, Fabric, HunyuanVideo. Capabilities: text-to-video, image-to-video, reference-to-video, video editing, lipsync, avatar animation, video upscaling, foley sound. Use for: social media videos, marketing content, explainer videos, product demos, AI avatars. Triggers: video generation, ai video, text to video, image to video, veo, animate image, video from image, ai animation, video generator, generate video, t2v, i2v, ai video maker, create video with ai, runway alternative, pika alternative, sora alternative, kling alternative, seedance, happyhorse
ai-image-generation
101-skills/superpowers
Generate AI images with GPT-Image-2, FLUX, Gemini, Grok, Seedream, Reve and 50+ models via inference.sh CLI. Models: GPT-Image-2, FLUX Dev LoRA, FLUX.2 Klein LoRA, Gemini 3 Pro Image, Grok Imagine, Seedream 4.5, Reve, ImagineArt. Capabilities: text-to-image, image-to-image, inpainting, LoRA, image editing, upscaling, text rendering. Use for: AI art, product mockups, concept art, social media graphics, marketing visuals, illustrations. Triggers: flux, image generation, ai image, text to image, stable diffusion, generate image, ai art, midjourney alternative, dall-e alternative, text2img, t2i, image generator, ai picture, create image with ai, generative ai, ai illustration, grok image, gemini image, gpt image, openai image, chatgpt image