feat(engineering): add demo-video skill
Add a skill for creating polished demo videos from screenshots and scene descriptions. Orchestrates playwright, ffmpeg, and edge-tts MCPs. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Srinivas Vaddi
142
engineering/demo-video/SKILL.md
Normal file
142
engineering/demo-video/SKILL.md
Normal file
@@ -0,0 +1,142 @@
|
|||||||
|
---
|
||||||
|
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
|
||||||
|
|
||||||
|
| Mode | How | When |
|
||||||
|
|------|-----|------|
|
||||||
|
| **MCP Orchestration** | HTML -> playwright screenshots -> edge-tts audio -> ffmpeg composite | Most control |
|
||||||
|
| **Pipeline** | [framecraft](https://github.com/vaddisrinivas/framecraft) CLI: `uv run python framecraft.py render scenes.json --auto-duration` | Most reliable |
|
||||||
|
| **Manual** | Build HTML, screenshot, generate TTS, composite with ffmpeg | Always works |
|
||||||
|
|
||||||
|
### 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
|
||||||
|
|
||||||
|
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
|
||||||
|
|
||||||
|
### 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."
|
||||||
|
|
||||||
|
## Scene Design System
|
||||||
|
|
||||||
|
### Color Language
|
||||||
|
|
||||||
|
| Color | Meaning | Use for |
|
||||||
|
|-------|---------|---------|
|
||||||
|
| `#c5d5ff` | Trust | Titles, logo |
|
||||||
|
| `#7c6af5` | Premium | Subtitles, badges |
|
||||||
|
| `#4ade80` | Success | "After" states |
|
||||||
|
| `#f28b82` | Problem | "Before" states |
|
||||||
|
| `#fbbf24` | Energy | Callouts |
|
||||||
|
| `#0d0e12` | Background | Always dark mode |
|
||||||
|
|
||||||
|
### Animation Timing
|
||||||
|
|
||||||
|
```
|
||||||
|
Element entrance: 0.5-0.8s (cubic-bezier(0.16, 1, 0.3, 1))
|
||||||
|
Between elements: 0.2-0.4s gap
|
||||||
|
Scene transition: 0.3-0.5s crossfade
|
||||||
|
Hold after last anim: 1.0-2.0s
|
||||||
|
```
|
||||||
|
|
||||||
|
### Typography
|
||||||
|
|
||||||
|
```
|
||||||
|
Title: 48-72px, weight 800
|
||||||
|
Subtitle: 24-32px, weight 400, muted
|
||||||
|
Bullets: 18-22px, weight 600, pill background
|
||||||
|
Font: Inter (Google Fonts)
|
||||||
|
```
|
||||||
|
|
||||||
|
### HTML Scene Layout (1920x1080)
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<h1 class="title">...</h1> <!-- Top 15% -->
|
||||||
|
<div class="hero">...</div> <!-- Middle 65% -->
|
||||||
|
<div class="footer">...</div> <!-- Bottom 20% -->
|
||||||
|
</body>
|
||||||
|
```
|
||||||
|
|
||||||
|
Background: dark with subtle purple-blue glow gradients. Screenshots: always `border-radius: 12px` with `box-shadow`. Easing: always `cubic-bezier(0.16, 1, 0.3, 1)` — never `ease` or `linear`.
|
||||||
|
|
||||||
|
### Voice Options (edge-tts)
|
||||||
|
|
||||||
|
| Voice | Best for |
|
||||||
|
|-------|----------|
|
||||||
|
| `andrew` | Product demos, launches |
|
||||||
|
| `jenny` | Tutorials, onboarding |
|
||||||
|
| `davis` | Enterprise, security |
|
||||||
|
| `emma` | Consumer products |
|
||||||
|
|
||||||
|
### Pacing Guide
|
||||||
|
|
||||||
|
| Duration | Max words | Fill |
|
||||||
|
|----------|-----------|------|
|
||||||
|
| 3-4s | 8-12 | ~70% |
|
||||||
|
| 5-6s | 15-22 | ~75% |
|
||||||
|
| 7-8s | 22-30 | ~80% |
|
||||||
|
|
||||||
|
## 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/cli-demo-generator` — for terminal-based demos
|
||||||
|
- Related: `engineering/presentation-builder` — for slide decks
|
||||||
|
- Full tooling: [framecraft](https://github.com/vaddisrinivas/framecraft) — templates, pipeline, MCP server
|
||||||
Reference in New Issue
Block a user