Demo Video Skill — Design skill for Claude Code

demo-video

A [Claude Code](https://docs.anthropic.com/en/docs/claude-code) skill that scaffolds and renders storytelling-driven [Remotion](https://remotion.dev) demo videos for any project. Free voiceover with Edge TTS, word-synced captions, and tight audio-visual timing out of the box.

What it does

When you run `/demo-video`, Claude will:

1. Analyze your project -- reads README, package.json, theme files, and docs to understand features, colors, tech stack, and the problem the product solves
2. Write a story-driven video plan -- proposes a 5-act narrative arc (hook, problem, turn, journey, resolution) with full voiceover script drafts and visual sync notes
3. Scaffold a Remotion project -- creates a complete remotion/ directory with scenes, components, animations, timing data, and sync scripts
4. Generate code -- builds every scene with device mockups, gradient backgrounds, spring animations, and narration-synced visuals
5. Generate voiceovers -- runs Edge TTS (free, no API key) to produce narration with word-level subtitle timing
6. Sync audio to visuals -- parses subtitle timing into timing.ts so elements appear when the narrator mentions them
7. Render to MP4 -- outputs 1920x1080 video (plus optional WebM, GIF, or vertical 9:16)

Install

npx claude-code skills add ajanaku1/demo-video-skill

Usage

Inside any project directory in Claude Code:

/demo-video

Or with a description:

/demo-video my-awesome-app

Storytelling approach

Every demo video follows a narrative arc instead of listing features:

Act	Purpose	Example
Hook	Provocative question or bold stat	"What if you never had to..."
Problem	Dramatize the pain	"Spreadsheets. Manual processes."
Turn	Introduce the product	"Meet [Product]."
Journey	Features as solutions	"Remember that pain? Watch this."
Resolution	Circle back, end with confidence	"Stop [old way].