Communitygithub.com

Fldicoahkiin/dotfiles

Produce un video cinematográfico de demostración/producto a partir de una aplicación web en vivo. Playwright graba interacciones reales en pantalla con un cursor sintético visible; Kokoro TTS local narra; Whisper genera subtítulos sincronizados por palabra; una composición HTML de HyperFrames ensambla los clips, la voz, los subtítulos y una banda musical en un MP4. Úsalo cuando el usuario quiera crear un video demo, un recorrido de producto, una demostración grabada de pantalla, un video de envío para hackathon, un clip de lanzamiento o 'graba mi aplicación con narración y subtítulos'. Produce un único MP4 en formato apaisado; se incluye una estructura de hackathon como plantilla.

¿Qué es dotfiles?

Esta habilidad convierte una aplicación web en funcionamiento en un video de demostración profesional: **interacción real grabada** (no diapositivas ni simulaciones) + **narración TTS local** + **subtítulos sincronizados por palabra** + una **banda musical** ambiental, todo compuesto de manera determinista con [HyperFrames](https://hyperframes.heygen.com). Es ideal para crear demos de productos, recorridos guiados, videos de lanzamiento o presentaciones para hackathons, mostrando la aplicación real ejecutándose con narración y subtítulos. El flujo de trabajo consta de seis etapas independientes: grabación con Playwright (cursor visible), narración con Kokoro TTS, transcripción con Whisper, agrupación de subtítulos, generación de banda musical y composición final en MP4. Soporta entornos locales y URLs desplegadas, con reglas importantes como grabar a escala 1:1 y nunca escalar a 4K para evitar que la interfaz se vea borrosa. Las referencias detalladas cubren la grabación, narración, subtítulos, composición y solución de problemas.

Compatible con~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/Fldicoahkiin/dotfiles/tree/HEAD/private_dot_claude/skills/demo-video-skill
Ver original→Ver todas las habilidades

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentación

Estudio de Video Demo

Convierte una aplicación web en funcionamiento en una película demo pulida: interacción real grabada (ni presentación de diapositivas, ni simulación) + narración TTS local + subtítulos sincronizados por palabra + una banda musical ambiental, compuesta de manera determinista con HyperFrames.

Cuándo usarlo

Al crear cualquier video de demostración / recorrido / producto / lanzamiento / hackathon de una aplicación web, especialmente cuando se deba mostrar el producto real en ejecución con narración y subtítulos. Graba una URL desplegada o un servidor de desarrollo local.

Pipeline

① grabación    Playwright maneja tu aplicación en vivo, cursor visible → out/clips/*.webm
② narración    escribe VO por escena → Kokoro TTS (local)              → narración/*.wav
③ transcripción Whisper marcas de tiempo por palabra                    → *.transcript.json
④ subtítulos   agrupar en frases + corregir nombres de marca           → captions.js
⑤ música       ffmpeg fondo ambiental (mezclado bajo la voz)           → music/bed.wav
⑥ composición  HTML de HyperFrames en una sola línea de tiempo: clips+voz+subtítulos+música → MP4

La grabación y la composición son independientes: puedes regrabar una escena o volver a ejecutar la narración sin rehacer la otra. Una pista GIF generada por código (escenas HTML renderizadas directamente a MP4, sin grabación) es una ruta alternativa opcional para páginas de documentación.

Flujo de trabajo

  1. Entiende el producto primero. Lee su README / documentación de demostración. Escribe un Flujo de Demo antes de tocar las herramientas: problema → recorrido del producto → evidencia → conclusión. Elige la ruta de clic recomendada y el resultado visible que debe alcanzar cada escena. Consulta references/templates.md.
  2. Graba. Copia scripts/record.mjs, establece APP y SIZE, reemplaza scenes con tu coreografía (deslizar → pausa → actuar → mantener). Graba a escala de dispositivo 1:1. node scripts/record.mjs [scene]. Motor + ejemplo práctico: references/recording.md.
  3. Narrar → subtitular. Escribe un archivo assets/narration/NN-*.txt por escena en voz de narrador (le estás hablando a un espectador, no leyendo un README). Luego: bash scripts/tts.sh && bash scripts/transcribe.sh && node scripts/build-captions.mjs. Edita PHRASE_FIX en build-captions.mjs para tus nombres de marca. Guía: references/narration-and-captions.md.
  4. Componer y renderizar. Comienza desde references/composition-skeleton.html (un clip + pista de subtítulos + audio), expande la línea de tiempo, luego npx hyperframes render . --resolution landscape --fps 30 --crf 17 --quality high. Renderiza 1:1 (1080p creado → 1080p de salida) — nunca escales a 4K, ya que suaviza la interfaz. references/composition.md.
  5. Control de calidad antes de enviar. ffprobe la duración/audio, toma una muestra de 1–2 fotogramas (que no sean negros ni vacíos), subtítulos dentro del marco, narración sin cortes, la página de resultados clave realmente visible. Corrige el flujo/temporización, luego vuelve a renderizar.

Inicio rápido

# dependencias del sistema
brew install node ffmpeg
npx playwright install chromium

# Entorno Python para TTS local + transcripción (una vez)
python3 -m venv .ttsvenv && .ttsvenv/bin/pip install kokoro-onnx soundfile
export PATH="$(pwd)/.ttsvenv/bin:$PATH"

# 1) grabar  2) narrar  3) subtitular  4) componer+renderizar
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 primera ejecución de TTS descarga ~340 MB (Kokoro), la primera transcripción ~466 MB (Whisper small.en); ambos se almacenan en caché en ~/.cache/hyperframes/.

Reglas difíciles de aprender

  • La interacción real supera a las diapositivas — graba el producto realmente en ejecución.
  • 1:1, nunca escalado 2× — grabar a 2× DPR y renderizar a 4K suaviza cada clip de la interfaz. Crea y renderiza a 1080p.
  • Composición determinista — sin Date.now(), Math.random() ni red en el HTML; HyperFrames busca fotogramas, por lo que el movimiento debe ser reproducible.
  • Cursor visible + mantener los resultados — desliza deliberadamente, pausa en el momento clave.
  • VO, no documentación — la narración sigue la imagen; no es el README leído en voz alta.
  • El video es ≥ la narración — añade tiempo al clip para que lo visual nunca termine antes que la voz.

Dependencias

Node 22+, FFmpeg, Playwright (Chromium) y la CLI de HyperFrames (npx hyperframes, instala sus habilidades con npx skills add heygen-com/hyperframes). TTS/Whisper local necesitan Python + kokoro-onnx. Consulta references/composition.md para la configuración de HyperFrames.

Referencias

Skills relacionados

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