demo-video-master

¿Qué hace demo-video-master?

Convierte una característica + URL en un video demo cinematográfico de producto con un solo comando.

Combina cuatro herramientas en un único pipeline automatizado:

Etapa	Herramienta	Qué hace
Captura	agent-browser	Capturas de pantalla + grabación de desplazamiento de la URL en vivo
Diseño	video-shotcraft	5–7 tomas cinematográficas, claves PageCam, subtítulos, efectos de sonido
Renderizado	Remotion	React → mp4
Voz	ElevenLabs	Narración VO por escena
Fusión	ffmpeg	VO + video → final.mp4

---

Disparador

Cualquiera de estos activa este skill:

demo-video: <descripción de la característica> <url>

haz un video demo para <url> — <descripción de la característica>

---

Pipeline completo (léelo antes de comenzar)

Consulta pipeline.md para las instrucciones detalladas paso a paso para el agente.

Resumen rápido:

1. Captura — ejecuta scripts/capture.mjs <url> <slug> → los PNGs se guardan en public/textures/<slug>/
2. Diseño — invoca video-shotcraft en modo autónomo con las capturas; genera shotlist.json + archivos TSX de escena
3. En paralelo:
   • 3a VO — ejecuta scripts/elevenlabs-vo.mjs <slug> en segundo plano
   • 3b Renderizado — npx remotion render src/Root.tsx <CompositionId> out/<slug>.mp4
4. Fusión — scripts/merge.sh <slug> — ffmpeg sincroniza la VO con el video renderizado
5. Commit + vista previa — haz commit a examples/<slug>/, abre QuickLook

---

Configuración (una sola vez)

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

# 2. Instala agent-browser (vercel-labs/agent-browser)
npm install -g agent-browser
agent-browser install          # descarga Chrome una vez

# 3. Instala skills prerrequisitos
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. Instala ffmpeg
brew install ffmpeg             # macOS; o apt install ffmpeg en Linux

# 5. Copia la plantilla de variables de entorno a tu proyecto de video
cp ~/.claude/skills/demo-video-master/.env.example _video/.env.local
# Completa ELEVENLABS_API_KEY y ELEVEN_VOICE_ID

---

Reglas (aplicar siempre)

• Solo capturas de pantalla — usa capturas reales de la página mediante agent-browser; nunca sintetices la interfaz de usuario
• Enmascaramiento de PII — reemplaza los datos reales del usuario antes de que cualquier captura entre en el renderizado
• Renderizado determinista — sin Math.random() / Date.now() en las escenas de Remotion; semilla toda aleatoriedad a partir del índice
• VO y renderizado en paralelo — ejecuta siempre ElevenLabs y Remotion de forma concurrente para ahorrar tiempo
• Solo infografías externas — los elementos animados se colocan sobre las capturas de pantalla; sin elevaciones de tarjeta translateZ, sin anillos de borde dibujados sobre las capturas

---

Variables de Entorno

ELEVENLABS_API_KEY=tu_clave_aqui
ELEVEN_VOICE_ID=tu_id_de_voz_aqui   # predeterminado: Adam (pNInz6obpgDQGcFmaJgB)

---

Nota: Los enlaces a los repositorios y los nombres de las herramientas (agent-browser, video-shotcraft, Remotion, ElevenLabs, ffmpeg) se dejan intencionadamente sin traducir para mantener la precisión técnica.