yash0208/demo-video-master

Que fait demo-video-master ?

Transformez une fonctionnalité + URL en une vidéo de démonstration produit cinématographique en une seule commande.

Combine quatre outils en un pipeline entièrement automatisé :

Étape	Outil	Fonction
Capture	agent-browser	Captures d'écran + enregistrement du défilement de l'URL en direct
Conception	video-shotcraft	5 à 7 plans cinématographiques, touches PageCam, légendes, effets sonores
Rendu	Remotion	React → mp4
Voix	ElevenLabs	Narration vocale par scène
Fusion	ffmpeg	Voix + vidéo → final.mp4

---

Déclencheur

L'un des éléments suivants active ce skill :

demo-video: <description de la fonctionnalité> <url>

make a demo video for <url> — <description de la fonctionnalité>

---

Pipeline complet (à lire avant de commencer)

Voir pipeline.md pour les instructions détaillées étape par étape pour l'agent.

Résumé rapide :

1. Capture — exécutez scripts/capture.mjs <url> <slug> → les PNG sont sauvegardés dans public/textures/<slug>/
2. Conception — invoquez le mode autonome de video-shotcraft avec les captures ; sortie shotlist.json + fichiers TSX de scène
3. Parallèle :
   • 3a VO — exécutez scripts/elevenlabs-vo.mjs <slug> en arrière-plan
   • 3b Rendu — npx remotion render src/Root.tsx <CompositionId> out/<slug>.mp4
4. Fusion — scripts/merge.sh <slug> — ffmpeg synchronise la VO sur la vidéo rendue
5. Commit + aperçu — commitez dans examples/<slug>/, ouvrez QuickLook

---

Configuration (une seule fois)

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

# 2. Installer agent-browser (vercel-labs/agent-browser)
npm install -g agent-browser
agent-browser install          # télécharge Chrome une fois

# 3. Installer les compétences prérequises
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. Installer ffmpeg
brew install ffmpeg             # macOS ; ou apt install ffmpeg sur Linux

# 5. Copier le modèle d'environnement vers votre projet vidéo
cp ~/.claude/skills/demo-video-master/.env.example _video/.env.local
# Remplir ELEVENLABS_API_KEY et ELEVEN_VOICE_ID

---

Règles (toujours appliquer)

• Captures d'écran uniquement — utilisez des captures de page réelles via agent-browser ; ne synthétisez jamais d'interface utilisateur
• Masquage des données personnelles — remplacez les données utilisateur réelles avant toute capture entrant dans le rendu
• Rendu déterministe — pas de Math.random() / Date.now() dans les scènes Remotion ; ensemencez toute aléatoire à partir de l'index
• VO + rendu en parallèle — exécutez toujours ElevenLabs et Remotion simultanément pour gagner du temps
• Infographies externes uniquement — les éléments animés se superposent aux captures d'écran ; pas de levage de cartes translateZ, pas d'anneaux de bordure dessinés sur les captures d'écran

---

Variables d'environnement

ELEVENLABS_API_KEY=votre_clé_ici
ELEVEN_VOICE_ID=votre_id_voix_ici   # défaut : Adam (pNInz6obpgDQGcFmaJgB)