suxrobGM/jobpilot

Video teaser

Produce un teaser de calidad de lanzamiento (~30-45s) de una aplicación en ejecución: crea un guión gráfico, grábalo manejando la interfaz real, edítalo con ffmpeg y entrega un MP4 más un GIF para el README.

El resultado debe parecer un video de producto, no una grabación de pantalla. La diferencia radica en la dirección: puesta en escena, encuadre y ritmo, no en la resolución.

Las implementaciones de referencia están en reference/; son módulos ESM funcionales, no pseudocódigo. Configúralas en un directorio temporal, nunca dentro del proyecto:

cp -r <skill>/reference/* "$SCRATCH/" && cd "$SCRATCH" && npm install
export TEASER_BASE_URL="https://the-app.example.com"

reference/package.json declara "type": "module" y las tres dependencias. Cada script lee TEASER_BASE_URL, por lo que nada está codificado para una aplicación concreta.

Antes de cualquier otra cosa: las dos reglas estrictas

1. Nunca desencadenes efectos secundarios del mundo real sin consentimiento explícito y detallado.

Grabar una aplicación real significa hacer clic en botones reales. Algunos pueden enviar correos, publicar públicamente, cobrar dinero o enviar formularios a terceros. Antes de tocar la aplicación:

• Enumera cada acción de tu guión gráfico que salga de la máquina.
• Informa al usuario exactamente qué hace cada una y cuántas veces, luego obtén su acuerdo sobre el número.
• Prefiere un modo que se detenga antes del paso irreversible (una vista previa, una ejecución en seco, una puerta de confirmación que puedas grabar y luego rechazar).

No existe una "sonda de solo lectura" contra un sistema en vivo. Un clic "diagnóstico" que aterriza en una sesión ya en ejecución se dispara de verdad. Si estás depurando por qué una acción no funcionó, asume que tu próximo clic funcionará y prepárate para ello.

Si algo se dispara sin intención: detén el proceso en su origen inmediatamente (mata la sesión/trabajador, no solo el botón de la interfaz, que puede no tener efecto), verifica el estado detenido leyéndolo de nuevo, e informa al usuario claramente en tu mensaje final, incluido el recuento.

2. Asume que cada fotograma es público y está lleno de PII (Información Personal Identificable).

Las cuentas reales contienen nombres, correos electrónicos, direcciones y documentos. Decide la política con el usuario de antemano:

• Encuadrar alrededor (por defecto): compón tomas que excluyan la identidad. Recorta el cromo persistente (barras laterales, avatares, menús de cuenta) en la etapa de ffmpeg.
• Ocultar antes de grabar: usa page.evaluate para aplicar visibility: hidden en las tarjetas problemáticas antes de que la cámara ruede. Nunca lo grabes y esperes recortarlo después.
• Usar una cuenta de demostración preconfigurada: la opción más limpia cuando existe.

Revisa cada fotograma del corte final a resolución completa antes de entregar. No la hoja de contactos, sino los fotogramas.

Flujo de trabajo

1. Explora y crea el guión gráfico

Toma primero screenshots autenticados de cada pantalla candidata (reference/scout.js). Míralos. Luego escribe una tabla de guión gráfico: escena, toma, lo que el espectador debe sentir, y duración. Una toma sin trabajo asignado se elimina antes de filmarse.

Arco que funciona: tensión (el problema) → revelación (el producto) → prueba (realmente hace lo que dice) → escala (los resultados) → confianza (dónde se ejecuta) → cierre.

Anota en el guión gráfico qué pantallas contienen PII y cuáles son seguras.

2. Prepara la escena

Prepara antes de grabar, nunca después:

• Elige vistas donde los datos se vean mejor: gráficos completos, listas activas, nombres reconocibles, conteos no nulos. Nunca grabes un spinner, un estado vacío o un gráfico a medio renderizar.
• Configura el estado de la interfaz deliberadamente (anchos de panel, colapsado/expandido, filtros, posición de scroll) mediante localStorage en un script de inicialización o un page.evaluate previo a la grabación.
• Descarta toasts, banners y barras de cookies fuera de cámara.
• Deja que los datos se estabilicen: networkidle más unos segundos.

3. Graba

Usa screencast de CDP (Page.startScreencast), no grabación de pantalla. Captura la página fuera de pantalla a ~100fps, por lo que nada de lo que haga el usuario aparece en el fotograma y la máquina sigue siendo usable. Playwright conduce; CDP graba. reference/rig.js lo implementa.

• Un sujeto por toma. Encuadra la cosa, no "la aplicación completa".
• Los movimientos de cámara provienen de desplazamiento suave con easing dentro de la página (cameraScroll), nunca de un filtro. Ver la advertencia sobre zoompan más abajo.
• El cursor es un actor: usa el cursor SVG inyectado (cursorClick) que se desliza con easing y baja al presionar, o escóndelo. Sin deriva inactiva.
• Ensaya cada toma, extrae fotogramas, míralos, ajusta, luego graba de verdad.

Grabar una ventana externa (un navegador que la propia aplicación abre, una aplicación de escritorio) necesita captura del sistema operativo: gdigrab/x11grab/avfoundation (recordDesktop en el rig). Esto captura todo en la pantalla, incluido el trabajo propio del usuario. Advierte al usuario, pídele que se aparte, y revisa el resultado fotograma por fotograma; elimínalo si capturó algo privado.

4. Tarjetas de título

HTML/CSS animados grabados en el navegador, no imágenes estáticas. Inyecta el marcado de la tarjeta en una página en blanco en el mismo origen de la aplicación para que se resuelvan sus fuentes web y paleta, luego haz screencast. Obtén la fuente real de visualización de la página en vivo (getComputedStyle) y fija una pila monoespaciada conocida en lugar de detectar una.

Haz coincidir el lenguaje de movimiento de la aplicación (sus propias curvas de easing y duraciones). Carga el skill frontend-design antes de diseñarlas si el proyecto no tiene un estilo de tarjeta establecido.

5. Edita

reference/build.js normaliza cada segmento a un tamaño/fps común, luego hace crossfade en la cadena. Mantén cortes cada ~2.5-4s. Dale al momento culminante espacio a velocidad normal mientras comprimes lo rutinario a su alrededor.

6. Revisa, luego entrega

• Genera una hoja de contactos y fotogramas a resolución completa por segundo.
• Lee los fotogramas en busca de PII, paneles recortados y texto ilegible.
• Verifica la duración y dimensiones con un probe.
• Entrega un MP4 más, para READMEs, un GIF optimizado con paleta (GitHub no reproducirá en línea un MP4 subido). Mantén el GIF por debajo de ~10 MB.
• Déjalo sin sonido a menos que se solicite; no puedes licenciar música. Dilo.

Especificaciones difíciles de conseguir

Nunca uses zoompan para acercamientos. Recalcula el zoom por fotograma y redondea la ventana de recorte a píxeles enteros, por lo que la imagen rebota de un lado a otro: se lee como un terremoto. Usa tomas fijas más desplazamiento real dentro de la página. Si debes tener un acercamiento, escala previamente la fuente 4x primero, y verifica con una medición de diferencia de fotogramas (reference/jitter.js): una toma estática fija debe medir muy por debajo de 1.0 de delta medio; la vibración visible lee 3+.

El screencast deja de emitir fotogramas cuando la animación se estabiliza. Una tarjeta cuya animación termina después de 1.2s produce un clip de 1.2s. Rellena con tpad=stop_mode=clone:stop_duration=N y corta a la duración que desees con -t.

Ensambla fotogramas con marcas de tiempo, no a una tasa fija. Los fotogramas del screencast llegan con metadata.timestamp; escribe una lista de concat de ffmpeg con duraciones reales por fotograma, luego remuestrea a 60fps constantes. Asumir un intervalo fijo produce sacudidas.

ffmpeg-static como dependencia de desarrollo, resuelta por ruta de módulo. Nunca dependas de que ffmpeg esté en PATH. (ffprobe no está en ese paquete; analiza ffmpeg -i stderr en su lugar.)

Captura autenticada: inicia sesión una vez con interfaz gráfica, guarda storageState, reutilízalo en cada toma (reference/login.js). Las sesiones expiran: termina de grabar el mismo día o vuelve a ejecutarlo. También siembra las preferencias de interfaz de localStorage allí.

Localhost desde un origen desplegado está bloqueado por la política de acceso a la red local de Chrome. Si la página debe alcanzar un servicio local, inicia con --disable-features=LocalNetworkAccessChecks,PrivateNetworkAccessChecks,BlockInsecurePrivateNetworkRequests.

Recorta el cromo persistente con un desplazamiento fijo. Graba a un ancho de viewport 1920 + railWidth, luego crop=1920:1080:railWidth:0 para eliminar la barra lateral y aterrizar exactamente en 1080p.

Entregables

Informa la ruta, duración y dimensiones; indica claramente qué se necesita aún del usuario (música, una subida de video nativa de GitHub); y divulga cualquier cosa que haya ocurrido durante la grabación que el usuario quiera saber.