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.

Security Scan

The skill's code matches its stated purpose (automating Playwright/CDP recording and FFmpeg encoding) but there are several mismatches and operational risks (missing dependency details, broad local CDP access that can capture sensitive pages, and an in-memory frame buffer) that the user should be aware of before installing or running it.

Purpose & Capability

The name/description line up with the included scripts: record-demo.js uses Playwright CDP to capture frames and frames-to-video.sh uses FFmpeg to encode them. However SKILL.md/prereqs omit Node and the playwright dependency (script requires node + playwright-core), which is an inconsistency: either the skill should list those prerequisites or include an install step.

Instruction Scope

Instructions are narrowly scoped to recording browser frames and encoding them. They do not instruct exfiltration. However the recorder connects to a local CDP endpoint (http://127.0.0.1:18800) and will capture whatever page is found by the script (default search for 'localhost' but configurable). That means it can record any browser tab accessible through that CDP endpoint (including potentially sensitive pages) — the SKILL.md does not explicitly warn about this privacy/security implication.

Install Mechanism

There is no install spec (instruction-only), so nothing is written automatically. But the runtime requires Node and a Playwright runtime (playwright-core) plus FFmpeg and a Clawdbot browser exposing a CDP endpoint. These runtime dependencies are not fully documented in SKILL.md (Node and npm packages are missing), which is an operational/consistency issue.

Credentials

The skill does not request environment variables, credentials, or external endpoints beyond a local CDP URL. No network credentials or unrelated secrets are requested. Note: the hardcoded cdpEndpoint (127.0.0.1:18800) implies access to a local browser instance — that is proportional for the stated purpose but gives the script the ability to access any pages the browser can see.

Persistence & Privilege

always is false and there are no install actions that modify global agent configuration. The skill does not request persistent platform privileges. It runs as a discrete script invoked by the user/agent.

What to consider before installing

This skill appears to do what it says: record browser frames via CDP and convert them to video. Before using it, consider the following: - Dependencies: The SKILL.md forgets to list Node and the Playwright/npm dependency (the script requires node and 'playwright-core'). Install Node and the appropriate npm package (and ensure version compatibility) before running. - Sensitive data risk: The recorder connects to a local CDP endpoint and will capture whatever pages are available. Don’t run it while sensitive or personal pages are open, and restrict the CDP endpoint to a browser instance you control. - Resource usage: record-demo.js accumulates all raw frames in memory before writing them to disk; for long captures this can consume a lot of RAM. Test short sequences first or modify the script to stream frames to disk as they arrive. - FFmpeg and Clawdbot: Ensure FFmpeg is installed and the named Clawdbot browser/profile is the intended target (the cdpEndpoint and profile are configurable in the script). If you need higher confidence, ask the skill author to: add explicit prerequisites (Node + playwright-core + minimum versions), provide an install script or package.json, and change the recorder to write frames incrementally to disk to avoid large memory usage. If you cannot verify the origin of this package, run it in an isolated environment (VM/container) and review/modify the DEMO_SEQUENCES to target a safe demo page.

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:

• 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