En los propios términos del Skill
Un skill orientado primero al enrutamiento para una única pieza de motion graphic corta, guiada por diseño y sin narración —tipografía cinética, conteo de estadísticas, impacto de gráfico, logo sting, lower third, mapa animado, tweet o página web— por lo general de menos de 10s y no más de unos 30s, renderizada a MP4 o a un overlay transparente.
Está orientado primero a los assets y a la reutilización: la primera bifurcación es si la pieza necesita una búsqueda; las categorías de formulario se ejecutan sobre contenido proporcionado por el usuario con asset_needs vacío, las categorías impulsadas por búsqueda animan según el tipo de contenido devuelto, y el Builder compone bloques del catálogo antes de redactar manualmente los vacíos. El flujo de trabajo es autónomo con como máximo una pregunta de aclaración, pero el renderizado permanece supeditado al usuario tras el lint, la verificación y las instantáneas de prueba.
Qué produce
- Un shot-plan.json borrador y luego final que contiene el envelope, la categoría elegida o la intención de búsqueda, asset_needs y el bloque, layout, motion y posiciones.
- compositions/index.html que respeta el contrato HF con una línea de tiempo GSAP en pausa en window.__timelines, clases clip e ids estables, y un tl.seek(0) determinista.
- Una hoja de contacto o de instantáneas bajo snapshots/ para inspeccionar los tiempos de prueba.
- renders/video.mp4, o un overlay transparente al renderizar con el formato webm o mov.
Cómo funciona
- 01Inicializar el proyecto
El paso 0 crea PROJECT_DIR = videos/<project-name>/ y ejecuta hyperframes init con el ejemplo en blanco y este skill, omitiéndolo por completo cuando hyperframes.json ya existe.
- 02Planificar y decidir sobre la búsqueda
La primera bifurcación es si la pieza necesita una búsqueda: no significa una categoría de formulario con asset_needs: [], sí significa emitir consultas de búsqueda en asset_needs[].
- 03Obtener assets cuando sea necesario
El paso 2 resuelve los assets mediante media-use en rutas locales del proyecto congeladas más un ledger, y se omite directamente al diseño cuando asset_needs está vacío.
- 04Diseñar en torno a lo que tienes
Una segunda pasada del Director elige bloques del catálogo y reglas y blueprints de hyperframes-animation en torno a los assets resueltos, y luego finaliza el shot plan.
- 05Componer priorizando la reutilización
El Builder añade bloques del catálogo con npx hyperframes add y los personaliza in situ, redactando manualmente solo los vacíos y la posibilidad de asset-fusion para producir compositions/index.html.
- 06Tomar instantáneas de prueba
Elige tiempos de prueba que muestren el estado inicial, el movimiento distintivo y el hold final, y luego inspecciona la hoja de contacto o de instantáneas generada.