rendydev404/demotion

demotion — demo automático del sistema desde la interfaz real de la aplicación

Resultado final: un .mp4 (1920x1080, 60 fps, 1-2 minutos) que parece una grabación de pantalla profesional de la aplicación REAL, pero completamente generado desde código Remotion, por lo que es suave (sin tirones de grabación real), repetible y fácil de actualizar cuando cambian las funcionalidades.

Idioma de trabajo: Español (respuestas, resúmenes, subtítulos del vídeo). No abras Chrome ni inicies sesión en la aplicación local para "ver" la interfaz: la fuente de la verdad visual es el CÓDIGO; el resultado se revisa mediante imágenes fijas o vídeos de Remotion.

Principios inquebrantables

1. UI real, no una imitación. Copia el marcado + las cadenas de clase Tailwind + los tokens de color + la fuente del código de la aplicación. El texto de la UI (títulos, etiquetas, sugerencias, mensajes) se copia exactamente. No redibujes "algo parecido".
2. La verdad del producto proviene del CÓDIGO. Cada afirmación en los subtítulos (precio, cuota, valores por defecto, límites, quién paga qué) se lee del código/configuración, no de la memoria o suposiciones. Ejemplo real: "¿La prueba del bot consume cuota?" → verifica la ruta de la API y la función de registro de uso antes de escribir el subtítulo. Lo que no esté en el código, no lo afirmes.
3. Todo movimiento se calcula a partir del tiempo del vídeo. Sin animaciones/transiciones CSS, sin setTimeout, sin estado/caché entre fotogramas: cada fotograma = función pura de t. (El renderizado paralelo divide los fotogramas en muchas pestañas.)
4. Datos demo ficticios, consistentes y seguros. Un negocio/personaje ficticio, números/emails/cuentas placeholder, mismos valores en todas las escenas. No uses datos reales de clientes. Las estadísticas "después de varios días" llevan el subtítulo "datos de ejemplo".
5. Duración 1-2 minutos a menos que se solicite otra cosa: recorta las esperas y acelera la escritura/carga (3-8x) con una insignia "4x"; las partes que deben leerse se dejan a 1-2x. Los subtítulos deben ser legibles al menos 1,2 segundos después de la aceleración.
6. Verificación visual: renderiza imágenes fijas en momentos clave y MIRA (Lee la imagen) antes del renderizado final.

Flujo de trabajo

Fase 0 — Detección y objetivo

• Busca demos ya existentes: **/src/demo/kit/stage.tsx. Si existe → no hagas scaffolding de nuevo; entra en "Actualizar demo".
• Si no existe → se necesita un proyecto de vídeo. Ubicación por defecto: <repo>/video/ (carpeta separada; añádela a exclude del tsconfig raíz y a globalIgnores de ESLint si el repo usa Next/ESLint para que la compilación/CI de la aplicación no la revise).
• Pregunta UNA SOLA vez solo lo que no se pueda deducir: duración objetivo, si tiene audio/narración o no, partes obligatorias que deben aparecer. Valores por defecto: subtítulos en español, sin audio, ≤2 minutos, recorrido del usuario desde cero hasta la funcionalidad principal.

Fase 1 — Investigación del producto (lee el código, no adivines)

Para cada página/funcionalidad que vaya a aparecer, lee: ruta (app/**/page.tsx), componentes, texto de la UI, paquetes/precios/cuotas, reglas por defecto, límites, texto del tour/onboarding (esta es la mejor fuente de conocimiento del producto), flujo de pago, roles. Anota en referencias/storyboard.md con el formato: página → qué se muestra → subtítulo → afirmación verificada (archivo:línea). Si hay mucho código que leer, usa subagentes Explore cuando sea necesario; la decisión final sigue siendo tuya.

Fase 2 — Storyboard

Organiza 8-14 escenas siguiendo el recorrido del usuario (página de inicio → registro → comenzar/onboarding → configuración principal → momento "wow" → monitoreo → pagar/suscribirse → llamado a la acción). Cada escena: objetivo, duración real, pasos del cursor, subtítulo. Consulta referencias/storyboard.md (patrón de subtítulos, tempo, etiqueta de capítulo "N · NOMBRE").

Fase 3 — Scaffolding

node "$HOME/.claude/skills/demotion/skrip/scaffold.mjs" --dest <repo>/video --nombre "Producto" --dominio producto.com --acento "#3ddc97" --instalar

Copia el motor (src/demo/kit/*), el esqueleto Root, escenas de ejemplo, configuración de Tailwind v4. Luego:

• Copia los tokens de color + clases de componentes CSS de la aplicación a src/demo/index.css (elimina animaciones/transiciones).
• Reemplaza la fuente en src/demo/fonts.ts por la que usa la aplicación (@fontsource/<nombre>); carga todos los pesos utilizados.
• Completa BRAND en config.ts (nombre, dominio, color de acento en fondo oscuro).
• Prueba: REMOTION_FPS=30 npx remotion still src/demo/index.ts S-ejemplo out/prueba.png --frame=270 --config=remotion.demo.config.ts. Elimina scenes/ejemplo.tsx una vez que existan escenas reales.

Fase 4 — Portar la UI y escribir escenas

• Componentes del producto → src/demo/pages/*.tsx (copia el marcado/clases; reemplaza datos y manejadores con props estáticos). Los átomos genéricos están en kit/atoms.tsx; el teléfono WhatsApp en kit/phone.tsx.
• Una escena = un archivo scenes/<id>.tsx que exporta DUR (segundos reales) y un componente; regístralo en scenes/index.ts con crear("<id>", Comp, DUR_X). Patrón completo: templat/src/scenes/ejemplo.tsx y referencias/arquitectura.md (API Stage: cursor/scroll/cámara/spot, data-cur, tiempo de eventos junto con T).
• Barra lateral/modal/tour = capa fixed (no se desplaza), el contenido de la página = children.
• Escenas ≥6 e independientes → paralelízalas con fork (consulta referencias/brief-fork.md); el esqueleto compartido (datos, páginas usadas por varias escenas) se escribe PRIMERO por ti.

Fase 5 — Recortar y acelerar

Después de que todas las escenas estén correctas a 1x, completa scenes/recortar.ts (segmentos S(a,b,v) por escena). Verifica el total con npx remotion compositions src/demo/index.ts --config=remotion.demo.config.ts (columna de duración Demo).

Fase 6 — Verificación

1. npx tsc --noEmit -p tsconfig.json
2. Vista previa económica: REMOTION_FPS=30 npx remotion render src/demo/index.ts Demo out/preview.mp4 --config=remotion.demo.config.ts --crf=26 --scale=0.5 --concurrency=10 --gl=angle
3. Hoja de contactos: python "$HOME/.claude/skills/demotion/skrip/hoja-contactos.py" out/preview.mp4 --cada 5 y luego Lee las imágenes.
4. Verifica: texto cortado, subtítulos que tapan botones que se pulsan, cursor desviado, números inconsistentes, afirmaciones incorrectas, saltos de diseño, momentos vacíos/demasiado largos.

Fase 7 — Renderizado final y envío

powershell -File "$HOME/.claude/skills/demotion/skrip/limpiar-procesos.ps1"   # OBLIGATORIO si hay un renderizado anterior (añade -NoStudio si el usuario está usando Studio)

cd <repo>/video && REMOTION_FPS=60 npx remotion render src/demo/index.ts Demo out/demo.mp4 --config=remotion.demo.config.ts --codec=h264 --crf=17 --concurrency=10 --gl=angle

Ejecuta en segundo plano (run_in_background), sin timeout pequeño. Estimación: ±12-18 fotogramas/segundo (GPU), 2 minutos a 60 fps = 7.000 fotogramas ≈ 8 minutos. Al terminar → verifica con ffprobe (duración, 1920x1080, 60 fps) + un fotograma, luego node ".../skrip/compress.mjs" out/demo.mp4 out/demo-ligero.mp4 --crf 24 si es >30 MB y envía con SendUserFile (límite 30 MB; el archivo completo permanece en disco, informa al usuario).

Actualizar una demo existente

git diff/git log para ver las páginas/texto que han cambiado → actualiza solo la escena y los pages/* relacionados (vuelve a copiar el marcado del código), verifica nuevamente las afirmaciones de los subtítulos, ajusta recortar.ts, verifica la imagen fija de esa escena, vuelve a renderizar por completo.

Errores comunes que han ocurrido (lee referencias/errores.md antes de empezar)

React is not defined (JSX a nivel de módulo) · caché entre fotogramas hace que el cursor salte · procesos de renderizado huérfanos consumen CPU · blur/backdrop-filter hacen el renderizado 3x más lento · breakpoints de Tailwind usan el ancho de la ventana headless · sticky falla en contenido desplazado · renderizado paralelo + archivos a medio escribir rompen el bundle · ffmpeg de Remotion no tiene filtros fps/tile · afirmaciones incorrectas sobre funcionalidades son detectadas por el usuario.

Referencias dentro de esta skill

• referencias/arquitectura.md — API del motor (Stage, pasos de cursor/desplazamiento/cámara/destacado, mapa de tiempo, kit)
• referencias/errores.md — lista de errores comunes + soluciones
• referencias/storyboard.md — cómo organizar escenas, subtítulos, tempo, lista de investigación
• referencias/brief-fork.md — plantilla de brief para escribir escenas en paralelo con subagentes fork
• referencias/render.md — comandos de renderizado, velocidad, GPU, compresión, envío
• templat/ — código copiado por el scaffolding · skrip/ — scaffolding, limpiar procesos, hoja de contactos, compresión
• Ejemplo real de 13 escenas (página de inicio + desplazamiento, tour con destaque + diálogo, teléfono escanea QR, pantalla dividida dashboard + teléfono, cambio de página + pago) proviene del proyecto ChatGerCep del autor; el patrón está en templat/src/scenes/ejemplo.tsx y referencias/arquitectura.md.