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 use this skill?
Automate web browser interactions to record high-quality product demos and walkthroughs. Use Playwright and FFmpeg to capture and encode professional videos.
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/cyberfront-ai/demo-videoWhat This Skill Does
The demo-video skill is a powerful automation utility for OpenClaw that enables users to record professional-grade product walkthroughs, interactive demos, and showcases directly within a web browser. By leveraging the Playwright Chrome DevTools Protocol (CDP), the skill captures high-fidelity screencasts of your browser session, recording every interaction from navigation and clicks to complex hover effects and typing sequences. It streamlines the video production lifecycle by separating the recording phase from the encoding phase, allowing you to use robust FFmpeg scripts to compile frames into various formats like MP4, WebM, or even animated GIFs.
Installation
To integrate this skill into your OpenClaw environment, execute the following command in your terminal: clawhub install openclaw/skills/skills/cyberfront-ai/demo-video. Ensure that you have a functioning Clawdbot browser instance initialized via browser action=start profile=clawd and that FFmpeg is installed on your host system, as it is required for the final frame-to-video encoding step. Once installed, explore the scripts/ directory to locate the provided record-demo.js template and the frames-to-video.sh bash utility.
Use Cases
This skill is perfect for SaaS product managers needing to create rapid onboarding videos, developers showcasing new features in pull requests, and content creators building high-quality documentation. Use it to automatically generate consistent product tours, capture repeatable bug reproduction steps, or create looping UI animations for landing pages and marketing assets.
Example Prompts
- "Open the staging environment, log in, and record a demo of the new user onboarding flow, saving it as a 1080p MP4 file."
- "Generate a short GIF showcase of our dashboard's drag-and-drop functionality using the demo-video skill."
- "Create a walkthrough video of the billing page settings. Ensure there is a 2-second pause after clicking the 'Update' button to highlight the success toast."
Tips & Limitations
To achieve the best results, maintain a consistent browser resolution throughout your script. When timing your interactions, follow the recommended rhythm: allow 2 seconds for initial page loads and 0.5 to 1 second between individual interactions to ensure the viewer can follow the motion. If you notice large output file sizes, adjust the FRAME_SKIP setting in your recording script; a value between 3 and 5 typically provides a smooth experience while keeping file sizes manageable. Note that since this skill relies on browser automation, complex animations or pop-ups that require precise timing may require manual tuning of the waitForTimeout values within your sequence script.
Metadata
Not sure this is the right skill?
Describe what you want to build — we'll match you to the best skill from 16,000+ options.
Find the right skillPaste this into your clawhub.json to enable this plugin.
{
"plugins": {
"official-cyberfront-ai-demo-video": {
"enabled": true,
"auto_update": true
}
}
}Tags(AI)
Flags: file-write, file-read, code-execution