playbooks

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

demo-video skill

/skills/demo-video

This skill generates product demo videos programmatically with Remotion and optional voiceover, creating scripted scenes, screenshots, and MP4 rendering.

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']"
effort: high
---

# 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 crafts tight narration scripts, captures screens or short recordings, composes scenes, and renders a polished MP4 suitable for marketing or product walkthroughs. The workflow targets fast, repeatable demo creation for app previews and feature explainers.

How this skill works

The skill analyzes your app structure and the feature description to produce a concise narration script. It captures screenshots or short screencasts, generates a synthetic voiceover when requested, and assembles timed scenes in Remotion. Finally, it renders the composed sequence to an MP4 file named demo-[product]-[feature].mp4.

When to use it

  • Creating short product demo videos for landing pages or app stores
  • Making feature walkthroughs and onboarding previews
  • Producing marketing explainer clips for social or ads
  • Generating screencasts for release notes or changelogs
  • Automating regular demo updates for evolving features

Best practices

  • Provide a clear feature description and key user flows to improve script relevance
  • Record in a consistent screen resolution and aspect ratio for predictable composition
  • Use concise bullets for narration inputs to keep videos tight (20–60 seconds per feature)
  • Enable voiceover only when you want a polished narration; otherwise use captions or music
  • Review generated script before rendering to adjust tone and pacing

Example use cases

  • Automate a 30-second app preview highlighting a new onboarding flow
  • Create a feature walkthrough demo for a status page builder to show key panels
  • Produce marketing snippets for social ads demonstrating a core use case
  • Generate regular update videos showing the latest UI changes and interactions

FAQ

What outputs does the skill produce?

It renders an MP4 file named demo-[product]-[feature].mp4 in the current directory.

Can I use a custom voice for voiceover?

Yes. The skill supports optional external TTS providers; provide credentials or endpoint for custom voice integration.