Agent skill · creative production · sundial-org
demo-video
Create product demo videos by automating browser interactions and capturing frames. Use when the user wants to record a demo, walkthrough, product showcase, or interactive video of a web application. Supports Playwright CDP screencast for high-quality capture and FFmpeg for video encoding.
Why this skill is useful
Adds specific Playwright and FFmpeg scripts for automating demo video creation that the AI wouldn't reliably generate on its own.
What it needs
Requires ffmpeg installed locally. About 1k tokens when loaded. Last updated 2026-03-07. 639 stars on the source repository.
What this skill does
Demo Video Creator Create polished product demo videos by automating browser interactions. Overview 1. Plan the demo sequence (pages, interactions, timing) 2. Record frames using Playwright CDP screencast 3. Encode to video with FFmpeg Quick Start Prerequisites Clawdbot browser running (browser action=start profile=clawd) App accessible via browser (localhost or remote) FFmpeg installed for encoding Recording Workflow 1. Start the Clawdbot browser if not running 2. Navigate to the app manually or via browser action=open 3. Customize scripts/record-demo.js for the target app 4. Run: node scripts/record-demo.js 5. Encode: bash scripts/frames-to-video.sh Planning a Demo See references/demo-planning.md for guidance on: Structuring demo sequences Timing and pacing Interaction patterns What makes demos compelling Scripts scripts/record-demo.js Template Playwright script that: Connects to Clawdbot browser via CDP Starts screencast capture (JPEG frames) Executes demo sequence (navigation, clicks, hovers, typing) Saves frames to output directory Customize for each demo: DEMOSEQUENCES array - define pages and interactions OUTPUTDIR - where to save frames FRAMESKIP - skip every Nth frame (lower = more frames) scripts/frames-to-video.sh FFmpeg encoding script with presets: mp4 - H.264, good quality/size balance (default) gif - Animated GIF for embedding webm - VP9, smaller files Usage: ./frames-to-video.sh [inputdir] [outputname] [format] Interaction Patterns Tips Timing: 2s on page load, 0.5-1s between interactions, 1.5s to show results Frame skip: Use 3-5 for smooth video, 8-10 for smaller files Quality: 85-90 JPEG quality balances size and clarity Resolution: Browser window size determines output resolution Loops: GIFs should loop seamlessly - end where you started
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills sundial-org/demo-video