Requirements
- Target platform
- OpenClaw
- Install method
- Manual import
- Extraction
- Extract archive
- Prerequisites
- OpenClaw
- Primary doc
- SKILL.md
Tencent SkillHub ยท Developer Tools
Demo Video Creator
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.
skill openclawclawhub Free
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.
โฌ 0 downloads โ
0 stars Unverified but indexed
Install for OpenClaw
Quick setup
- Download the package from Yavira.
- Extract the archive and review SKILL.md first.
- Import or place the package into your OpenClaw setup.
Package facts
- Download mode
- Yavira redirect
- Package format
- ZIP package
- Source platform
- Tencent SkillHub
- What's included
- SKILL.md, references/demo-planning.md, scripts/frames-to-video.sh, scripts/record-demo.js
Validation
- Use the Yavira download entry.
- Review SKILL.md after the package is downloaded.
- Confirm the extracted package contains the expected setup assets.
Install with your agent
Agent handoff
Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.
- Download the package from Yavira.
- Extract it into a folder your agent can access.
- Paste one of the prompts below and point your agent at the extracted folder.
New install
I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete.
Upgrade existing
I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run.
Trust & source
Release facts
- Source
- Tencent SkillHub
- Verification
- Indexed source record
- Version
- 1.0.0
Provenance
- Publisher
- 0xs4m1337
- Source page
- View original listing
- Canonical URL
- Open canonical page
Documentation
Demo Video Creator
Create polished product demo videos by automating browser interactions.
Overview
Plan the demo sequence (pages, interactions, timing) Record frames using Playwright CDP screencast Encode to video with FFmpeg
Prerequisites
Clawdbot browser running (browser action=start profile=clawd) App accessible via browser (localhost or remote) FFmpeg installed for encoding
Recording Workflow
Start the Clawdbot browser if not running Navigate to the app manually or via browser action=open Customize scripts/record-demo.js for the target app Run: node scripts/record-demo.js 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/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: 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
// 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
Category context
Code helpers, APIs, CLIs, browser automation, testing, and developer operations.
Source: Tencent SkillHub
Largest current source with strong distribution and engagement signals.
Package contents
Included in package
2 Docs2 Scripts
- SKILL.md
- references/demo-planning.md
- scripts/frames-to-video.sh
- scripts/record-demo.js