VisroliyaHimanshu/jsxreel

¿Qué hace jsxreel?

Resumen

Un vídeo aquí son escenas React animadas en Remotion, con voz de ElevenLabs, y cada compás sincronizado con la palabra hablada. La interfaz de la aplicación y del proveedor se reconstruye siempre, nunca se muestra como capturas de pantalla, grabaciones de pantalla o una presentación del storyboard. Una imagen suministrada que sea el contenido en sí (una firma, un logotipo, una foto de producto) puede aparecer como imagen. Cada producto mantiene su propio proyecto de vídeo y su propio aspecto; esta habilidad contiene el proceso y las herramientas en scripts/ en el directorio base de la habilidad (se muestra cuando la habilidad se carga).

Proyectos

Lee primero ~/.claude/jsxreel/projects.md si existe (la lista privada del usuario, guardada fuera de la habilidad para que las actualizaciones nunca la toquen: carpeta, notas a leer, comando de voz, convenciones). Luego lee las notas de ese proyecto. Un proyecto no listado: pregunta al usuario dónde está y luego agrega una fila allí.

Nuevo proyecto: un proyecto Remotion dentro del repositorio del producto, con scripts/tts.mjs y scripts/stills.mjs copiados desde esta habilidad (stills.mjs va en qa/). Nunca los elementos visuales de otro producto.

Flujo de trabajo

1. Tipo: guía de aplicación, anuncio de storyboard o sketch promocional. Lee su sección en kinds.md.
2. Pregunta con AskUserQuestion (Recomendado primero, máximo 4): formato, duración objetivo, final, y solo aquello que el material y las notas del proyecto no puedan responder.
3. Revisa el material antes de escribir: copia del storyboard (afirmaciones técnicas incorrectas, guiones, texto demasiado largo para locución); cada instrucción en pantalla (rutas de menú, etiquetas) contra la documentación actual del proveedor o el código de la app; datos personales en los activos suministrados. Usa lo que el usuario proporcionó, márcalo, pregunta. Nunca lo reemplaces en silencio. Los secretos (un código QR activo, un token, una contraseña) nunca aparecen en pantalla; dibuja un marcador de posición.
4. Guion scripts/<video>.json: una línea por escena, marks para cada compás (frase exacta, sensible a mayúsculas, única en su línea), say para formas habladas (números, URLs). Presupuesto de aproximadamente 2.6 palabras/s más 0.5 s por escena. Muestra todo el guion como tabla; gasta créditos solo después de la aprobación.
5. Voz: una toma por voz, cortada por alineación (node scripts/tts.mjs <video> para un narrador). Transcribe los clips (speech to text de ElevenLabs, POST /v1/speech-to-text, modelo scribe_v1, o la herramienta del propio proyecto) para confirmar que cada uno contiene sus propias palabras; cuesta unos pocos céntimos por toma. Luego ajusta: python3 -I <directorio habilidad>/scripts/tighten.py "$PWD" <video> <prefijo> (original se guarda en .voice-orig/, consulta --help). Los sketches mantienen sus pausas cómicas en su lugar. En una sesión en la nube, la clave de ElevenLabs proviene de un secreto de red (ELEVENLABS_API_KEY=proxy, consulta la sección del navegador en el README); nunca le pidas al usuario que pegue una clave en el chat.
6. Construcción: data.ts, timeline.ts, escenas, CSS en su propio archivo con un nuevo prefijo de clase. Duración de la escena = max(MIN, LEAD + clip + TAIL), LEAD aproximadamente 0.15, TAIL aproximadamente 0.2; MIN cubre el último evento de la escena + 0.6 s; una demostración de clic obtiene un LEAD más largo para que la interfaz sea visible antes del primer clic. Registra en Root.tsx, agrega scripts voice:/render:, y anota el vídeo en las notas del proyecto (README o plan).
7. QA (a continuación), luego informe: ruta absoluta del mp4, duración respecto al objetivo, suposiciones a confirmar (datos de muestra, etiquetas de interfaz reconstruidas, cualquier línea aprobada que hayas cambiado, antiguo y nuevo lado a lado), qué verificar al oído. Confirma solo cuando se te pida.

QA

• npx tsc --noEmit; node qa/stills.mjs <Comp> <fotogramas…> (vuelve a ejecutar si la primera llamada después de una edición falla).
• Cada toque o clic en su fotograma de presión, apilados en una sola hoja de contacto: el dedo o el cursor se sitúa sobre el objetivo.
• De 4 a 5 fotogramas a través de cada transición.
• Duración con ffprobe; sonoridad por proyecto (guías: media aproximadamente -21 dB; redes sociales: aproximadamente -14 LUFS, pico de máximo -0.8 dB); silencedetect para pausas de más de aproximadamente 1.3 s que no sean compases cómicos deliberados.
• Si cambiaste un archivo compartido: renderiza un fotograma de un vídeo más antiguo, PSNR debe ser inf.
• Elimina los PNG del QA.

Errores comunes

Error	Solución
Ritmo natural de ElevenLabs	Los usuarios lo encuentran lento. Ajusta antes del primer renderizado.
Grabar antes de verificar etiquetas de interfaz	Revisa la documentación del proveedor o el código de la app primero; una regrabación cuesta créditos.
Una solicitud TTS por línea	La voz cambia entre líneas. Una toma por voz.
Tiempos de compás codificados	Marcas; una nueva toma reajusta todo.
Confiar en la alineación a ciegas	El diálogo de eleven_v3 se desvió aproximadamente 0.75 s. Transcribe los clips.
Aspecto de otro proyecto	Cada producto tiene su propio kit; un storyboard mantiene su propio aspecto.
El style del llamante se extiende sobre un contenedor que establece transform	El transform del llamante gana y la escala se pierde. Pon el estilo del llamante en un div exterior.
zsh: $LIST no divide palabras, ==== es un error	Listas en línea; construye filtros ffmpeg en Python.
Puerto 3000 ocupado	Un --port libre.
Sin Chrome en la máquina	Cualquier navegador Chromium funciona (Chromium, Edge, Brave mediante --browser-executable); si no hay ninguno, omite la bandera y Remotion descarga su propio headless Chrome. stills.mjs elige uno automáticamente. Firefox y Safari no pueden renderizar.
URLs escritas a mano en el informe	Solo rutas locales.