Demo video
Skill jeremylongshore/claude-code-plugins-plus-skills/plugins/community/framecraft/skills/demo-video
425 plugins, 2,810 skills, 200 agents for Claude Code. Open-source marketplace at tonsofskills.com with the ccpi CLI package manager.
npx -y skills add jeremylongshore/claude-code-plugins-plus-skills --skill demo-videoAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
What its author says it does
Copied from the file, not written here
'Generate polished demo videos from a single prompt. Use when the user asks
The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.
SKILL.md
3.7 KB, as published. Nobody here has run it
Demo Video Generator
Overview
Generate 1920x1080 demo videos with voiceover, transitions, and CSS animations from a single prompt. Orchestrates Playwright (HTML-to-frame rendering), FFmpeg (compositing and transitions), and Edge TTS (neural voiceover) MCP servers.
Prerequisites
- Python 3.11+ and
uvpackage manager - FFmpeg installed (
ffmpeg -version) - Playwright chromium browser (
uv run playwright install chromium) - Internet connection for Edge TTS voice synthesis
Instructions
Install the framecraft plugin from the marketplace:
claude plugin marketplace add jeremylongshore/claude-code-plugins-plus-skills
claude plugin install framecraft@claude-code-plugins-plus
Quick Start
uv run python framecraft.py init my-demo # scaffold a project
uv run python framecraft.py render scenes.json --auto-duration
uv run python framecraft.py validate output.mp4 # quality check
MCP Orchestration
When Playwright, FFmpeg, and Edge TTS MCP servers are available, framecraft orchestrates them directly for maximum control over each frame and audio segment.
Pipeline Fallback
When MCP servers are not available, framecraft runs an atomic CLI pipeline that handles everything in one call.
Workflow
- Story design -- Choose a narrative arc (problem-solution, hero journey, before-after)
- Scene authoring -- Write HTML scenes with CSS animations, or use built-in templates
- Rendering -- Playwright captures frames, Edge TTS generates voiceover, FFmpeg composites
Output
- 1920x1080 MP4 video with voiceover and transitions
- Individual scene previews for iteration
- Validation report for quality assurance
Error Handling
| Error | Cause | Fix |
|---|---|---|
ffmpeg: command not found | FFmpeg not installed | Install via brew install ffmpeg or system package manager |
playwright._impl._errors.Error | Chromium not installed | Run uv run playwright install chromium |
edge_tts.exceptions.NoAudioReceived | TTS service unavailable | Check internet connection; retry after a few seconds |
FileNotFoundError: scenes.json | Missing scene config | Run uv run python framecraft.py init my-demo first |
| Blank or black frames | HTML scene rendering failed | Check HTML syntax and ensure assets are accessible |
Examples
{
"scenes": [
{
"title": "Meet YourApp",
"subtitle": "The smarter way to manage tasks",
"narration": "24 tasks. One dashboard. Zero stress.",
"voice": "en-US-AndrewNeural",
"bullets": ["Smart priorities", "Team sync", "One-click reports"],
"duration": 0
}
],
"output": "demo.mp4",
"width": 1920, "height": 1080,
"voice": "en-US-AndrewNeural",
"transition": "crossfade"
}
duration: 0 = auto-detect from TTS length + 1.5s buffer.
Resources
- Source repository with templates and pipeline: github.com/vaddisrinivas/framecraft
- Edge TTS voice list
- Playwright documentation
- FFmpeg documentation