Communitygithub.com

code-film

Película de movimiento generada a partir de código, con verificación cuadro por cuadro.

¿Qué es code-film?

code-film es una habilidad para agentes de IA que permite crear películas de movimiento cortas (animaciones) exclusivamente a partir de código. Cada cuadro es una función pura de su marca de tiempo: una página expone `window.__seek(t)`, y el perfil `ui:render --profile film` busca cada cuadro, lo captura, demuestra que la secuencia es determinista, la verifica contra el umbral de fotosensibilidad y el formato declarado, y la codifica con ffmpeg. No requiere proveedores de video de pago ni reproducción en vivo. La habilidad es ideal para clips de lanzamiento de productos, gráficos animados, tipografía cinética, explicadores de procesos o animaciones de marca en bucle. Soporta plataformas como Claude Code, Cursor y Codex, y se basa en un riguroso proceso de verificación: cada fotograma se captura, se compara con una hoja de contacto y se verifica que la secuencia sea determinista. Utiliza un corpus de recetas para la dirección creativa y una serie de prohibiciones para evitar suposiciones no verificadas. El resultado final es un archivo MP4 con un resumen de las comprobaciones realizadas y la huella SHA-256 del archivo.

Compatible con✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/event4u-app/agent-config/tree/HEAD/src/skills/code-film

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

¿Qué hace code-film?

Una película de movimiento donde cada cuadro es una función pura de su marca de tiempo: una página expone window.__seek(t), ui:render --profile film busca cada cuadro, captura, demuestra que la secuencia es determinista, la verifica contra el umbral de fotosensibilidad y su formato declarado, y la codifica con ffmpeg. Sin proveedor de video de pago, sin reproducción en vivo. Los valores para el movimiento de la película viven en references/film-motion.md; el contrato de la página en film-page.

Cuándo usarlo

  • El usuario pide una película de movimiento corta construida a partir de su propio material — un clip de lanzamiento de producto, un showreel, tipografía cinética, un gráfico animado, un explicador de procesos, una animación de marca en bucle.
  • La película debe renderizar igual dos veces, ajustarse a un ritmo o un tempo declarado, o entregarse como MP4 con un tamaño indicado.

Cuándo NO usarlo

  • Una solicitud para un proveedor de video generativo (Veo, Kling, Sora) → motion-choreographer.
  • Una animación dentro de una interfaz de usuario — hover, revelado al hacer scroll, transición de página → fe-design § Movimiento.
  • Cortar o subtitular material existente → el clúster /video.
  • Un activo SVG estático o en bucle → svg-authoring.

Procedimiento

  1. Entradas. Pregunta solo lo que la receta lista como variable: propósito, formato y tamaño en píxeles, paleta en hexadecimal, una tipografía, audio (ninguno, un archivo proporcionado, o un tempo declarado), tarjeta final. Si es "solo hazlo", indica los valores predeterminados que usaste.

  2. Dirección. Elige una receta del corpus y declara el único concepto que cada plano sirve:

    node <skills-root>/corpus-grounding/scripts/ground.mjs search \
      --manifest <skills-root>/code-film/data/manifest.json "<el resumen>"
    
  3. Prohibiciones. Obtén las señales para el resumen (--domain tell) y escribe cada prohibición con su alternativa en el plan.

  4. Cuadrícula. Tempo y compases de la pista suministrada (allin1.sh cuando está instalado; en caso contrario, un tempo declarado, reportado como declarado), luego una lista ordenada de planos con tiempos. Mantén cada texto durante su tiempo de lectura (3 palabras por segundo).

  5. Solo explicadores — afirmaciones. Enumera cada cifra, nombre y fecha en pantalla con su fuente, o márcalo como del usuario. No inventes ninguna.

  6. Construcción. Escribe la página según el contrato de búsqueda: window.__seek(t), window.__videoMeta, sin reloj de pared, aleatoriedad con semilla, fuentes locales. Elige el motor de renderizado de --domain renderer; HTML simple es el predeterminado y un motor de renderizado con licencia se sugiere solo después de responder su pregunta sobre la licencia.

  7. Hoja de contacto. Renderiza una vez, lee contact.png, corrige desorden, superposición y sincronización fuera de ritmo. Máximo tres pasadas.

  8. Renderizado.

    agent-config ui:render film/index.html --profile film --out film/out.mp4 [--audio track.wav]
    

    Salida 0 es limpio, 2 lleva hallazgos (determinismo, flash, tiempo muerto, formato, red), 1 significa no evaluado, 3 significa que no hay controlador de navegador.

  9. Informe. Cita el manifiesto: la forma de búsqueda, cada verificación como ran o skipped: <reason>, los hallazgos y verification. Di verified solo cuando el manifiesto lo indique y su resumen de archivo sea el archivo que entregas.

Estado — qué puede significar cada palabra

  • verified — cada verificación aplicable se ejecutó en esta máquina y el resumen del archivo codificado es el registrado. No dice nada sobre si la película es buena.
  • static-only — los cuadros fueron capturados y hashificados, pero una verificación que necesita ffmpeg (piso de flash, codificación, formato) no se ejecutó. Nombra la herramienta faltante.
  • unassessed — no se vio nada: sin controlador de navegador, sin formulario de búsqueda, o sin duración declarada. Nombra la instalación o la declaración faltante.

Formato de salida

  1. La ruta de la película y su SHA-256 del manifiesto.
  2. La tabla de verificaciones (ran / skipped: …) y cada hallazgo.
  3. La ruta de la hoja de contacto.
  4. Para un explicador, la lista de afirmaciones con fuentes.

Advertencia

  • Una página que usa Math.random o Date.now renderiza de manera diferente en la pasada inversa; el manifiesto nombra el primer cuadro divergente. Usa una semilla a partir de t.
  • El piso de flash es un piso de seguridad: un estroboscopio falla y ninguna bandera lo reduce.
  • El perfil de película ejecuta los scripts de la página con la red apagada. Una fuente o imagen obtenida de una CDN no se carga — envíala junto a la página.
  • El determinismo se demuestra por máquina; las fuentes y las GPU difieren entre máquinas.
  • Una página construida en un framework de línea de tiempo se ve a través de window.__timelines (entradas en pausa, buscables); el metraje incrustado se mantiene en t − data-start. Codifica el metraje todo-intra (-g 1), o una búsqueda puede caer entre fotogramas clave.

NO hacer

  • NO pegues texto de un prompt de una galería externa en un plan o una receta — escríbelo fresco desde el corpus.
  • NO empaquetes ni instales un motor de renderizado sin preguntar; detecta y redirige.
  • NO des una película por terminada solo por el código — los cuadros deciden.
  • NO afirmes que una película es buena, está en marca o "menos IA"; reporta lo que se midió.

Ver también

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

Skills relacionados