demo-video

Creates demo videos from HTML scenes using playwright screenshots, edge-tts narration, and ffmpeg compositing.

Updated Aug 14, 2026
One-click install
npx skills add https://github.com/Rohithdgrr/REEK-uninstaller --skill demo-video-rohithdgrr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: demo-video
Source: https://github.com/Rohithdgrr/REEK-uninstaller/tree/main/.opencode/skills/demo-video
Command: npx skills add https://github.com/Rohithdgrr/REEK-uninstaller --skill demo-video-rohithdgrr

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Producing a polished product demo video normally requires video editing skills, recording tools, and voiceover work. This Skill turns screenshots or scene descriptions into a complete narrated video by orchestrating browser rendering, text-to-speech, and video compositing. ## Core Features & Use Cases - Story-driven scene design: Provides proven story structures (Classic Demo, Problem-Solution, 15-Second Teaser) with per-scene pacing, color language, and typography rules. - Automated rendering pipeline: Generates HTML scenes, captures them with playwright, synthesizes narration with edge-tts, and composites everything with ffmpeg into a 1920x1080 video. - Graceful fallbacks: When MCP tools are unavailable, it still outputs scene HTML files, narration scripts, a scenes.json manifest, and a build.sh with manual ffmpeg commands. - Use Case: You just shipped a new CLI tool and need a 30-second launch video. Describe the key moments, and the Skill produces styled terminal scenes, narration audio, and a final MP4 with crossfade transitions. ## Quick Start Create a 30-second demo video for my product using the demo-video skill, with a hook, three feature scenes, and an end card with our URL.

Frequently Asked Questions about demo-video

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a product demo video without video editing software?▼

Describe your product's key moments and let the Skill generate HTML scenes, narration text, and a build script. It uses playwright for screenshots, edge-tts for voiceover, and ffmpeg to composite the final 1920x1080 MP4.

How to turn screenshots into a narrated video with ffmpeg?▼

The Skill wraps each screenshot in a styled HTML scene with rounded corners and shadows, captures it via playwright, generates edge-tts audio per scene, then concatenates everything with ffmpeg crossfade transitions into output.mp4.

What tools are needed for automated demo video generation?▼

The full pipeline uses three tools: playwright MCP for automated browser screenshots, edge-tts for narration audio, and ffmpeg for video compositing. If any are missing, the Skill outputs scene files and manual commands instead.

Can I make a demo video if playwright or edge-tts is not available?▼

Yes. The Skill falls back to producing HTML scene files, narration text files, a scenes.json manifest, and a build.sh containing the exact ffmpeg commands you can run manually or adapt to any video editor.

What video length and structure works best for product demos?▼

The Skill offers three structures: a 30-60 second Classic Demo (hook, problem, magic moment, proof, CTA), a 20-40 second Problem-Solution arc, and a 15-second teaser. Each scene gets one focus point with varied pacing.