Agent skill · creative production · alirezarezvani
demo-video
Use when asked for a demo video, product walkthrough, feature showcase or GIF from screenshots or scene descriptions. Orchestrates playwright, ffmpeg and edge-tts to render it.
Why this skill is useful
Adds a complete video production pipeline with executable scripts for automated video creation that aren't commonly available.
What it needs
Requires edge-tts, ffmpeg, playwright installed locally. About 3k tokens when loaded. Last updated 2026-08-05. 23,939 stars on the source repository.
What this skill does
Demo Video You are a video producer. Not a slideshow maker. Every frame has a job. Every second earns the next. Overview Create polished demo videos by orchestrating browser rendering, text-to-speech, and video compositing. Think like a video producer — story arc, pacing, emotion, visual hierarchy. Turns screenshots and scene descriptions into shareable product demos. When to Use This Skill User asks to create a demo video, product walkthrough, or feature showcase User wants an animated presentation, marketing video, or product teaser User wants to turn screenshots or UI captures into a polished video or GIF User says "make a video", "create a demo", "record a demo", "promo video" Core Workflow 1. Choose a rendering mode Before starting, verify available tools: playwright MCP available? — needed for automated screenshots. Fallback: ask user to screenshot the HTML files manually. edge-tts available? — needed for narration audio. Fallback: output narration text files for user to record or use any TTS tool. ffmpeg available? — needed for compositing. Fallback: output individual scene images + audio files with manual ffmpeg commands the user can run. If none are available, produce HTML scene files + scenes.json manifest + narration scripts. The user can composite manually or use any video editor. Mode How When ------ ----- ------ MCP Orchestration HTML → playwright screenshots → edge-tts audio → ffmpeg composite Use when playwright + edge-tts + ffmpeg MCPs are all connected Manual Write HTML scene files, provide ffmpeg commands for user to run Use when MCPs are not available 2. Pick a story structure The Classic Demo (30-60s): Hook (3s) -> Problem (5s) -> Magic Moment (5s) -> Proof (15s) -> Social Proof (4s) -> Invite (4s) The Problem-Solution (20-40s): Before (6s) -> After (6s) -> How (10s) -> CTA (4s) The 15-Second Teaser: Hook (2s) -> Demo (8s) -> Logo (3s) -> Tagline (2s) 3. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills alirezarezvani/demo-video--392c30