demo-videoCreate 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.
Install via ClawdBot CLI:
clawdbot install cyberfront-ai/demo-videoCreate polished product demo videos by automating browser interactions.
browser action=start profile=clawd)browser action=openscripts/record-demo.js for the target appnode scripts/record-demo.jsbash scripts/frames-to-video.shSee references/demo-planning.md for guidance on:
scripts/record-demo.jsTemplate Playwright script that:
Customize for each demo:
DEMO_SEQUENCES array - define pages and interactionsOUTPUT_DIR - where to save framesFRAME_SKIP - skip every Nth frame (lower = more frames)scripts/frames-to-video.shFFmpeg encoding script with presets:
mp4 - H.264, good quality/size balance (default)gif - Animated GIF for embeddingwebm - VP9, smaller filesUsage: ./frames-to-video.sh [input_dir] [output_name] [format]
// 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));Generated Mar 1, 2026
Create a guided walkthrough video for new users of a software-as-a-service platform, showcasing key features like dashboard navigation, data input, and report generation. This helps reduce support queries and improves user adoption by visually demonstrating workflows.
Record an interactive demo of an online store, highlighting product browsing, filtering, cart management, and checkout processes. This video can be used for marketing, training staff, or testing user experience improvements.
Produce a step-by-step tutorial video for an educational web application, such as a learning management system or interactive quiz platform. It demonstrates features like course creation, student enrollment, and progress tracking to engage educators and learners.
Generate training videos for internal company processes, such as using HR portals, expense reporting systems, or project management tools. This aids in onboarding new employees and standardizing operational procedures across teams.
Offer basic demo video creation for free with limited features, then charge for advanced options like custom branding, higher resolution, or faster encoding. This attracts small businesses and startups, converting them to paid plans as their needs grow.
Provide tailored demo video production as a service for clients in specific industries, such as tech or e-commerce. Charge per project based on complexity, length, and customization, leveraging the skill's automation to scale efficiently.
License the skill's underlying scripts and workflows to other developers or companies for integration into their own products, such as customer support platforms or marketing tools. Generate revenue through one-time licenses or usage-based royalties.
💬 Integration Tip
Ensure the Clawdbot browser is running and FFmpeg is installed before starting; customize the record-demo.js script with specific URLs and interaction timings for each demo to optimize output quality.
Extract frames or short clips from videos using ffmpeg.
Download videos, audio, subtitles, and clean paragraph-style transcripts from YouTube and any other yt-dlp supported site. Use when asked to “download this video”, “save this clip”, “rip audio”, “get subtitles”, “get transcript”, or to troubleshoot yt-dlp/ffmpeg and formats/playlists.
Generate SRT subtitles from video/audio with translation support. Transcribes Hebrew (ivrit.ai) and English (whisper), translates between languages, burns subtitles into video. Use for creating captions, transcripts, or hardcoded subtitles for WhatsApp/social media.
Create AI videos with optimized prompts, motion control, and platform-ready output.
自动登录抖音账号，上传并发布视频到抖音创作者平台，支持视频标签管理和登录状态检查。
AI video generation workflow on Volcengine. Use when users need text-to-video, image-to-video, generation parameter tuning, or async task troubleshooting for video jobs.