Vídeo de demo

¿Qué hace Vídeo de demo?

scripts/demo graba una aplicación web y escribe su corpus en ~/demo-reels-out/<workspace>/ (DEMO_OUT_ROOT mueve el padre, DEMO_OUT nombra el directorio de una ejecución): por escena un mp4 con voz en off, un póster, imágenes fijas retina, además de full-tour.mp4, manifest.json e index.html. Todo local. El motor se ejecuta desde esta skill; no se instala nada en la aplicación que se graba.

No negociables

Cada una de estas cuesta una ejecución o la paciencia del usuario.

1. Una compilación fija, nunca un servidor de desarrollo. Su gráfico de módulos pertenece a quien esté editando el código fuente. Cópialo en algún lugar privado y verifica su base de API leyendo el bundle. Una URL sin un repositorio detrás es modo site; una URL en localhost es un servidor de desarrollo y nunca se graba.
2. En modo build, simula cada petición en proceso y fija el reloj. Un corpus se publica, y una cuenta real publica direcciones de personas reales. El modo site renuncia a ambas cosas a sabiendas: solo páginas públicas.
3. Dueño de tu puerto y directorio de salida. El estudio se niega a adoptar un servidor que no inició. Nunca uses pkill por patrón.
4. Video 1080p60, imágenes fijas 2x. Son configuraciones separadas. El video 4K tiembla porque el rendimiento es un presupuesto fijo de píxeles por segundo.
5. Haz el gesto, luego narra mientras te acercas al resultado. Un sujeto por línea. Nunca narres antes de que exista el sujeto. Donde la aplicación tiene su propio temporizador (una ventana de deshacer, un toast), el gesto va dentro y las palabras después, o la película muestra una funcionalidad que no funciona.
6. Una escena, luego para y pregunta (paso 8). Detectó cuatro defectos antes de que se grabaran veintiséis escenas más.
7. Lee el PNG, cada vez. Una escena que pasa mientras encuadra lo incorrecto es un fallo, y solo un ojo en la imagen fija lo detecta.
8. Nada es definitivo hasta que ellos lo digan. Cualquier comentario sobre las palabras, el encuadre, el ritmo, lo que se cubre o la voz es una regrabación, no una negociación: cámbialo y grábala de nuevo. Ellos no pueden ver lo que tú ves, así que "demasiado largo", "acércate más" y "deja de acercarte tanto" son todas instrucciones completas, y una escena es barata de filmar dos veces.

Flujo de trabajo

1. Elige el modo a partir de lo que te dieron. No preguntes. Una URL http(s) en un host público es site, espacio de trabajo ~/.shipdemo/<host>/. Una URL en localhost o una dirección privada es un servidor de desarrollo: encuentra el repositorio detrás y trata la petición como ese repositorio. Sin URL significa el repositorio en el que estás, así que sube y busca una aplicación web (un package.json con un script de build junto a una configuración de Vite, React Router, Next, Astro, SvelteKit o Remix). Exactamente una es build; varias, pregunta cuál; ninguna, pide una URL o una ruta. Un espacio de trabajo cuyo .origin ya nombra este repositorio se reutiliza, no se crea de nuevo. Di el modo y la ruta del espacio de trabajo en una línea y continúa.
2. scripts/doctor.sh, luego configúrate antes de pedir cualquier otra cosa al usuario. Ellos instalaron una skill; no se registraron para ejecutar tres scripts. Di lo que falta en una línea, di lo que propones instalar y aproximadamente cuánto ocupa, y ejecútalo una vez que estén de acuerdo. scripts/install.sh cubre el motor y Chromium (unos 250MB) e instala ffmpeg también donde el gestor de paquetes lo permita; scripts/install-voice.sh es la voz (~350MB), y filmar en silencio es una respuesta válida si prefieren no hacerlo. Nunca instales nada sin preguntar, y nunca les entregues un informe de doctor para interpretar. Dos cosas que no hará, y tú tampoco deberías: actualizar su Node, porque saber qué herramienta lo gestiona es cosa suya, y ejecutar sudo, porque un prompt de contraseña en un script que nadie mira simplemente se cuelga. En ambos casos el script imprime el comando y tú lo transmites.
3. Descubre, sin escribir nada. site: abre la URL y léela, para saber de qué trata la página, las tres cosas que vale la pena mostrar, y qué es lo suficientemente estable como para señalar. Si llega a una página de inicio de sesión, detente: una aplicación con inicio de sesión se graba desde su repositorio, así que pide eso o una URL pública. build: el comando de build copiado textualmente de package.json; el directorio de salida de la configuración del framework; cualquier host de API absoluto en .env* (va en build.forbid); la clave que lee el script de arranque del tema; una API de fixtures existente o manejadores de MSW; densidad de data-testid; rutas sin credenciales.
4. scripts/scaffold.mjs <appRoot>, o scripts/scaffold.mjs --site <url>. Ninguno escribe nada en la aplicación.
5. Completa el demo.config.ts del espacio de trabajo. Un campo obligatorio aún desconocido significa que el descubrimiento no está completo. config.md
6. Solo build: escribe mock.ts y seed/. Reutiliza las fixtures de datos propias del repositorio si las tiene, pero nunca un archivo que importe @playwright/test: dos copias en una ejecución es un error que Playwright rechaza, y falla todo el corpus en lugar de la única escena que lo causó. Luego DEMO_VOICE=0 scripts/demo --grep smoke. Reutiliza la API de fixtures del repositorio si tiene una (mocking.md). Lee la imagen fija: sesión iniciada, datos sembrados, tema correcto, sin página de inicio de sesión. Lee la línea de captura. Corrige hasta que ambas estén correctas, luego escribe demo/ui.ts solo con lo que demostró la ejecución smoke.
7. Escribe el guion primero. Completa el profile.json del espacio de trabajo (copia template/profile.json; producto, audiencia, línea de cierre, palabras prohibidas), luego escribe cada línea siguiendo script.md: gancho, pasos, recompensa, cierre. El gancho también va en hooks.json para las variantes. Graba lo que pidieron, en el alcance que pidieron. Una funcionalidad nombrada es una escena: escríbela, grábala, entrégala. No respondas "graba la búsqueda en la página de inicio" con una propuesta de diez escenas, y no amplíes silenciosamente la petición porque el producto tiene más cosas. Solo cuando la solicitud es todo el producto, propón de 6 a 10 escenas, cada una con un título y un resumen de una línea en orden del recorrido, y pregunta cuál grabar primero.
8. DETENTE. Graba esa única escena con voz. Verifica que el recuento hablado coincida con las llamadas say, que nada se excedió, que la velocidad se mantuvo. Lee cada imagen fija. Dale al usuario la ruta del mp4 y pregúntale sobre el registro de la escritura, la escala de zoom, el ritmo y la voz. No escribas nada más hasta que respondan.
9. Luego lotes de tres o cuatro usando --grep; el manifiesto se fusiona. Lee las imágenes fijas después de cada lote. DEMO_BUILD=0 scripts/demo omite la recompilación mientras se itera sobre una escena — veinte segundos en lugar de cuatro minutos; elimínalo para la ejecución que produce el corpus.
10. Ejecución completa con DEMO_CAPTIONS=1 DEMO_TRACE_FRAMES=1, luego scripts/check.mjs <out> y abre <out>/index.html. Informa la tabla de captura, cualquier clip lento y cada bandera que levanten las comprobaciones.
11. Variantes. Pregunta cuáles quieren, a menos que hayan dicho: reel, wide-phone, wide-laptop, wide-laptop-zoom, web, o all (scripts/variants.mjs --list describe cada una). Luego scripts/variants.mjs <out> --only <list>. Los presets de teléfono toman grabaciones verticales y los de laptop horizontales, así que graba ambos tamaños cuando quieran ambos. Lee un póster por variante antes de entregarlos.

Una escena

scene('tasks', { title: 'Tus tareas, junto a tu calendario', blurb: '...' },
  async ({ actor, page, shot }) => {
    await actor.click(page.getByRole('radio', { name: 'Hoy' }));
    await actor.settle();
    await actor.spotlight(
      row('Enviar a Sam los comentarios'),
      'Y esta es de ayer que nunca pude atender, así que está marcada.',
      { scale: 1.8, stay: true }
    );
    await shot('atrasada');
    await actor.unfocus();
  });

spotlight toma la marca de narración, luego mueve la cámara y el cursor sobre las palabras iniciales de la línea. Escala según el sujeto: panel ~1.4, fila ~1.7, control individual ~2. Una línea sobre toda la pantalla recibe un simple say y sin zoom. unfocus es una pista más que un movimiento: la cámara solo sale cuando algo necesita un plano general, así que latidos consecutivos sobre la misma región se deslizan en lugar de rebotar. scenes.md · narration.md

Nunca

TTS en la nube (la película es de datos privados). recordVideo de Playwright (sin control de velocidad, tamaño o inicio; el grabador lo reemplaza). 4K como predeterminado. Música, tarjetas de introducción o fundidos cruzados. Escenas generadas a partir de un rastreo de rutas: una escena es una coreografía con un propósito. Reintentos: una escena reintentada es una película diferente.

Subtítulos, comprobaciones y variantes

Los subtítulos están activados para cualquier cosa destinada a publicarse (DEMO_CAPTIONS=1): .srt, .vtt, .lines.json y un .captioned.mp4, cortados del propio guion, así que coinciden con la voz palabra por palabra. Los subtítulos quemados se sitúan en la parte inferior, por encima de los controles del reproductor (DEMO_CAPTION_MARGIN anula; nunca en la parte superior).

scripts/check.mjs ejecuta tres comprobaciones: voz (cada línea transcrita y comparada con su guion), pantalla (cada medio segundo leído en busca de las palabras neverOnScreen del perfil, luego cualquier cosa dibujada en rojo) y fotogramas (intervalos lentos). Una herramienta faltante se omite con el comando para instalarla (scripts/install-checks.sh). El rojo que pertenece ahí, como una insignia de atrasado, también se lista: lee la lista, no lo cuentes.

scripts/variants.mjs lee variants/presets.json. Una nueva variante es una nueva entrada allí: lienzo, dónde se sienta la aplicación, dónde van el gancho y los subtítulos, y zoom si debe acercarse a los aspectos destacados. Nada se vuelve a filmar; los originales nunca se tocan.

También

DEMO_VOICE_VARIANTS=am_michael,bf_emma mezcla la misma toma en más voces (<escena>.<voz>.mp4), para probar una voz sin volver a filmar.

capture.md antes de cambiar cualquier número de captura. runs.md para compilaciones, aislamiento y el manifiesto. troubleshooting.md cuando una ejecución falla o una toma se ve mal. El motor se ejecuta desde esta skill, por lo que una corrección en engine/ alcanza a cada proyecto en la máquina a la vez: edítalo allí, y nada necesita propagarse.