yash0208/demo-video-master

What does demo-video-master do?

Turn a feature + URL into a cinematic product demo video in one command.

Combines four tools into a single automated pipeline:

Stage	Tool	What it does
Capture	agent-browser	Screenshots + scroll recording of the live URL
Design	video-shotcraft	5–7 cinematic shots, PageCam keys, captions, SFX
Render	Remotion	React → mp4
Voice	ElevenLabs	Per-scene VO narration
Merge	ffmpeg	VO + video → final.mp4

---

Trigger

Either of these activates this skill:

demo-video: <feature description> <url>

make a demo video for <url> — <feature description>

---

Full Pipeline (read this before starting)

See pipeline.md for the complete step-by-step agent instructions.

Quick summary:

1. Capture — run scripts/capture.mjs <url> <slug> → PNGs land in public/textures/<slug>/
2. Design — invoke video-shotcraft autonomous mode with the captures; output shotlist.json + scene TSX files
3. Parallel:
   • 3a VO — run scripts/elevenlabs-vo.mjs <slug> in background
   • 3b Render — npx remotion render src/Root.tsx <CompositionId> out/<slug>.mp4
4. Merge — scripts/merge.sh <slug> — ffmpeg nails VO onto rendered video
5. Commit + preview — commit to examples/<slug>/, open QuickLook

---

Setup (one time)

# 1. Install this skill
git clone https://github.com/yash0208/demo-video-master ~/.claude/skills/demo-video-master

# 2. Install agent-browser (vercel-labs/agent-browser)
npm install -g agent-browser
agent-browser install          # downloads Chrome once

# 3. Install prerequisite skills
git clone https://github.com/vincentwei1021/video-shotcraft ~/.claude/skills/video-shotcraft
git clone https://github.com/yash0208/remotion-best-practices ~/.claude/skills/remotion-best-practices

# 4. Install ffmpeg
brew install ffmpeg             # macOS; or apt install ffmpeg on Linux

# 5. Copy env template to your video project
cp ~/.claude/skills/demo-video-master/.env.example _video/.env.local
# Fill in ELEVENLABS_API_KEY and ELEVEN_VOICE_ID

---

Rules (always enforce)

• Screenshots only — use real page captures via agent-browser; never synthesize UI
• PII masking — replace real user data before any capture goes into the render
• Deterministic render — no Math.random() / Date.now() in Remotion scenes; seed all randomness from index
• Parallel VO + render — always run ElevenLabs and Remotion concurrently to save time
• External infographics only — animated elements sit on top of screenshots; no translateZ card lifts, no border rings drawn on screenshots

---

Environment Variables

ELEVENLABS_API_KEY=your_key_here
ELEVEN_VOICE_ID=your_voice_id_here   # default: Adam (pNInz6obpgDQGcFmaJgB)