Demo Video
This skill orchestrates playwright, edge-tts, and ffmpeg to produce polished demo videos, product walkthroughs, feature showcases, and GIFs from screenshots or scene descriptions. It guides the user through story structure, scene design, and narration writing, and outputs HTML scenes, narration text, a manifest, and a build script.
✨ What it does
- Selects between MCP orchestration and manual fallback modes based on available tools.
- Guides story structure selection (classic demo, problem-solution, teaser).
- Designs scenes with one primary focus per scene and a consistent design system.
- Writes concise, verb-led narration with one idea per scene.
- Generates HTML scene files, narration text files, a scenes.json manifest, and a build.sh script.
- Includes a quality checklist and anti-pattern guidance.
🎯 When to use it
- When the user asks to create a demo video, product walkthrough, or feature showcase.
- When the user wants an animated presentation, marketing video, or product teaser.
- When the user wants to turn screenshots or UI captures into a polished video or GIF.
- When the user says 'make a video', 'create a demo', 'record a demo', or 'promo video'.
🚀 How to use
Trigger by asking to create a demo video, product walkthrough, or similar. The skill expects either screenshots or scene descriptions as input. It will produce HTML scenes, narration files, a manifest, and a build script. Example prompts:
Create a demo video for our new tab organizer feature.
Make a 30-second promo video from these screenshots.
📄 Output: Produces a demo-output/ directory with HTML scene files, narration text files, scenes.json manifest, and build.sh script (plus optional output.mp4 if MCPs are available).
📦 Add this skill to Claude Code
# 1. Get the skills repo
git clone --depth 1 https://github.com/alirezarezvani/claude-skills /tmp/claude-skills
# 2. Copy this skill into your project (or ~/.claude/skills for all projects)
mkdir -p .claude/skills
cp -r /tmp/claude-skills/engineering/demo-video/skills/demo-video .claude/skills/demo-videoSkill source: engineering/demo-video/skills/demo-video/SKILL.md
⚠️ Good to know
Requires playwright, edge-tts, and ffmpeg MCPs for full automated video generation; otherwise it falls back to providing manual instructions and files.
❓ FAQ
What if I don't have screenshots?
The skill can generate HTML scenes with terminal-style or text-heavy designs based on descriptions, and will ask for screenshots only if the product is visual and descriptions are insufficient.
What if the MCP tools are not available?
It will still produce the HTML scene files, narration text, and scenes.json manifest, and include ffmpeg commands in build.sh for you to run manually.
What video resolution is targeted?
The scenes are designed for a 1920x1080 viewport, and the quality checklist requires 1920x1080 resolution.
🤖 Overview, features, install steps and FAQ were generated from the project's SKILL.md on Sep 4, 2026. Always check the original source before running commands.