Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
agricidaniel avatar

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)
At a glance

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
From the docs

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).
SKILL.md
Ken Burns options:
SKILL.md
Convert a screenshot into a zoom/pan video:
SKILL.md
npx skills add https://github.com/agricidaniel/claude-video --skill claude-video-screenshot

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs6
repo stars23
Last updatedApril 6, 2026
Repositoryagricidaniel/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

SKILL.mdMarkdownGitHub ↗

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 chromium

Single 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 1920x1080

Options:

  • --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 via display: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:

PresetViewportUse Case
--preset landscape1920x108016:9 YouTube/LinkedIn
--preset portrait1080x19209:16 TikTok/Reels/Shorts
--preset square1080x10801:1 Instagram
--preset instagram1080x13504:5 Instagram portrait
--preset 4k3840x21604K 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 10

Uses 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 5

Or 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.mp4

Ken 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.mp4

Device Emulation

Common device presets (Playwright has 100+):

DeviceResolutionUser Agent
iPhone 15 Pro393x852Mobile Safari
iPhone 15 Pro Max430x932Mobile Safari
Pixel 7412x915Mobile Chrome
iPad Pro 11834x1194Mobile Safari
Galaxy S21360x800Mobile Chrome
python3 scripts/web_capture.py --url "..." --device "iPhone 15 Pro" --output mobile.png

CSS Injection

Hide unwanted elements before capture:

python3 scripts/web_capture.py --url "..." --hide ".ads,.cookie-banner,.popup,.newsletter-modal" --output clean.png

For custom CSS injection:

python3 scripts/web_capture.py --url "..." --inject-css "body { font-size: 24px !important; }" --output styled.png

Integration 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.

Generative Mediacontentdistribution

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.