demo-video-generator

---
name: demo-video-generator
description: Use when turning a finished product, pull request, or agent skill into a polished 30–90 second proof video — plan the story, capture real behavior, edit, caption, render, and verify the MP4.
source: https://github.com/remotion-dev/remotion
generated: 2026-07-14T21:19:45.844Z
category: tool
audience: creators
---

## When to use

- Creating a short marketplace demo that proves an agent skill completes its promised workflow
- Turning a merged feature or finished application into a narrated product walkthrough
- Producing repeatable browser captures, captions, title cards, and a thumbnail from one shot plan
- Rebuilding a demo after the interface or workflow changes while preserving project style
- Verifying that a rendered video is readable, correctly timed, and free of blank or broken frames

## Key concepts

### Proof-first story

Open with the outcome, then show the smallest real sequence that proves it. Prefer an authentic before-action-after capture over a feature list or simulated terminal output.

### Shot contract

Define each shot's purpose, source, start state, action, expected end state, duration, narration, and fallback before recording. This makes recapture deterministic when a shot fails.

### Real interaction capture

Record an actual working build with stable data and deliberate cursor movement. Hide secrets and personal data, disable distracting notifications, and never fabricate a successful state the product did not produce.

### Timeline composition

Use a code-driven timeline such as Remotion when repeatability matters: compose captures, crops, callouts, narration, music, and captions from explicit frame ranges rather than destructive manual edits.

### Frame verification

Inspect representative frames from every shot plus transitions, not only the final file's existence. Check safe areas, text size, cursor visibility, clipping, blank frames, caption timing, and final duration.

## API reference

```
shots.json
```

Store a reproducible shot list that separates capture from editing and records expected evidence.

```
[{
  "id": "install",
  "purpose": "prove one-command install",
  "action": "run the documented install command",
  "expect": "skill folder appears and validation passes",
  "durationSec": 8
}]
```

```
npx remotion render <entry> <composition> <output.mp4>
```

Render the selected composition to a deterministic MP4 after validating assets and timing.

```
npx remotion render src/index.ts DemoVideo out/demo-video.mp4
```

```
ffmpeg representative-frame extraction
```

Extract frames at planned timestamps for a contact-sheet QA pass before publication.

```
ffmpeg -i out/demo-video.mp4 -vf "fps=1/5,scale=480:-1,tile=4x3" -frames:v 1 out/contact-sheet.png
```

```
Publication bundle
```

Deliver the MP4, thumbnail, captions, shot plan, source attribution, and verification summary together.

```
out/demo-video.mp4
out/thumbnail.jpg
out/captions.vtt
out/shots.json
out/sources.md
```

## Gotchas

- Do not record secrets, tokens, private repository names, personal notifications, or production customer data
- Do not begin editing before the product path works end to end; fix or clearly disclose broken behavior first
- Keep UI text and captions readable at mobile playback size, not merely on the editor's large monitor
- Use licensed or owned music, fonts, images, and footage and retain source attribution where required
- Avoid long typing sequences and dead time; accelerate repetitive action without hiding the evidence of success
- Verify audio peaks, caption timing, representative frames, file size, codec compatibility, and the final upload after rendering

---
Generated by SkillMake from https://github.com/remotion-dev/remotion on 2026-07-14T21:19:45.844Z.
Verify against source before relying on details.

File: ~/.claude/skills/demo-video-generator/SKILL.md