Creates polished, narrated product demo videos using Remotion (React) with AI-crafted storytelling (Opus 4.6), real app screenshots, animated phone mockups, brand-aligned styling, and TTS voiceover (OpenAI or macOS). Use when: (1) user asks to create a product video or demo reel, (2) user wants an Instagram Reel or YouTube video showcasing their app, (3) user has a running web app and wants animated marketing content, (4) user provides brand guidelines to apply to a video project.
How this skill is triggered — by the user, by Claude, or both
Slash command
/product-video-creation:product-video-creationThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Creating a compelling product demo video requires storytelling, visual design, voiceover narration, and video editing — typically spread across After Effects, script writers, and voice talent. This skill generates broadcast-quality narrated product videos entirely in code, using AI reasoning for storytelling and TTS for voiceover.
Creating a compelling product demo video requires storytelling, visual design, voiceover narration, and video editing — typically spread across After Effects, script writers, and voice talent. This skill generates broadcast-quality narrated product videos entirely in code, using AI reasoning for storytelling and TTS for voiceover.
Orchestrator (this skill — coordinates all phases)
├── product-video-storyteller (Opus agent — crafts narrative arc + scene scripts)
├── Screenshot capture (Playwright script — deterministic)
├── Scene components (Code generation — brand-aligned Remotion scenes)
├── product-video-narrator (Sonnet agent — generates TTS audio)
└── Composition wiring (Code — timing, audio sync, aspect ratio)
All scripts are in ~/.claude/skills/product-video-creation/scripts/ and are standalone:
SKILL_DIR=~/.claude/skills/product-video-creation
# Scaffold a new project (no existing project needed)
$SKILL_DIR/scripts/scaffold-project.sh ~/dev/my-video --aspect 9:16
# Capture screenshots
$SKILL_DIR/scripts/capture-screenshots.sh ./public/screenshots --url https://myapp.com
# Generate voiceover
$SKILL_DIR/scripts/generate-voiceover.sh narration.json ./public/audio --provider openai --voice ash
# Render and preview
$SKILL_DIR/scripts/render-and-preview.sh --contact-sheet
# Task manifest
$SKILL_DIR/scripts/task-manifest.sh full-video
Create tasks from scripts/task-manifest.sh full-video before starting.
If the user is NOT already in a Remotion project, scaffold one:
~/.claude/skills/product-video-creation/scripts/scaffold-project.sh <project-dir> --aspect 9:16
cd <project-dir>
The script creates a complete Remotion + Tailwind + Lucide project with Google Fonts pre-configured. If remotion.config.ts already exists in the CWD, it skips scaffolding.
Before any work begins, present the user with voice options. This is a brainstorming conversation.
# Check for OpenAI API key
echo "${OPENAI_API_KEY:+OpenAI TTS available}" || echo "No OpenAI key found"
# List voices
./scripts/generate-voiceover.sh --list-voices --provider openai
./scripts/generate-voiceover.sh --list-voices --provider macos
Ask the user to choose. Present it like this:
How would you like the voiceover narrated?
Option A: OpenAI TTS (recommended — natural, studio-quality voices with tone control)
| Voice | Character | Best for |
|---|---|---|
| coral | Clear, warm, natural | General product demos |
| nova | Energetic, youthful | Tech/startup products |
| sage | Calm, wise | Wellness, premium brands |
| fable | Expressive, storytelling | Narrative-heavy videos |
| onyx | Deep, authoritative | Enterprise, B2B |
| ash | Warm, conversational | Friendly/casual brands |
| shimmer | Light, airy | Lifestyle, creative products |
| echo | Smooth, confident | Finance, professional |
| cedar | Warm, grounded | Nature, sustainability |
| ballad | Soft, melodic | Luxury, boutique |
| verse | Rich, articulate | Education, culture |
| marin | Bright, friendly | Social, community apps |
Requires OPENAI_API_KEY. If not set, guide user:
export OPENAI_API_KEY=sk-... # From https://platform.openai.com/api-keys
Option B: macOS Native Voice (free, no API key, works offline)
Option C: No voiceover — visual-only video with on-screen text
Wait for user selection before proceeding.
This is NOT a heuristic template fill. Launch the product-video-storyteller agent (Opus model) to craft the narrative.
A complete narrative with:
Present the narrative to the user for approval before proceeding. Allow them to revise tone, adjust copy, or change the story arc.
./scripts/capture-screenshots.sh ./public/screenshots \
--url http://localhost:5173 \
--shared-url https://app.example.com/shared/abc \
--hide-selectors ".fixed,.theme-toggle" \
--fullpage
Or write a custom Playwright capture script for the specific app flow.
Save the storyteller's per-scene narration as JSON:
[
{ "scene": "hook", "text": "What if the hardest part was already done?", "instructions": "Speak with gentle curiosity, like asking a friend." },
{ "scene": "intro", "text": "A smarter way to get started.", "instructions": "Warmer now, confident but not pushy." }
]
Generate audio:
./scripts/generate-voiceover.sh narration.json ./public/audio \
--provider openai --voice coral \
--instructions "Speak warmly and calmly, like a thoughtful host."
Add <Audio> components in the Composition, synced to scene <Sequence> timing:
import { Audio, staticFile } from "remotion";
<Sequence from={0} durationInFrames={150}>
<Audio src={staticFile("audio/01-hook.mp3")} />
<HookScene />
</Sequence>
Adjust scene durationInFrames to match audio duration:
const audioDurationFrames = Math.ceil((audioDurationMs / 1000) * fps);
Create scenes using the storyteller's output — not hardcoded templates. Each scene's headlines, copy, bullet points, and step descriptions come from the narrative.
See references/scene-architecture.md for:
src/scenes/HookScene.tsx — dramatic text revealsrc/scenes/IntroScene.tsx — product name + value propsrc/scenes/AppShowcaseScene.tsx + AnimatedPhone.tsx — cycling screenshotssrc/scenes/VibesScene.tsx — Lucide icon feature cardssrc/scenes/HowItWorksScene.tsx — numbered step processsrc/scenes/ResultsScene.tsx + ScrollingPhone.tsx — scrolling resultssrc/scenes/CtaScene.tsx — closing headline + CTAIf brand guidelines provided, extract and apply:
instructionsLaunch product-video-music-curator agent to find royalty-free background music.
What the curator receives: narrative arc, brand tone, video duration, voiceover characteristics What it returns: 3-5 track recommendations from Pixabay/Mixkit/FMA with download URLs
After user selects a track:
public/audio/bg-music.mp3ffmpeg -i public/audio/bg-music-raw.mp3 \
-af "afade=t=in:st=0:d=3,afade=t=out:st=<end-3>:d=3" \
public/audio/bg-music.mp3
Launch product-video-audio-mixer agent OR use Remotion-native mixing (recommended).
Add background music as a separate <Audio> spanning the full video:
<Audio src={staticFile("audio/bg-music.mp3")} volume={0.10} startFrom={0} />
Volume guidelines:
volume callback for dynamic duckingWire scene <Sequence> timing from audio durations. Overlap by 10-15 frames for crossfades.
Use scripts/render-and-preview.sh for the full render → verify → preview pipeline:
# Render, show specs, and open in video player
./scripts/render-and-preview.sh
# Render with contact sheet for visual verification
./scripts/render-and-preview.sh --contact-sheet
# Custom output path
./scripts/render-and-preview.sh --output out/reel-v2.mp4
# Render without opening player (CI/headless)
./scripts/render-and-preview.sh --no-open --contact-sheet
# See all options
./scripts/render-and-preview.sh --help
The script:
Root.tsxnpx remotion renderAfter rendering with --contact-sheet, use the Read tool to display the contact sheet image to the user:
Read: out/video-contact-sheet.png
For frame-by-frame scrubbing during development:
npx remotion studio # Opens at http://localhost:3000
| Agent | Model | Role |
|---|---|---|
product-video-storyteller | Opus | Crafts narrative arc, scene copy, voiceover scripts. Uses deep reasoning — not templates. |
product-video-narrator | Sonnet | Generates TTS audio files via OpenAI API or macOS say command. |
product-video-music-curator | Sonnet | Searches royalty-free music libraries, recommends tracks matching brand tone and narrative arc. |
product-video-audio-mixer | Sonnet | Mixes voiceover + background music with ducking, fades, and volume balancing. |
useCurrentFrame()<Img> from remotion, not <img>; use staticFile() for public/ assetsremotion-best-practices — general Remotion coding patternssmart-screen-recorder — alternative: record real screen + AI post-processingnpx claudepluginhub abhattacherjee/claude-code-skills --plugin product-video-creationCreates product launch or SaaS promo videos from a URL, brief, or script. Routes to specialized sub-skills for explainers, site tours, PR videos, or captions when input doesn't match a product launch.
Plans and produces demo videos, GIFs, screenshots, and Remotion programmatic videos for product launches. Covers scripting, recording, best practices, and platform formats.
Orchestrates AI video production workflow: gathers specs interactively, generates scripts/storyboards, Gemini TTS voiceovers, Lyria music, Veo 3.1 clips or image animations, assembles with FFmpeg.