Explain Video
limin112/min-skill
Build a narrated explainer video from a concept — discussion → structure → HTML slide deck → narration script → TTS voice → subtitles → background music → Playwright screen recording → ffmpeg…
A skill your agent uses when the user asks to create a demo video, product walkthrough, feature showcase, animated presentation, marketing video, or GIF from screenshots or scene descriptions.
Install Demo Video
$ npx skills add alirezarezvani/claude-skills --skill demo-video -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install alirezarezvani/claude-skills demo-video --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/alirezarezvani/claude-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/engineering/demo-video/skills/demo-video .claude/skills/demo-video && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "demo-video" agent skill from https://github.com/alirezarezvani/claude-skills/tree/main/engineering/demo-video/skills/demo-video into .claude/skills/demo-video/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "demo-video", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/alirezarezvani/claude-skills/tree/main/engineering/demo-video/skills/demo-videoType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add alirezarezvani/claude-skills --skill demo-video -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install alirezarezvani/claude-skills demo-video --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/alirezarezvani/claude-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/engineering/demo-video/skills/demo-video .agents/skills/demo-video && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "demo-video" agent skill from https://github.com/alirezarezvani/claude-skills/tree/main/engineering/demo-video/skills/demo-video into .agents/skills/demo-video/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "demo-video", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add alirezarezvani/claude-skills --skill demo-video -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install alirezarezvani/claude-skills demo-video --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/alirezarezvani/claude-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/engineering/demo-video/skills/demo-video .cursor/skills/demo-video && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "demo-video" agent skill from https://github.com/alirezarezvani/claude-skills/tree/main/engineering/demo-video/skills/demo-video into .cursor/skills/demo-video/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "demo-video", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/alirezarezvani/claude-skills.git --path engineering/demo-video/skills/demo-video--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add alirezarezvani/claude-skills --skill demo-video -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install alirezarezvani/claude-skills demo-video --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/alirezarezvani/claude-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/engineering/demo-video/skills/demo-video .gemini/skills/demo-video && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "demo-video" agent skill from https://github.com/alirezarezvani/claude-skills/tree/main/engineering/demo-video/skills/demo-video into .gemini/skills/demo-video/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "demo-video", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install alirezarezvani/claude-skills demo-videoInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add alirezarezvani/claude-skills --skill demo-video -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/alirezarezvani/claude-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/engineering/demo-video/skills/demo-video .github/skills/demo-video && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "demo-video" agent skill from https://github.com/alirezarezvani/claude-skills/tree/main/engineering/demo-video/skills/demo-video into .github/skills/demo-video/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "demo-video", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add alirezarezvani/claude-skills --skill demo-video -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install alirezarezvani/claude-skills demo-video --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/alirezarezvani/claude-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/engineering/demo-video/skills/demo-video .opencode/skills/demo-video && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "demo-video" agent skill from https://github.com/alirezarezvani/claude-skills/tree/main/engineering/demo-video/skills/demo-video into .opencode/skills/demo-video/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "demo-video", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
demo-video- GitHub stars
- 28k
- Token cost
- ~1.3k tokens
- SKILL.md length
- 643 words
- Files
- 2 (incl. references)
- Skills in repo
- 342
- Repo updated
- First seen
- Licence
- MIT
At a glance
A skill your agent uses when the user asks to create a demo video, product walkthrough, feature showcase, animated presentation, marketing video, or GIF from screenshots or scene descriptions.
- Works in 4 steps: Choose a rendering mode → Pick a story structure → Design scenes → …
- The user asks to create a demo video
- SKILL.md covers Overview, When to Use This Skill, Core Workflow and Output Artifacts, plus 4 more sections
- Calls playwright
What it does
Demo Video is an agent skill from alirezarezvani/claude-skills. Use when the user asks to create a demo video, product walkthrough, feature showcase, animated presentation, marketing video, or GIF from screenshots or scene descriptions. Orchestrates playwright, ffmpeg, and edge-tts MCPs to produce polished video content.
Its SKILL.md is about 1.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files, including reference files (for example `references/scene-design-system.md`).
It sits in Media & Creative, covering Video production and Text to speech and voice. It works with FFmpeg and Playwright. The repository describes itself as: 380 Claude Code skills & agent skills & plugins (30+ Agents, 70+ custom commands, 380+ skills, customizable references, scripts)for Claude Code, Codex, Gemini CLI, Cursor, and 8… The licence is MIT.
When your agent uses it
- The user asks to create a demo video
- Product walkthrough
- Feature showcase
- Animated presentation
Example prompts
- “/demo-video”
Workflow steps
4 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit 19392f7. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
playwright
From the folder's file list and the shell code blocks in SKILL.md.
Network
Links to these hosts (documentation or services it may open):
github.com
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Demo Video loads about 1.3k tokens when it runs, and up to ~1.7k if it reads all its reference files. Until then it costs about 67 tokens; SKILL.md has 643 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from alirezarezvani/claude-skills at commit 19392f7, republished under its MIT licence (© alirezarezvani). 643 words, ~1,284 tokens.
Download SKILL.mdSave it as
.claude/skills/demo-video/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.- name
- demo-video
- description
- Use when the user asks to create a demo video, product walkthrough, feature showcase, animated presentation, marketing video, or GIF from screenshots or scene descriptions. Orchestrates playwright, ffmpeg, and edge-tts MCPs to produce polished video content.
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. Design scenes
If no screenshots are provided:
- For CLI/terminal tools: generate HTML scenes with terminal-style dark background, monospace font, and animated typing effect
- For conceptual demos: use text-heavy scenes with the color language and typography system
- Ask the user for screenshots only if the product is visual and descriptions are insufficient
Every scene has exactly ONE primary focus:
- Title scenes: product name
- Problem scenes: the pain (red, chaotic)
- Solution scenes: the result (green, spacious)
- Feature scenes: the highlighted screenshot region
- End scenes: URL / CTA button
Show full SKILL.md (275 more words)Show less
4. Write narration
- One idea per scene. If you need "and" you need two scenes.
- Lead with the verb. "Organize your tabs" not "Tab organization is provided."
- No jargon. "Your tabs organize themselves" not "AI-powered tab categorization."
- Use contrast. "24 tabs. One click. 5 groups."
Output Artifacts
For each video, produce these files in a demo-output/ directory:
scenes/— one HTML file per scene (1920x1080 viewport)narration/— one.txtfile per scene (for edge-tts input)scenes.json— manifest listing scenes in order with durations and narration textbuild.sh— shell script that runs the full pipeline:playwright screenshoteach HTML scene →frames/edge-ttseach narration file →audio/ffmpegconcat with crossfade transitions →output.mp4
If MCPs are unavailable, still produce items 1-3. Include the ffmpeg commands in build.sh for the user to run manually.
Scene Design System
See references/scene-design-system.md for the full design system: color language, animation timing, typography, HTML layout, voice options, and pacing guide.
Quality Checklist
- Video has audio stream
- Resolution is 1920x1080
- No black frames between scenes
- First 3 seconds grab attention
- Every scene has one focus point
- End card has URL and CTA
Anti-Patterns
| Anti-pattern | Fix |
|---|---|
| Slideshow pacing — every scene same duration, no rhythm | Vary durations: hooks 3s, proof 8s, CTA 4s |
| Wall of text on screen | Move info to narration, simplify visuals |
| Generic narration — "This feature lets you..." | Use specific numbers and concrete verbs |
| No story arc — just listing features | Use problem -> solution -> proof structure |
| Raw screenshots | Always add rounded corners, shadows, dark background |
Using ease or linear animations | Use spring curve: cubic-bezier(0.16, 1, 0.3, 1) |
Cross-References
- Related:
engineering/browser-automation— for playwright-based browser workflows - See also: framecraft — open-source scene rendering pipeline
© alirezarezvani, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 1 other file (references) in engineering/demo-video/skills/demo-video of alirezarezvani/claude-skills.
- SKILL.md
- references/scene-design-system.md
Open the folder on GitHubat commit 19392f7
Compare with similar skills
Demo Video next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Demo Video this skillalirezarezvani/claude-skills | 28k | — | ~1.3k | Automated safety check: Pass | MIT | |
| Explain Videolimin112/min-skill | 454 | — | ~2.4k | Automated safety check: Pass | None | |
| Whiteboard Videotrustfuture/simon-skills | 382 | — | ~1.8k | Automated safety check: Notes | MIT | |
| Motion Adfabricioctelles/skills | 106 | — | ~4.1k | Automated safety check: Pass | Apache-2.0 | |
| Render Brand Identity Revealgooseworks-ai/goose-skills | 1.2k | — | ~1.4k | Automated safety check: Pass | MIT | |
| Render Mosaic Grid Revealgooseworks-ai/goose-skills | 1.2k | — | ~1.1k | Automated safety check: Pass | MIT |
Similar skills
Whiteboard Video
trustfuture/simon-skills
手绘白板风"边画边讲"讲解视频出片 skill（Excalidraw 风格逐笔动画 + 火山引擎配音 + 烧录字幕 + 品牌水印与片尾卡 + 横竖两张封面 + 各平台发布文案）。当用户说"做一期白板视频 / 边画边讲 / 手绘讲解视频 / 用 excalidraw 做视频 / whiteboard video"，或要在本仓库里新建一期、改场景、换贴纸或真实…
Motion Ad
fabricioctelles/skills
Produce a short motion-graphics video ad — a 15s Facebook/Instagram/TikTok spot — as a rendered MP4.
Render Brand Identity Reveal
gooseworks-ai/goose-skills
Render a 'brand identity reveal' video from a config — a single poster frame in a real, softly-lit space (real wall, soft-focus plant in the corner, dappled leaf shadow, illuminated poster) whose…
Render Mosaic Grid Reveal
gooseworks-ai/goose-skills
Render a 'mosaic-grid-reveal' video from a config — a real-DOM FULL-BLEED N×N mosaic of real product tiles that pops in one tile at a time (scatter order, ease-out-back overshoot), the grid clears…
Render Model Comparison Grid
gooseworks-ai/goose-skills
Render a 'model comparison grid' video from a config — a fal-style "same prompt, N contenders" showcase — a dark real-DOM stage where per beat a monospace prompt fades in centered, docks to a small…
More from alirezarezvani/claude-skills
All 342 skills in this repoAgile Product Owner
alirezarezvani/claude-skills
Writes INVEST-checked user stories with acceptance criteria, splits epics, plans sprints from velocity and ranks the backlog with a weighted score.
Product Strategist
alirezarezvani/claude-skills
OKR cascade toolkit for product leaders: generates aligned company-to-team OKRs from five strategy types and scores how well they line up.
App Store Optimization
alirezarezvani/claude-skills
App Store Optimization (ASO) toolkit for researching keywords, analyzing competitor rankings, generating metadata suggestions, and improving app visibility on Apple App Store and Google Play Store.
AWS Solution Architect
alirezarezvani/claude-skills
Design AWS architectures for startups using serverless patterns and IaC templates.
Campaign Analytics
alirezarezvani/claude-skills
Calculates attribution, funnel and ROI figures for marketing campaigns with three Python scripts that need only the standard library.
Code to PRD
alirezarezvani/claude-skills
Reverse-engineers a frontend, backend or fullstack codebase into a product requirements document with per-page docs, an enum dictionary and an API inventory.
Related
Works with
Categories
Questions about Demo Video
What does Demo Video do?
A skill your agent uses when the user asks to create a demo video, product walkthrough, feature showcase, animated presentation, marketing video, or GIF from screenshots or scene descriptions. Demo Video is an agent skill from alirezarezvani/claude-skills. Use when the user asks to create a demo video, product walkthrough, feature showcase, animated presentation, marketing video, or GIF from screenshots or scene descriptions.
When should I use Demo Video?
Demo Video fits situations like: the user asks to create a demo video; product walkthrough; feature showcase; animated presentation.
How do I install Demo Video in Claude Code?
Run `npx skills add alirezarezvani/claude-skills --skill demo-video -a claude-code`. Or copy the skill folder (engineering/demo-video/skills/demo-video in alirezarezvani/claude-skills) into .claude/skills/demo-video in your project. Claude Code loads it when a task matches its description.
How do I install Demo Video in Codex?
Run `npx skills add alirezarezvani/claude-skills --skill demo-video -a codex`. Or copy the skill folder (engineering/demo-video/skills/demo-video in alirezarezvani/claude-skills) into .agents/skills/demo-video in your project. Codex loads it when a task matches its description.
Can I use Demo Video in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add alirezarezvani/claude-skills --skill demo-video -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/demo-video, .gemini/skills/demo-video, .github/skills/demo-video and .opencode/skills/demo-video in your project.
What does Demo Video need to run?
Going by SKILL.md and its folder, Demo Video needs the command-line tools its instructions call (playwright).
Does Demo Video access the network?
SKILL.md names 1 domain. As links in the text: github.com. This is read from the text; nothing was executed.
Is Demo Video safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Demo Video use?
Demo Video is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Demo Video use?
About 1.3k tokens (SKILL.md is roughly 5.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 406 tokens, read only when the agent opens those files.
What are the alternatives to Demo Video?
Skills that share tags, products or a category with Demo Video: Explain Video (limin112/min-skill, 454 stars), Whiteboard Video (trustfuture/simon-skills, 382 stars), Motion Ad (fabricioctelles/skills, 106 stars) and Render Brand Identity Reveal (gooseworks-ai/goose-skills, 1.2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Demo Video?
alirezarezvani (a GitHub user) maintains it in alirezarezvani/claude-skills, which has 27,938 GitHub stars. The repository holds 342 skills in this directory. The repository was last updated on August 30, 2026.
Source: alirezarezvani/claude-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.