Communitygithub.com

Fldicoahkiin/dotfiles

Produire une vidéo de démonstration / produit cinématographique à partir d'une application web en direct. Playwright enregistre les interactions réelles à l'écran avec un curseur synthétique visible ; la TTS locale Kokoro raconte ; Whisper génère des sous-titres synchronisés mot par mot ; une composition HTML HyperFrames assemble les clips, la voix, les sous-titres et une bande sonore en un MP4. À utiliser lorsque l'utilisateur souhaite créer une vidéo de démo, une présentation produit, une capture d'écran commentée, une vidéo de soumission de hackathon, un clip de lancement, ou « enregistrer mon application avec narration et sous-titres ». Sortie d'un seul MP4 paysage ; une structure de hackathon est intégrée en tant que modèle.

Qu'est-ce que dotfiles ?

Ce skill transforme une application web en une vidéo de démonstration soignée, en enregistrant les interactions réelles via Playwright avec un curseur visible, générant une narration TTS locale avec Kokoro et des sous-titres synchronisés mot par mot avec Whisper, le tout assemblé par HyperFrames en un MP4 paysage. Il est idéal pour les démos produit, les présentations, les vidéos de hackathon ou les lancements. Le pipeline modulaire permet de réenregistrer une seule scène ou de modifier la narration sans refaire le reste. La composition déterministe garantit des rendus reproductibles, et la sortie est en 1080p sans upscaling 4K pour préserver la netteté de l'interface utilisateur.

Compatible avec~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/Fldicoahkiin/dotfiles/tree/HEAD/private_dot_claude/skills/demo-video-skill
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Studio Vidéo de Démo

Transformez une application web en cours d'exécution en un film de démonstration soigné : interaction réelle enregistrée (pas de diaporama, pas de maquette) + narration TTS locale + sous-titres synchronisés mot par mot + une bande sonore discrète, le tout composé de manière déterministe avec HyperFrames.

Quand l'utiliser

Pour toute réalisation de vidéo de démo / présentation / lancement / hackathon d'une application web, surtout lorsqu'elle doit montrer le produit réel en fonctionnement avec narration et sous-titres. Enregistre une URL déployée ou un serveur de développement local.

Pipeline

① enregistrer    Playwright pilote votre application en direct, curseur visible → out/clips/*.webm
② narrer         écrire la voix-off par scène → Kokoro TTS (local)              → narration/*.wav
③ transcrire     Whisper timestamps au niveau mot                              → *.transcript.json
④ sous-titrer    grouper en phrases + corriger les erreurs de marque            → captions.js
⑤ musique        ffmpeg bande sonore ambiante (mixée bas sous la voix)         → music/bed.wav
⑥ composer       HyperFrames HTML une seule timeline : clips+voix+sous-titres+musique → MP4

L'enregistrement et la composition sont indépendants : réenregistrez une seule scène, ou relancez la narration, sans refaire l'autre. Une piste GIF générée par code (scènes HTML rendues directement en MP4, sans enregistrement) est un chemin alternatif optionnel pour les pages de documentation.

Flux de travail

  1. Comprendre d'abord le produit. Lisez son README / ses docs de démo. Écrivez un Déroulé de démo avant de toucher aux outils : problème → présentation du produit → preuve → conclusion. Choisissez le chemin de clics recommandé et le résultat visible que chaque scène doit atteindre. Voir references/templates.md.
  2. Enregistrer. Copiez scripts/record.mjs, définissez APP et SIZE, remplacez scenes par votre chorégraphie (glisser → pause → agir → maintenir). Enregistrez à l'échelle 1:1 de l'appareil. node scripts/record.mjs [scene]. Moteur + exemple concret : references/recording.md.
  3. Narrer → sous-titrer. Écrivez un fichier assets/narration/NN-*.txt par scène en voix-off (vous parlez à un spectateur, vous ne lisez pas un README). Ensuite : bash scripts/tts.sh && bash scripts/transcribe.sh && node scripts/build-captions.mjs. Modifiez PHRASE_FIX dans build-captions.mjs pour les noms de marque. Guide : references/narration-and-captions.md.
  4. Composer et rendre. Partez de references/composition-skeleton.html (un clip + piste de sous-titres + audio), agrandissez la timeline, puis npx hyperframes render . --resolution landscape --fps 30 --crf 17 --quality high. Rendez en 1:1 (1080p créé → 1080p sortie) — ne jamais upscaler en 4K, cela adoucit l'interface utilisateur. references/composition.md.
  5. Contrôle qualité avant de livrer. ffprobe pour la durée/l'audio, échantillonnez 1–2 images (pas noires, pas vides), sous-titres dans le cadre, narration non coupée, la page de résultat clé effectivement visible. Corrigez le flux/rythme, puis re-rendez.

Démarrage rapide

# dépendances système
brew install node ffmpeg
npx playwright install chromium

# Environnement Python pour TTS locale + transcription (une seule fois)
python3 -m venv .ttsvenv && .ttsvenv/bin/pip install kokoro-onnx soundfile
export PATH="$(pwd)/.ttsvenv/bin:$PATH"

# 1) enregistrer  2) narrer  3) sous-titrer  4) composer + rendre
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

La première TTS télécharge ~340 Mo (Kokoro), la première transcription ~466 Mo (Whisper small.en) ; les deux sont mis en cache dans ~/.cache/hyperframes/.

Règlements durement acquis

  • L'interaction réelle bat les diapositives — enregistrez le produit réellement en fonctionnement.
  • 1:1, jamais de suréchantillonnage 2× — enregistrer à 2× DPR et rendre en 4K adoucit chaque clip d'interface. Créez et rendez en 1080p.
  • Composition déterministe — pas de Date.now(), Math.random(), ou réseau dans le HTML ; HyperFrames cherche les images, donc le mouvement doit être reproductible.
  • Curseur visible + maintenir sur les résultats — glissez délibérément, faites une pause sur la valeur ajoutée.
  • Voix-off, pas documentation — la narration suit l'image ; ce n'est pas le README lu à voix haute.
  • Vidéo ≥ narration — ajoutez du temps aux clips pour que les visuels ne se terminent jamais avant la voix.

Dépendances

Node 22+, FFmpeg, Playwright (Chromium), et l'interface en ligne de commande HyperFrames (npx hyperframes, installez ses compétences avec npx skills add heygen-com/hyperframes). La TTS locale / Whisper nécessitent Python + kokoro-onnx. Voir references/composition.md pour la configuration HyperFrames.

Références

Skills associés

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