JoaoRobert0/saas-explainer

Video explicativo SaaS

Estás dirigiendo y construyendo un video explicativo de producto: un video corto de gráficos animados que muestra lo que hace un software, utilizando recreaciones de sus pantallas reales. Trabaja en este orden y no omitas los puntos de aprobación (marcados con ⛔).

Habla con el usuario en su idioma. Escribe el texto en pantalla en el idioma de la audiencia del video.

0. Configuración (una vez por máquina, luego una vez por video)

1. Verifica que los skills de Remotion estén instalados: ls ~/.claude/skills | grep -c remotion (espera 10+). Si faltan, instálalos:

   npx skills add remotion-dev/skills -g -a claude-code -y
   

   Si tu sandbox lo bloquea, pide al usuario que los ejecute escribiendo ! npx skills add remotion-dev/skills -g -a claude-code -y en el prompt. Verifica Node 18+ y ffmpeg (node -v, ffmpeg -version).
2. Carga el skill remotion-best-practices antes de escribir cualquier código de Remotion; síguelo (y los skills remotion-create, remotion-markup, remotion-interactivity, remotion-render a los que redirige).

1. Descubrimiento ⛔

Primero pregunta qué repositorio (o repositorios) contiene el producto — una ruta local o una URL de Git — incluso si la carpeta actual parece ser una; confirma lo que leerás antes de leerlo. Luego haz el resto de las preguntas en references/questions.md, en rondas de máximo 3–4, saltándote cualquier cosa que puedas averiguar por ti mismo. Estudia el producto desde ese repositorio (páginas/pantallas, componentes, estilos, etiquetas), o desde su sitio web/capturas de pantalla si no hay repositorio. Recopila los colores de la marca, la tipografía y el logotipo.

2. Guión ⛔

Sigue references/script-format.md: verifica cada afirmación de funcionalidad contra el producto, luego presenta el guión como una tabla (escena, texto en pantalla, qué sucede, duración) más las decisiones y correcciones debajo de ella. Espera un "sí" explícito antes de construir. Revisa la tabla, no el código.

3. Andamiaje

Crea el proyecto fuera del repositorio del producto (nunca dentro de él, nunca añadido a él; una carpeta hermana), con el nombre del producto, por ejemplo <product>-explainer:

npx create-video@latest --yes --blank --no-tailwind <product>-explainer
cd <product>-explainer && npm i
npx remotion add @remotion/google-fonts @remotion/transitions @remotion/media

Copia los archivos de inicio de este skill dentro de él. SKILL_DIR es el directorio base de este skill (se muestra cuando se carga el skill; normalmente ~/.claude/skills/saas-explainer):

cp -r "$SKILL_DIR/template/src/." src/
mkdir -p scripts && cp "$SKILL_DIR/scripts/"* scripts/
node scripts/make-audio.mjs --sfx-only

Luego:

• establece los tokens de marca en src/theme.ts desde el producto (no los marcadores de posición);
• coloca el logotipo (SVG preferido) en public/ y úsalo mediante <Wordmark logoSrc>;
• crea src/data.ts con un cliente/proyecto ficticio y números que se mantengan coherentes entre escenas;
• inicia Remotion Studio en segundo plano (npx remotion studio) y dale al usuario la URL para que pueda ver cómo se construye.

4. Construcción ⛔ (primero prueba de concepto)

Sigue references/craft.md. Usa template/src/scenes/ExampleScene.tsx como patrón para cada escena.

1. Construye una escena de funcionalidad primero, renderiza fotogramas clave, revísalos, renderízalos en MP4 y muéstraselos al usuario. Ajusta el estilo con él antes de continuar.
2. Construye las escenas restantes una por una. Después de cada una: verifica tipos (npx tsc --noEmit), renderiza fotogramas en los momentos clave, míralos, corrige superposiciones, contraste y posiciones del cursor.
3. Encadénalas en una composición Explainer principal con TransitionSeries; registra cada escena también como su propia composición.

5. Sonido y renderizado

Sigue references/audio-and-delivery.md: genera la música para la línea de tiempo final, coloca los efectos, renderiza con bash scripts/finalize.sh, verifica el volumen y los picos con números. No puedes escuchar: di lo que mediste y deja que el usuario juzgue.

6. Variantes y entrega

• Corte vertical (si se solicita): mismas escenas, diseños adaptativos a la orientación, una composición ExplainerShort de 1080×1920 con solo las escenas más potentes, su propio archivo de música, bash scripts/finalize.sh ExplainerShort short.
• Entrega web: MP4 con faststart + JPG de póster. El alojamiento en una CDN o cualquier cambio en la infraestructura compartida necesita la confirmación del usuario primero.

Informe de progreso

Después de cada hito, dile al usuario: dónde está el archivo, qué hace cada escena (resumidamente), qué verificaste, qué es ficticio y las decisiones que pueda querer cambiar. Mantenlo breve.

Reglas

• Nunca pongas datos reales de clientes (nombres, correos electrónicos, cantidades) en pantalla — ni siquiera de una base de datos de pruebas. Todo lo mostrado es inventado y coherente.
• Nunca afirmes una funcionalidad que el producto no tenga; verifica el código.
• Nunca uses música o sonidos con derechos de autor que no hayas generado a menos que el usuario los proporcione con una licencia.
• Nunca publiques, subas ni despliegues nada sin preguntar.
• Remotion es gratuito para particulares y empresas de hasta 3 personas; las empresas más grandes necesitan una licencia (remotion.pro). Mencíonalo una vez.