
Claude Video Screenshot
- 6 installs
- 23 repo stars
- Updated April 6, 2026
- agricidaniel/claude-video
claude-video-screenshot is a Claude Code skill that captures web pages as images or clips at video-native dimensions using Playwright for video production.
About
claude-video-screenshot captures web pages as images or short clips for video production using Playwright. It takes full-page, viewport, or element screenshots at video dimensions, hides page elements via CSS injection, and turns captures into Ken Burns zoom/pan videos or browser recordings. A developer uses it to source B-roll, slideshow frames, and thumbnails for tutorials and product demos.
- Captures web pages at video-native dimensions (1920x1080, 1080x1920) with Playwright
- Ken Burns zoom/pan animation and browser session recording from captures
- CSS injection to hide ads/banners plus 100+ device emulation presets
Claude Video Screenshot by the numbers
- 6 all-time installs (skills.sh)
- Ranked #1,096 of 1,335 Generative Media skills by installs in the Skillselion catalog
- Data as of Aug 5, 2026 (Skillselion catalog sync)
claude-video-screenshot capabilities & compatibility
Free; runs locally with Playwright and FFmpeg, no API keys required.
- Capabilities
- claude video shorts · claude video transcode
- Works with
- chrome · playwright
- Use cases
- video generation · web scraping
- Pricing
- Free
What claude-video-screenshot says it does
Web screenshot capture for video production using Playwright. Takes full-page, viewport, or element-specific screenshots at video-native dimensions (1920x1080, 1080x1920).
Ken Burns options:
Convert a screenshot into a zoom/pan video:
npx skills add https://github.com/agricidaniel/claude-video --skill claude-video-screenshotAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 6 |
|---|---|
| repo stars | ★ 23 |
| Last updated | April 6, 2026 |
| Repository | agricidaniel/claude-video ↗ |
What it does
Capture website screenshots and browser recordings at video dimensions to source B-roll and Ken Burns clips for video content.
Who is it for?
Producing screenshots, browser recordings, and Ken Burns clips as B-roll for tutorial and demo videos.
Skip if: Editing or transcoding finished video files.
When should I use this skill?
You need a website capture, browser recording, or Ken Burns animation for a video.
What you get
Web pages become video-ready PNGs, Ken Burns MP4s, or browser recordings.
- Web page screenshots at video dimensions
- Ken Burns zoom/pan MP4
- Browser session recordings
By the numbers
- 100+ device emulation presets
- 4 Ken Burns directions (zoom-in, zoom-out, pan-left, pan-right)
Files
claude-video-screenshot — Web Capture for Video Production
Pre-Flight
Check Playwright is installed:
source ~/.video-skill/bin/activate
python3 -c "from playwright.sync_api import sync_playwright; print('Playwright ready')"If not installed:
source ~/.video-skill/bin/activate
pip install playwright && playwright install --with-deps chromiumSingle Screenshot
Capture a web page at video-native dimensions:
source ~/.video-skill/bin/activate
python3 scripts/web_capture.py \
--url "https://example.com" \
--output capture.png \
--viewport 1920x1080Options:
--url "..."— URL to capture--output capture.png— Output file path--viewport WxH— Browser viewport size (default: 1920x1080)--full-page— Capture entire scrollable page (not just viewport)--element ".css-selector"— Capture a specific element only--transparent— Transparent background (omit page background)--hide ".ads,.cookie-banner,.popup"— CSS selectors to hide viadisplay:none--wait N— Wait N seconds after page load before capture--wait-for ".selector"— Wait for a specific element to appear--device "iPhone 15 Pro"— Emulate a device (100+ presets)--dark-mode— Emulate dark color scheme preference--locale en-US— Set browser locale--timezone "America/New_York"— Set browser timezone
Video-Native Presets
Use --preset for common video dimensions:
| Preset | Viewport | Use Case |
|---|---|---|
--preset landscape | 1920x1080 | 16:9 YouTube/LinkedIn |
--preset portrait | 1080x1920 | 9:16 TikTok/Reels/Shorts |
--preset square | 1080x1080 | 1:1 Instagram |
--preset instagram | 1080x1350 | 4:5 Instagram portrait |
--preset 4k | 3840x2160 | 4K landscape |
Batch Capture
Capture multiple URLs at once:
source ~/.video-skill/bin/activate
python3 scripts/web_capture.py \
--urls urls.txt \
--output-dir ./captures/ \
--viewport 1920x1080 \
--hide ".cookie-banner"The urls.txt file contains one URL per line. Output files are named after the URL slug.
Browser Recording
Record a browser session as video:
source ~/.video-skill/bin/activate
python3 scripts/web_capture.py \
--record \
--url "https://example.com" \
--output recording.mp4 \
--viewport 1920x1080 \
--duration 10Uses Playwright's record_video_dir to capture the browser session. Useful for tutorial videos or documenting web interactions.
Options:
--record— Enable video recording mode--duration N— Recording duration in seconds--scroll— Auto-scroll the page during recording--scroll-speed N— Pixels per second for auto-scroll (default: 200)
Ken Burns Animation
Convert a screenshot into a zoom/pan video:
source ~/.video-skill/bin/activate
python3 scripts/web_capture.py \
--url "https://example.com" \
--output capture.png \
--viewport 1920x1080 \
--ken-burns \
--ken-burns-duration 5Or apply Ken Burns to an existing image:
python3 scripts/web_capture.py \
--ken-burns-image existing.png \
--ken-burns-duration 5 \
--ken-burns-direction zoom-in \
--output kenburns.mp4Ken Burns options:
--ken-burns— Auto-create Ken Burns video after screenshot--ken-burns-image FILE— Apply Ken Burns to existing image--ken-burns-duration N— Animation duration in seconds (default: 5)--ken-burns-direction zoom-in|zoom-out|pan-left|pan-right— Animation direction
FFmpeg command used internally:
ffmpeg -loop 1 -framerate 60 -i capture.png \
-vf "scale=8000:-1,zoompan=z='zoom+0.001':x='iw/2-(iw/zoom/2)':y='ih/2-(ih/zoom/2)':d=DURATION*60:s=1920x1080:fps=60" \
-t DURATION -c:v libx264 -pix_fmt yuv420p kenburns.mp4Device Emulation
Common device presets (Playwright has 100+):
| Device | Resolution | User Agent |
|---|---|---|
| iPhone 15 Pro | 393x852 | Mobile Safari |
| iPhone 15 Pro Max | 430x932 | Mobile Safari |
| Pixel 7 | 412x915 | Mobile Chrome |
| iPad Pro 11 | 834x1194 | Mobile Safari |
| Galaxy S21 | 360x800 | Mobile Chrome |
python3 scripts/web_capture.py --url "..." --device "iPhone 15 Pro" --output mobile.pngCSS Injection
Hide unwanted elements before capture:
python3 scripts/web_capture.py --url "..." --hide ".ads,.cookie-banner,.popup,.newsletter-modal" --output clean.pngFor custom CSS injection:
python3 scripts/web_capture.py --url "..." --inject-css "body { font-size: 24px !important; }" --output styled.pngIntegration with Video Workflow
Screenshots can be used as:
- Overlay on video via edit sub-skill PiP overlay
- Slideshow source — capture multiple URLs, concatenate as slideshow with transitions
- Ken Burns source — zoom/pan animation from static capture
- Tutorial B-roll — browser recording for product demos
- Thumbnail background — screenshot + text overlay
Safety Rules
1. Run bash scripts/preflight.sh for output path validation 2. Respect robots.txt and site terms of service 3. Do not capture login pages or authenticated content without user consent 4. Clean up temporary browser recording files
Reference
Load references/web-capture.md for Playwright API details, device presets, and FFmpeg Ken Burns formulas.
Related skills
FAQ
What dimensions can it capture at?
Video-native dimensions such as 1920x1080 and 1080x1920, plus custom viewport sizes and 100+ device presets.
Can it hide ads or cookie banners before capture?
Yes, it injects CSS via --hide selectors to set display:none on ads, cookie banners, and popups.
Does it need Playwright?
Yes, it checks for Playwright in a ~/.video-skill virtualenv and installs Chromium if missing.