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.
Best use case
demo-video is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
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.
Teams using demo-video should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/demo-video/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How demo-video Compares
| Feature / Agent | demo-video | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
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.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# 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
- OpenClaw browser running (`browser action=start profile=clawd`)
- App accessible via browser (localhost or remote)
- FFmpeg installed for encoding
### Recording Workflow
1. Start the OpenClaw 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 OpenClaw browser via CDP
- Starts screencast capture (JPEG frames)
- Executes demo sequence (navigation, clicks, hovers, typing)
- Saves frames to output directory
**Customize for each demo:**
- `DEMO_SEQUENCES` array - define pages and interactions
- `OUTPUT_DIR` - where to save frames
- `FRAME_SKIP` - 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 [input_dir] [output_name] [format]`
## Interaction Patterns
```javascript
// Navigation
await page.goto('http://localhost/dashboard');
await page.waitForTimeout(2000);
// Click element
await page.locator('button:has-text("Create")').click();
await page.waitForTimeout(500);
// Hover (show tooltips, hover states)
await page.locator('.card').first().hover();
await page.waitForTimeout(1000);
// Type text
await page.locator('input[placeholder="Search"]').fill('query');
await page.waitForTimeout(500);
// Press key
await page.keyboard.press('Enter');
await page.keyboard.press('Escape');
// Scroll
await page.evaluate(() => window.scrollBy(0, 300));
```
## 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
## Gotchas
- **Screenshots vs video:** If the user just needs to see a feature, take screenshots inline instead of recording a full video. Check `browser action=tabs profile=clawd` first — if the app tab is already open, grab screenshots directly without a sub-agent.
- **Context limit:** Screenshot-heavy recording loops burn through context fast (200k token limit). Keep scope narrow: record all frames first, then analyze — never interleave frame capture with analysis. If context is tight, write frames to disk and analyze in a separate pass.
- **Parallel agent risk:** Don't spawn multiple demo agents concurrently against the same browser tab — they'll interfere with each other's navigation state.Related Skills
video-script
Generate structured scene-by-scene video scripts with production metadata (visuals, audio, sources, transitions, captions) ready to feed into the video-production pipeline (Sora, Kling, ElevenLabs, InfiniteTalk, Remotion, stock-footage, video-editor). Use when asked to "write a video script", "script for TikTok", "video outline", "plan a video", "storyboard", "scene breakdown", "video concept", "content brief for video", "shooting script", or whenever the video-production pipeline needs a structured script before production begins. Also trigger for "Reels script", "Shorts script", "YouTube script", "video idea with scenes", or any request that implies breaking a video concept into timed scenes with production directions.
video-editor
Programmatic video editing via ffmpeg CLI. Handles trimming clips, merging/concatenating videos, overlays (picture-in-picture, watermarks, logos), crossfade transitions between clips, speed ramping (speed up/slow motion), cropping to aspect ratios (16:9 to 9:16), scaling/resizing, adding or replacing audio tracks, fade in/out effects, text overlays (drawtext), rotation, looping clips, extracting frames, GIF creation, audio ducking (sidechaincompress), volume normalization (loudnorm), mixing audio tracks (amix), and audio fades. Use whenever asked to edit video, trim clip, merge videos, add music to video, overlay, picture in picture, video transition, speed up video, slow motion, crop video, resize video, audio ducking, mix audio tracks, normalize audio, create GIF from video, extract frames, loop a clip, add text to video, fade video, or any ffmpeg-based media manipulation. Also use when assembling finished videos from clips, audio, and overlays for content creation pipelines.
remotion-videos
Use when create animated marketing videos with Remotion (renders to MP4).
browser-animation-video
Use when create browser-based motion graphics with Framer Motion, GSAP, and Tailwind.
writer
Write content in Eric's voice — articles, blog posts, tweets, social media posts, marketing copy, newsletter drafts. Loads WRITING-STYLE.md and enforces kill phrases.
positioning-angles
Use when defining product positioning, choosing strategic angles, crafting value propositions, competitive positioning, product messaging, differentiation strategy, or go-to-market angles. Also use for 'how should I position my app', 'what angle should I use', 'painkiller vs vitamin', or 'market positioning'.
outline-generator
Use when generating outlines, article structures, content outlines, blog outlines, planning article sections, structuring posts, breaking down topics into sections, or organizing ideas for long-form content. Also use for 'outline this', 'structure this article', or 'plan the sections'.
last30days-open
Use only when the user explicitly asks for the open variant of last30days, including watchlists, briefings, and history queries. Sources: Reddit, X, YouTube, web.
last30days
Use when researching what happened in the last 30 days on a topic. Also triggered by 'last30'. Sources: Reddit, X, YouTube, web. Produces expert-level summary with copy-paste-ready prompts.
hooks
Use when generating hooks, headlines, titles, and scroll-stopping openers for content. Also use when analyzing viral posts, Reels, TikToks, YouTube Shorts, or successful social examples to extract reusable hook patterns and improve hook guidance.
evaluate-content
Use when judging content quality OR editing/improving existing copy: shareability, readability, voice, cuttability, angle, copy sweeps.
editor-in-chief
Use when a first draft is complete and all Phase 1 gates are done: topic selected (seo-research), title approved (hooks), outline approved (outline-generator), draft written (writer). Runs autonomous diagnosis-prescribe-rewrite loop before Substack.