Communitygithub.com

Fldicoahkiin/dotfiles

Verwandle eine laufende Web-App in ein filmreifes Demo-Video: Echte Benutzerinteraktion, lokale TTS-Sprachausgabe, wortgenaue Untertitel und dezente Hintergrundmusik – alles automatisiert und deterministisch.

Was ist dotfiles?

Dieses Skill ermöglicht es, aus einer beliebigen laufenden Web-App (z. B. lokalem Dev-Server oder deployedem URL) ein professionelles Produkt-Demovideo zu erstellen. Es kombiniert Playwright-Aufzeichnungen mit sichtbarem Cursor, lokaler Kokoro TTS-Sprachausgabe, Whisper-basierten wortgenauen Untertiteln und einer HyperFrames-HTML-Komposition zu einer einzigen MP4-Datei. Der Workflow ist modular und erlaubt es, Szenen, Vertonung oder Musik unabhängig voneinander neu zu generieren, ohne andere Schritte zu wiederholen. Das Skill ist besonders geeignet für Hackathon-Einreichungen, Produkt-Walkthroughs oder Launch-Videos und liefert eine deterministische, reproduzierbare Ausgabe mit einer festgelegten Hackathon-Vorlage.

Funktioniert mit~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/Fldicoahkiin/dotfiles/tree/HEAD/private_dot_claude/skills/demo-video-skill
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Demo Video Studio

Verwandle eine laufende Web-App in einen filmreifen Demo-Film: echte aufgezeichnete Interaktion (keine Diashow, kein Mock) + lokale TTS-Sprachausgabe + wortgenaue Untertitel + eine dezente Hintergrundmusik, deterministisch komponiert mit HyperFrames.

Wann verwenden

Für jedes Demo-/Walkthrough-/Produkt-/Launch-/Hackathon-Video einer Web-App, besonders wenn das echte Produkt mit Sprachausgabe und Untertiteln gezeigt werden soll. Zeichnet eine deployede URL oder einen lokalen Dev-Server auf.

Pipeline

① record    Playwright steuert deine Live-App, sichtbarer Cursor → out/clips/*.webm
② narrate   VO pro Szene schreiben → Kokoro TTS (lokal)         → narration/*.wav
③ transcribe Whisper Wort-für-Wort-Zeitstempel                  → *.transcript.json
④ caption   in Phrasen gruppieren + Markennamen korrigieren     → captions.js
⑤ music     ffmpeg Ambient-Musikbett (leise unter der Stimme)   → music/bed.wav
⑥ compose   HyperFrames HTML-Ein-Timeline: Clips+Stimme+Untertitel+Musik → MP4

Aufzeichnung und Komposition sind unabhängig: Nimm eine Szene neu auf oder führe die Vertonung neu aus, ohne die anderen Schritte zu wiederholen. Eine optionaler, codegenerierter GIF-Track (HTML-Szenen direkt als MP4 ohne Aufnahme) ist ein Nebenpfad für Dokumentationsseiten.

Arbeitsablauf

  1. Verstehe das Produkt zuerst. Lies die README/Demo-Dokumentation. Schreibe einen Demo-Ablauf, bevor du die Werkzeuge anfasst: Problem → Produkt-Walkthrough → Beleg → Fazit. Wähle den empfohlenen Klickpfad und das sichtbare Ergebnis, das jede Szene erreichen muss. Siehe references/templates.md.
  2. Aufnehmen. Kopiere scripts/record.mjs, setze APP und SIZE, ersetze scenes mit deiner Choreografie (gleiten → pausieren → handeln → halten). Nimm mit 1:1 Geräteskala auf. node scripts/record.mjs [scene]. Engine + ausgearbeitetes Beispiel: references/recording.md.
  3. Vertonen → Untertitel. Schreibe eine assets/narration/NN-*.txt pro Szene in VO-Stimme (du sprichst zu einem Zuschauer, nicht liest eine README vor). Dann: bash scripts/tts.sh && bash scripts/transcribe.sh && node scripts/build-captions.mjs. Bearbeite PHRASE_FIX in build-captions.mjs für deine Markennamen. Anleitung: references/narration-and-captions.md.
  4. Komponieren & rendern. Starte von references/composition-skeleton.html (ein Clip + Untertitel-Track + Audio), erweitere die Timeline, dann npx hyperframes render . --resolution landscape --fps 30 --crf 17 --quality high. Rendere 1:1 (1080p authoring → 1080p Ausgabe) – niemals auf 4K hochskalieren, das macht die UI unscharf. references/composition.md.
  5. QC vor dem Versand. ffprobe für Dauer/Audio, 1–2 Frames prüfen (nicht schwarz, nicht leer), Untertitel im Frame, Vertonung nicht abgeschnitten, die entscheidende Ergebnis-Seite tatsächlich sichtbar. Korrigiere Ablauf/Timing, dann neu rendern.

Schnellstart

# System-Abhängigkeiten
brew install node ffmpeg
npx playwright install chromium

# Python venv für lokale TTS + Transkription (einmalig)
python3 -m venv .ttsvenv && .ttsvenv/bin/pip install kokoro-onnx soundfile
export PATH="$(pwd)/.ttsvenv/bin:$PATH"

# 1) record  2) narrate  3) caption  4) compose+render
node scripts/record.mjs
bash scripts/tts.sh && bash scripts/transcribe.sh && node scripts/build-captions.mjs
npx hyperframes render . --resolution landscape --fps 30 --crf 17 --quality high --output out/demo.mp4

Beim ersten TTS werden ~340 MB heruntergeladen (Kokoro), beim ersten Transkribieren ~466 MB (Whisper small.en); beide werden in ~/.cache/hyperframes/ zwischengespeichert.

Hart erarbeitete Regeln

  • Echte Interaktion schlägt Folien – nimm das tatsächlich laufende Produkt auf.
  • 1:1, niemals 2× hochskalieren – Aufnahme bei 2× DPR und Rendering in 4K macht jeden UI-Clip unscharf. Authoring und Rendering bei 1080p.
  • Deterministische Komposition – kein Date.now(), Math.random() oder Netzwerk im HTML; HyperFrames sucht Frames, daher muss Bewegung reproduzierbar sein.
  • Sichtbarer Cursor + auf Ergebnissen halten – bewusst gleiten, auf dem Payoff pausieren.
  • VO, nicht Dokumentation – die Vertonung folgt dem Bild; sie ist nicht die README vorgelesen.
  • Video ≥ Vertonung – clip-Zeit polstern, damit die Bilder nie vor der Stimme enden.

Abhängigkeiten

Node 22+, FFmpeg, Playwright (Chromium), und die HyperFrames CLI (npx hyperframes, installiere dessen Skills mit npx skills add heygen-com/hyperframes). Lokales TTS/Whisper benötigt Python + kokoro-onnx. Siehe references/composition.md für die HyperFrames-Einrichtung.

Referenzen

Verwandte Skills

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community