FireAmun/remotion-dev-video-kit

Video diario: idea → investigación → aprobación → construcción → vista previa → renderizado → Buffer

Lee .claude/CLAUDE.md primero; es la fuente de verdad (marca, reglas de video, voz, zonas seguras). Este skill es la ejecución paso a paso. Hay dos paradas obligatorias para la aprobación del creador: la propuesta (paso 2) y la vista previa (paso 5). Nunca las omitas.

Las rutas a continuación usan <date> = hoy, YYYY-MM-DD (Asia/Riyadh). Carpeta del episodio: public/episodes/<date>/.

Aspecto y estilo: idénticos cada episodio

Cada episodio debe verse como tu primer episodio: la serie se reconoce por su apariencia. Por lo tanto:

• Solo los mismos bloques de construcción. Usa los sets existentes, el personaje articulado, las poses, los movimientos, los accesorios y los elementos. No cambies src/theme.ts, las fuentes, los colores, el arte del personaje, la barra de capítulos, el estilo de los subtítulos ni los efectos de sonido en una ejecución diaria. Los elementos visuales nuevos (un set, pose, accesorio o elemento) son una tarea separada que el creador solicita; cuando lo haga, constrúyelos en el mismo estilo dorado y negro y añádelos a las listas de este skill.
• Misma estructura. 1080×1920, 30 fps, ≤ 60 s. Etiqueta "EP NN" + barra de 7 capítulos en la parte superior, subtítulos palabra por palabra en la parte inferior (palabra hablada en brillante, próxima palabra atenuada, una palabra clave dorada por línea). Una oración = una escena; el personaje actúa cada oración; los accesorios/elementos aparecen en la palabra hablada; un cambio visual cada 1.5-3 s; silbido en cada cambio de escena.
• Mismos ritmos. Gancho en los primeros 2 s → aviso temprano de "Seguir" (escena del botón de seguir) → capítulos de contenido → la tarjeta final con yoursite.com y la línea de cierre exacta → avance "Mañana: <próximo tema>".
• Misma voz. Qwen3-TTS con assets/voice/reference_energy.wav, misma semilla, puntuación enérgica.
• Misma publicación. 7:00 PM Riad, Instagram Reel (compartir en el feed) + TikTok + LinkedIn, etiqueta generada por IA ACTIVADA para Instagram y TikTok (la voz es un clon de IA; etiquetar es honesto y protege la cuenta).
• Los números de episodio cuentan desde topics-log.json (siguiente = último + 1).

1. Investigación

1. Lee topics-log.json: no repitas un tema; si el último episodio prometió un tema "siguiente", prefiero ese.
2. Búsqueda web: de 2 a 4 fuentes confiables (documentación oficial, archivos README de GitHub, artículos, la página del proveedor). Verifica cada número, precio, versión o afirmación. Las cosas que cambian rápido llevan "a partir de ". Nunca inventes hechos, puntos de referencia ni código.
3. Posicionamiento: un desarrollador real dando un consejo útil, no exageración ni "mira lo que hizo la IA". Enmarca los temas de herramientas como un consejo de desarrollador.

2. Propuesta - PARADA para aprobación

Muestra al creador, en el chat, de forma breve:

• Gancho (primeros 2 s): una apuesta, número o afirmación concreta. Sin saludos.
• Tabla de escenas, una fila por oración (5-8 capítulos, ~12-16 escenas, 30-60 s en total, ~2.5-3.5 palabras habladas/s): # | capítulo | oración | set | qué hace el personaje | elementos que aparecen en qué palabra Capítulos: GANCHO, QUÉ, POR QUÉ IMPORTA, CÓMO, TRUCO, PROBARLO, PRÓXIMO. Aviso de seguir temprano justo después del gancho. La última oración es siempre exactamente: "Visita mi sitio web yoursite.com y presiona el botón de seguir para más."
• Hechos + fuentes (URLs), y cualquier cosa que el creador deba confirmar (opiniones dichas en su voz, nombres de herramientas).
• Subtítulos para Instagram/TikTok (línea del gancho, línea de apuesta, CTA, hashtags) y un subtítulo separado, más profesional, para LinkedIn (3 hashtags).

Espera "adelante"/aprobación o ediciones. Aplica las ediciones y vuelve a mostrar si son sustanciales.

3. Voz (trabajo en GPU; nada más en la GPU mientras tanto)

Escribe public/episodes/<date>/narration.txt: un párrafo por segmento TTS (línea en blanco entre), generalmente 1-3 oraciones por párrafo. Escríbelo como se habla: tu sitio deletreado como se habla (p. ej. "mi sitio punto com"), N P X crear video, Qwen tres T-T-S, pip instalar Qwen T-T-S, números como palabras si es ambiguo. ¡Usa ! en las líneas del gancho (el modelo lee la puntuación como energía)!

.venv-qwen\Scripts\python scripts\tts_qwen.py public\episodes\<date>\narration.txt
.venv-qwen\Scripts\python scripts\timestamps.py public\episodes\<date>\narration.wav --hint "<5-10 términos técnicos>"

• Voz = Qwen3-TTS 1.7B zero-shot, referencia assets/voice/reference_energy.wav (+ .txt transcripción). Nunca uses un servicio de voz pago.
• Nunca pases todo el guion a Whisper como aviso (se bucla); --hint con solo unos términos.
• Verifica la duración de la narración (debe ser ≤ 60 s con la cola de 1.5 s) y revisa rápidamente narration.json en busca de errores de audición.
• tts_qwen.py nivela la voz automáticamente (scripts/audio_level.py: compresor → -16 LUFS → -1 dBFS pico). Los efectos de sonido en src/components/Sfx.tsx están ajustados a ese nivel (~12 dB por debajo de la voz); no los subas. Si una narración se hizo de otra manera, ejecuta scripts/audio_level.py primero.

4. Construir el episodio (solo datos - sin nuevo código de componentes en una ejecución diaria)

Escribe public/episodes/<date>/plan.json, luego:

.venv-qwen\Scripts\python scripts\build_episode.py public\episodes\<date>
npm run lint

Forma de plan.json (ver public/episodes/example/plan.json para un ejemplo completo):

{
  "episode": 2, "date": "<date>", "title": "...", "keywords": ["palabra,", "..."], "tailMs": 1500,
  "sources": [{ "title": "...", "url": "https://..." }],
  "scenes": [{
    "chapter": "GANCHO",
    "display": "Oración exactamente como deben mostrarse los subtítulos (formas escritas: yoursite.com, npx create-video).",
    "set": "stage", "setVariant": "", "zoom": 1.05,
    "actor": { "x": 540, "scale": 0.9, "facing": "right", "enterFrom": "right",
               "beats": [{ "atMs": 0, "pose": "talk" }, { "atWord": "build", "pose": "pointUp", "motion": "talk" }] },
    "items": [{ "kind": "label", "text": "...", "atWord": "cámara!", "untilWord": "...", "x": 540, "y": 420 }]
  }]
}

• El display de todas las escenas concatenadas debe ser igual a la narración hablada palabra por palabra (las formas escritas pueden diferir, p. ej., "Qwen3-TTS" para "Qwen tres T-T-S"). Una escena que comienza un párrafo de narración se temporiza exactamente desde el TTS; las otras comienzan en su primera palabra hablada.
• Claves de temporización: atWord / crossAtWord / untilWord (coincidencia ignorando mayúsculas y puntuación), occurrence para palabras repetidas, offsetMs para ajustar, o atMs simple.
• Poses (src/rig/poses.ts): idle, talk, explain, shrug, wave, point, pointUp, pointViewer, celebrate, think, search, laptop, holdUp, thumbsUp, headScratch. Movimientos: talk (los gestos siguen la voz), wave, shake, celebrate, search, type, still. Accesorios de mano: magnifier, phone, trophy; "laptop": true para la laptop sostenida. facing: "left" lo refleja (señalar a la izquierda).
• Sets (src/sets/Sets.tsx): stage, coderoom, desk (el escritorio oculta las piernas; monitor a la derecha), sky (setVariant "sunrise" o "timelapse"), chalkboard (pizarra a la izquierda), library, blueprint (dibujo técnico dorado sobre fondo azul marino - úsalo para CÓMO / escenas "cómo funciona"), plain. Cada escena tiene polvo dorado flotante ("particles": false lo desactiva).
• Elementos (src/scene/Items.tsx): icon (camera/timeline, crossAtWord), label (dorado/claro), code (chip volador, fromX/fromY), window (terminal o "style": "chalk", líneas con tipo command/code/output), counter, stamp, steps, waveform, calendar (desde→hasta), banner, confetti, book, follow, end (url + cta, marco art-decó), kinetic (grandes palabras aparecen una por una con fuerza; highlight palabras en dorado; size, stagger cuadros - mejor para la línea del gancho), splitflap (panel de aeropuerto, máx. 10 caracteres, label opcional - mejor para números del gancho).
• Las tarjetas son de vidrio esmerilado (glassmorphism) automáticamente. Vista previa del kit de estilo: la composición StyleTest.
• Llena los elementos con contenido real (código real, salida de terminal real, números reales), nunca relleno.

Reglas de diseño aprendidas a la fuerza (1080×1920):

• La barra superior (etiqueta EP + capítulos) termina ~y 215: las partes superiores de los elementos deben permanecer debajo de ~230 (recuerda que el zoom de la escena empuja los elementos hacia arriba).
• Suelo y 1440; subtítulos en y 1490; mantén 60 px de márgenes laterales.
• Escala del actor 0.9 → parte superior de la cabeza ≈ y 570; 0.8 → ≈ 670; 0.7 → ≈ 760. Los elementos grandes (window, waveform, end card) necesitan actor 0.58-0.8 o el actor al lado (x≈790, mirando a la izquierda).
• Las etiquetas tienen ~38 px por carácter en el tamaño predeterminado: mantenlas cortas o se saldrán de la pantalla.
• Nunca cubras su rostro con un elemento; coloca las etiquetas al lado o debajo de las ventanas.

5. Vista previa - PARADA para aprobación

1. Studio: npx remotion studio → http://localhost:3000/Episode (puede que ya esté ejecutándose).
2. Renderiza una imagen fija por escena (escala 0.4) y revísalas tú mismo primero: superposiciones, texto fuera de pantalla, rostro cubierto, temporización de elementos. Corrige, reconstruye, vuelve a revisar.
3. Muestra al creador el enlace del Studio (y menciona cualquier cosa que no hayas podido verificar, p. ej., pronunciación). Espera la aprobación o comentarios con captura de pantalla: corrige exactamente lo que señale.

6. Renderizado

npx remotion render Episode out/<date>/video.mp4 --codec=h264 --crf=18

(Establece la propiedad predeterminada episodeFile de la composición Episode en src/Root.tsx a la nueva carpeta, o pasa --props='{"episodeFile":"episodes/<date>/episode.json","episode":null}'.) Verifica: ≤ 60 s, 1080×1920, 30 fps, tiene audio, y la voz es claramente más fuerte que cualquier efecto de sonido (voz ≈ -16 LUFS). Escribe out/<date>/caption.txt (IG/TikTok) y out/<date>/caption-linkedin.txt.

7. Borradores en Buffer (el creador adjunta el video)

La API de Buffer solo acepta videos desde una URL pública, así que crea borradores ya temporizados para las 19:00 Asia/Riyadh; el creador abre cada borrador en Buffer, adjunta out/<date>/video.mp4 y presiona Programar.

• Organización <tu id de organización de Buffer> (obténlo con el MCP de Buffer get_account; el plan gratuito permite 10 publicaciones programadas).
• Canales: Instagram <id>, TikTok <id>, LinkedIn <id> (obténlos con list_channels).
• create_post con mode: "customScheduled", dueAt: "<date>T19:00:00+03:00", saveToDraft: true, schedulingType: "automatic".
  • Instagram: metadata.instagram = { type: "reel", shouldShareToFeed: true, isAiGenerated: true }.
  • TikTok: metadata.tiktok = { title: "<gancho corto>", isAiGenerated: true } (la voz es un clon de IA, siempre divúlgalo).
  • LinkedIn: subtítulo profesional, no se necesita metadata.
• Si ya pasaron las 19:00, pregunta al creador la hora en lugar de adivinar. Nunca publiques ni programes nada sin su aprobación.

8. Cierre

• Agrega el episodio a topics-log.json (fecha, episodio, título, temas, la promesa del "próximo", fuentes).
• Informa al creador: ruta del video, los tres borradores de Buffer y que debe adjuntar el video, y el tema prometido para el próximo episodio.