Motion explainer
Una plantilla completa de proyecto de vídeo más el runbook que produjo Fridges Hacked: What Doctors Must Learn About AI Security (11:05, 49 escenas, octubre 2026). Todo lo necesario está dentro de este skill: la plantilla (template/), sus scripts (incluyendo copias de los scripts Sarvam TTS y de masterización), y el ejemplo resuelto (examples/fridge-hack/). Nada apunta a la carpeta del proyecto original.
Cuándo usar cada skill
| Vídeo | Skill |
|---|---|
| Noticias, incidentes, casos de estudio, "lecciones de X": tipografía, mapas, páginas de periódico, medidores | este skill |
| Dibujos, una pluma y mano, anatomía o diagramas trazo a trazo | remotion-whiteboard (sin cambios; requerido para cualquier cosa dibujada) |
| Orden de trabajo, afirmaciones, guión, voz, puertas (cualquier vídeo) | youtube-video-production (su modo motion apunta aquí) |
| Miniaturas, carruseles, copia para LinkedIn/Instagram/WhatsApp, subida a YouTube | video-promo-kit |
Inicio rápido
node ~/.claude/skills/remotion-motion-explainer/scripts/install.mjs ~/Projects/remotion-projects/<nombre>
cd ~/Projects/remotion-projects/<nombre> && npm run dev
La plantilla se abre con la historia del hackeo de la nevera para que el aspecto sea visible de inmediato. Reemplaza src/data/scenes.json con la nueva historia.
El orden de trabajo (las puertas en negrita)
- Primero los hechos. Escribe una hoja de datos con fuentes antes de cualquier narración. Cada número en pantalla necesita un
sourceCitation. - Historia →
scenes.json. Narración por escena, componente + props, citas.npm run estimate && npm run narration; lint connpm run tts:lint. - Previsualización silenciosa con subtítulos temporales. Subtítulos de oraciones, duraciones estimadas. El propietario aprueba la historia aquí; nada de TTS antes de esto.
- QA de imágenes fijas:
npm run stills, hoja de contacto, corrige solapamientos (referencias/05). - Voz:
npm run tts→npm run tts:check(Whisper, cada toma) → regrabar o reformular →npm run tts:master→npm run captions. Las longitudes de escena ahora provienen del audio. - Señales de palabra: añade
{"atWord": "…"}a las props cuyos eventos deben aterrizar en una palabra. - Sonido: los efectos se disparan desde los componentes; verifica la mezcla completa con un renderizado solo de audio (objetivo −14 LUFS, ≤ −1 dBTP).
- Renderiza solo cuando el propietario lo diga (referencias/05).
- Capítulos (
npm run chapters), luego entrega avideo-promo-kit.
Dónde vive el detalle
| Archivo | Léelo en |
|---|---|
references/01-look-and-story.md | paso 1–2: el lenguaje visual, arco narrativo, motivos, reglas de escritura |
references/02-scene-graph.md | paso 2: cada campo de scenes.json, señales de palabra, transiciones |
references/03-components.md | paso 2–4: catálogo de componentes, props, reglas de diseño, cómo añadir uno |
references/04-voice-and-sound.md | paso 5–7: Sarvam, verificación Whisper, masterización, subtítulos, efectos, música, niveles |
references/05-qa-render.md | paso 4, 8, 9: imágenes fijas, hojas de contacto, renderizado, verificación, capítulos |
references/06-lessons.md | cuando algo se ve mal: cada error cometido y su regla |
examples/fridge-hack/ | el ejemplo resuelto: scenes.json, guion de narración, estado, lecciones, imágenes fijas del aspecto |
No negociables
- Sin logotipos ni marcas reales; nombres de medios y empresas como texto plano; titulares parafraseados; imágenes inventadas etiquetadas como "ilustrativo".
- Sin pasos de explotación, código ni instrucciones para ataques en vídeos de seguridad.
- Nunca especules sobre la atribución; di "no atribuido públicamente a fecha de ".
- El propietario aprueba el guion, la miniatura y el renderizado. Pregunta si tienes dudas.