---
name: demo-video
description: 'Generate polished demo videos from a single prompt. Use when the user
  asks

  to create a demo video, product walkthrough, feature showcase, or animated

  presentation. Trigger with "make a demo video", "create a product video",

  "demo walkthrough", or "feature showcase video".

  '
allowed-tools: Read, Write, Edit, Bash(uv:*), Glob
version: 1.3.0
author: Srinivas Vaddisrinivas <vaddisrinivas170497@gmail.com>
license: MIT
tags:
- video
- demo
- playwright
- ffmpeg
- edge-tts
- mcp
compatibility: Designed for Claude Code
---
# 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 `uv` package 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:

```bash
claude plugin marketplace add jeremylongshore/claude-code-plugins-plus-skills
claude plugin install framecraft@claude-code-plugins-plus
```

### Quick Start

```bash
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

1. **Story design** -- Choose a narrative arc (problem-solution, hero journey, before-after)
2. **Scene authoring** -- Write HTML scenes with CSS animations, or use built-in templates
3. **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

```json
{
  "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](https://github.com/vaddisrinivas/framecraft)
- [Edge TTS voice list](https://learn.microsoft.com/en-us/azure/ai-services/speech-service/language-support)
- [Playwright documentation](https://playwright.dev/python/docs/intro)
- [FFmpeg documentation](https://ffmpeg.org/documentation.html)


---
Source attribution: jeremylongshore
Original project: https://github.com/jeremylongshore/claude-code-plugins-plus-skills/blob/ab85a061f7bcc039dac13ee193de7a4cd4388571/plugins/community/framecraft/skills/demo-video/SKILL.md
License: MIT
License information: https://opensource.org/license/mit
Original upstream instructions; downloaded from Mega AI Hub.

## Upstream license notice

MIT License

Copyright (c) 2026 vaddisrinivas

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.



# Mega AI Hub resource metadata

Creator / publisher: jeremylongshore
Original project: https://github.com/jeremylongshore/claude-code-plugins-plus-skills/blob/ab85a061f7bcc039dac13ee193de7a4cd4388571/plugins/community/framecraft/skills/demo-video/SKILL.md
Attribution basis: Source repository record

Fields of work: Content & Media, Marketing
Roles: Content Marketer, Product Marketer, Video Producer
Specialties: Specialty not specified
Tools: FFmpeg, Edge Tts, Playwright
Country applicability: Country not specified
Classification basis: Source catalog labels
Instruction SHA-256: 499ba73c46cb7fa9157e1cc097ba73a43eb748a12915d56f863f359032a6d4d5