demo-capture

Records demo video clips by driving running web and desktop apps with human-like pointer motion.

3|1|Updated Nov 19, 2025
One-click install
npx skills add https://github.com/lukaskellerstein/claude-my-marketplace --skill demo-capture-lukaskellerstein
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: demo-capture
Source: https://github.com/lukaskellerstein/claude-my-marketplace/tree/main/plugins/demo-video-plugin/skills/demo-capture
Command: npx skills add https://github.com/lukaskellerstein/claude-my-marketplace --skill demo-capture-lukaskellerstein

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Automated screen recordings look like test runs: no cursor, instant clicks, soft text, and clips that miss their narration timing. This Skill turns storyboard actions into demo footage that reads as a person using the app, with measured durations that keep narration and picture in sync. ## Core Features & Use Cases - Two-pass capture workflow: Rehearse every storyboard section unrecorded to resolve targets and measure real timings, then record only after narration exists so each clip fills its time budget. - Multiple driver and recorder combinations: Drive web apps through the Playwright MCP, launch Electron apps per section, or attach over CDP to an already-running app; record with Playwright video, OBS over obs-websocket for native-pixel 60 fps capture, or a macOS ffmpeg screen-capture fallback. - Human-feeling motion: A synthetic cursor overlay with eased movement, click ripples, dwell timing, per-character typing at 5-7 characters per second, and eased scrolling, plus OBS pausing through long waits so agent runs become clean jump cuts. - Use Case: Record a product demo where section three shows an Electron app with native menus: attach over CDP to the running app, capture the window through OBS at native pixels, pause recording through a 30-second agent run, and hand the reconciler a measured clip duration. ## Quick Start Record the demo sections defined in demo/storyboard.json, rehearsing each one first and capturing the app window with OBS so the text stays sharp.

Frequently Asked Questions about demo-capture

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I record a demo video of a web app with Playwright?▼

Use the Playwright MCP video tools: call browser_video_chapter, then browser_start_video with a filename and 1600x900 size, perform the actions with eased mouse movement, and call browser_stop_video. A postprocess hook transcodes the WebM to constant-frame-rate MP4 and reports the measured duration.

How do I record an Electron app for a demo video?▼

Electron apps are captured either by launching them per section with capture-electron.mjs or by attaching over CDP to an already-running instance with capture-attached.mjs. Pair either driver with OBS recording for native-pixel quality, since Playwright's own video can produce empty files on some Electron versions.

Playwright vs OBS for screen recording, which should I use?▼

Playwright video records headless VP8 at 25 fps and suits quick web demos, while OBS records a real window at native pixels and 60 fps with hardware encoding. Choose OBS whenever text must stay readable or the target is a desktop app; it is required for the attach driver.

Why does my Playwright recording have no mouse cursor?▼

Playwright records no mouse pointer at all; this is a platform limitation, not a configuration error. The fix is the cursor overlay injected via --init-script, which draws a pointer that eases toward the real position with click ripples and keystroke badges.

How do I handle long waits during a screen recording?▼

Mark the waitFor action with compress: "pause" and record with OBS. The take shows a brief moment of the wait, pauses the recording, and resumes when the target appears, producing a clean jump cut instead of minutes of spinner.

Why does my captured clip look soft or blurry?▼

Soft text usually means the Playwright recorder was used or the window content does not match the OBS canvas size. Switch the recorder to OBS and run setup-scene, which reports pixelExact: true only when the window content exactly matches the canvas.