home / skills / phrazzld / claude-config / demo-video

demo-video skill

safe

This skill generates product demo videos programmatically with Remotion, including narration, screencasts, and synchronized voiceover.

npx playbooks add skill phrazzld/claude-config --skill demo-video

Review the files below or copy the command above to add this skill to your agents.

Files (5)

SKILL.md

1.0 KB

---
name: demo-video
description: |
  Generate product demo videos programmatically with Remotion + voiceover.
  Use when: creating product demos, explainer videos, feature walkthroughs,
  marketing videos, or app previews. Handles screen capture, voiceover sync,
  and rendering. Keywords: demo, video, screencast, explainer, walkthrough.
argument-hint: "[product] [feature to demo, e.g. 'status page builder']"
---

# Demo Video

## What This Does
- Analyze app structure + feature description.
- Generate a tight narration script.
- Capture screenshots or short recordings.
- Generate voiceover via `/voiceover` when needed.
- Compose scenes with Remotion.
- Render to MP4.

## Prerequisites
- Remotion skills: `npx skills add remotion-dev/skills`
- Optional voiceover: ElevenLabs

## Usage
- `/demo-video heartbeat "status page builder"`
- `/demo-video caesar "onboarding flow" with voiceover`

## Output
- `demo-[product]-[feature].mp4` in current directory

## References
- `references/remotion-patterns.md`
- `references/kickstart-guide.md`

Overview

This skill generates product demo videos programmatically using Remotion and optional voiceover. It automates script generation, screen capture or short recordings, scene composition, and final MP4 rendering. The output is a tightly edited demo file named demo-[product]-[feature].mp4 placed in the current directory.

How this skill works

The skill analyzes your app structure and a short feature description to produce a concise narration script. It captures screenshots or brief screen recordings, optionally generates a voiceover (e.g., via ElevenLabs), and composes timed scenes in Remotion. Finally, it renders the composed sequence to an MP4 using Remotion’s rendering pipeline.

When to use it

Creating product demo videos for launch or updates
Building explainer videos for new features
Producing feature walkthroughs and onboarding previews
Generating marketing videos or social previews quickly
Creating app store or marketplace preview clips

Best practices

Provide a clear short description of the feature and key flows to focus the script
Capture high-quality screenshots or short clips at native resolution for clarity
Use optional voiceover when you need polished narration and brand tone
Keep demo segments short (5–15 seconds each) to maintain viewer attention
Review the auto-generated script and tweak phrasing for product voice before rendering

Example use cases

Generate a 60–90s launch demo highlighting the main value prop and two core flows
Produce an onboarding walkthrough showing sign-up, first task, and personalization
Create a marketing teaser that combines screen captures with callout text and voiceover
Auto-create feature update clips for release notes and social sharing
Build app preview videos for marketplaces or investor decks

FAQ

Can I use my own voiceover instead of the generated one?

Yes. You can supply a pre-recorded audio file and the skill will sync it with composed scenes instead of generating audio.

What output formats are supported?

The skill renders MP4 by default via Remotion. You can re-encode the MP4 to other formats after rendering if needed.