Was macht demo-video-master?
Verwandle eine Funktion + URL in einem Befehl in ein filmisches Produkt-Demo-Video.
Kombiniert vier Werkzeuge in einer einzigen automatisierten Pipeline:
| Stufe | Werkzeug | Funktion |
|---|---|---|
| Erfassung | agent-browser | Screenshots + Scroll-Aufzeichnung der Live-URL |
| Design | video-shotcraft | 5–7 filmische Aufnahmen, PageCam-Keyframes, Untertitel, Soundeffekte |
| Rendering | Remotion | React → MP4 |
| Sprachausgabe | ElevenLabs | Szenenweise Voice-Over-Erzählung |
| Zusammenführung | ffmpeg | Voice-Over + Video → final.mp4 |
Auslöser
Einer der folgenden Befehle aktiviert diesen Skill:
demo-video: <Funktionsbeschreibung> <URL>
Erstelle ein Demovideo für <URL> — <Funktionsbeschreibung>
Vollständige Pipeline (vor Start lesen)
Siehe pipeline.md für die vollständigen Schritt-für-Schritt-Anweisungen für den Agenten.
Kurzzusammenfassung:
- Erfassung — Führe
scripts/capture.mjs <URL> <Slug>aus → PNGs landen inpublic/textures/<Slug>/ - Design — Rufe
video-shotcraftim autonomen Modus mit den Aufnahmen auf; Ausgabe:shotlist.json+ Szenen-TSX-Dateien - Parallel:
- 3a Sprachausgabe — Führe
scripts/elevenlabs-vo.mjs <Slug>im Hintergrund aus - 3b Rendern —
npx remotion render src/Root.tsx <CompositionId> out/<Slug>.mp4
- 3a Sprachausgabe — Führe
- Zusammenführung —
scripts/merge.sh <Slug>— ffmpeg fügt Sprachausgabe in das gerenderte Video ein - Commit + Vorschau — Commit in
examples/<Slug>/, öffne QuickLook
Einrichtung (einmalig)
# 1. Installieren dieses Skills
git clone https://github.com/yash0208/demo-video-master ~/.claude/skills/demo-video-master
# 2. Installieren von agent-browser (vercel-labs/agent-browser)
npm install -g agent-browser
agent-browser install # Lädt Chrome einmal herunter
# 3. Installieren der erforderlichen 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. Installieren von ffmpeg
brew install ffmpeg # macOS; oder apt install ffmpeg unter Linux
# 5. Kopiere die env-Vorlage in dein Videoprojekt
cp ~/.claude/skills/demo-video-master/.env.example _video/.env.local
# Fülle ELEVENLABS_API_KEY und ELEVEN_VOICE_ID aus
Regeln (immer einhalten)
- Nur Screenshots — Verwende echte Seitenaufnahmen über agent-browser; synthetisiere niemals eine Benutzeroberfläche
- PII-Maskierung — Ersetze echte Benutzerdaten, bevor eine Aufnahme in den Render einfließt
- Deterministisches Rendern — Keine
Math.random()/Date.now()in Remotion-Szenen; alle Zufallswerte aus dem Index seeden - Parallele Sprachausgabe + Rendern — Führe ElevenLabs und Remotion immer gleichzeitig aus, um Zeit zu sparen
- Nur externe Infografiken — Animierte Elemente liegen über Screenshots; keine translateZ-Karten-Lifts, keine Randkreise, die auf Screenshots gezeichnet werden
Umgebungsvariablen
ELEVENLABS_API_KEY=dein_schluessel_hier
ELEVEN_VOICE_ID=deine_stimme_id_hier # Standard: Adam (pNInz6obpgDQGcFmaJgB)