Instalación del plugin: Antes de los comandos de configuración o actualización, siga las reglas de ejecución del plugin cuando esta habilidad esté dentro de un plugin de HyperFrames. Las instalaciones independientes mantienen las instrucciones de actualización a continuación.
Punto de entrada de HyperFrames
HyperFrames renderiza video desde HTML: una composición es un archivo HTML cuyo DOM declara la sincronización con atributos data-*, cuyo runtime de animación es buscable y cuya reproducción de medios es gestionada por el marco. El contrato completo de autoría se encuentra en /hyperframes-core; léalo antes de escribir el HTML de la composición. Los contratos de resumen, storyboard, revisión, producción, despacho y frame-worker se encuentran en references/ de esta habilidad.
1. Comience desde el estado del proyecto
Aplique la primera fila coincidente; no evalúe filas de estado inferiores:
| Estado | Acción |
|---|---|
| Puerto explícito de una fuente de Remotion existente a HyperFrames | Lea references/routes/remotion-to-hyperframes.md y luego enrute directamente a ese flujo de trabajo. Omita la capa de intención. |
| Operación específica en un proyecto HyperFrames existente: inspeccionar, diagnosticar, validar, previsualizar, renderizar, publicar o renderizar por lotes | Realice solo esa operación. Omita el enrutamiento de intención y flujo de trabajo; cargue /hyperframes-cli y las habilidades de dominio necesarias. |
| Una pregunta, una pausa, una idea sin cambio concreto o una nota sensorial sobre una película construida, en un proyecto existente | Siga /hyperframes-studio § 0. |
| Una nueva película solicitada dentro de un proyecto existente | Siga /hyperframes-studio § 5. |
| Edición específica de un proyecto existente | Realice la edición. No ejecute la capa de intención. Para saber qué hay en la línea de tiempo de un proyecto (pistas, clips, inicios, fines, qué se reproduce), ejecute npx hyperframes timeline [--json] en lugar de leer index.html y cada archivo de subcomposición. |
BRIEF.md existe | Lea workflow y flow. Ejecute ese flujo de trabajo; flow: companion siempre se ejecuta en /general-video. No haga preguntas del resumen. |
Sin resumen, pero existe hyperframes.json o STORYBOARD.md | Reanude desde los archivos del proyecto y las preferencias registradas. Infiera el flujo de trabajo propietario a partir de los artefactos existentes. Si no se puede determinar de manera única, haga una sola pregunta de enrutamiento; no ejecute la entrevista de intención. |
| Creación nueva | Ejecute la capa de intención — references/intent-interview.md — y luego enrute una vez usando la tabla de la § 2. |
Cuando edite un proyecto existente, delimite sus ediciones con el historial del proyecto (/hyperframes-cli, Historial del proyecto en su turno).
Si una solicitud nueva no identifica el tema o la entrada, pregunte de qué trata el video antes de enrutar. Verifique preferencias y recetas antes de preguntar cualquier cosa (references/intent-interview.md, paso 1). Una entrada figma.com o una receta nombrada cambia la ingesta, no el enrutamiento; la sección "Adaptar entradas ortogonales" de la entrevista maneja ambas.
Mantenga actualizado el CLI del proyecto
Un proyecto scaffolded fija hyperframes@<version> en sus scripts de package.json para que los renders sigan siendo reproducibles; la fijación nunca avanza por sí sola, y una ejecución fijada de un CLI antiguo no imprime ninguna advertencia al respecto. Al reanudar un proyecto cuyos scripts llevan una fijación, pruebe una vez antes del primer comando que afecte al render:
npx hyperframes@latest upgrade --project . --check
La prueba es de solo lectura e informa la fijación contra la última versión; mantenga el . explícito — en versiones anteriores de CLI, un --project simple seguido de otra bandera consume esa bandera como su valor de directorio. Cuando informe que el proyecto está desactualizado — o cualquier salida del CLI ya lo muestre (el aviso de stderr This project pins hyperframes@… (latest …), o _meta.updateAvailable: true en un resultado --json de un script fijado) — aplique con npx hyperframes@latest upgrade --project ., luego verifique con npx hyperframes check. Una verificación exitosa confirma que las composiciones del proyecto aún se validan en la nueva versión — no que la salida renderizada sea idéntica cuadro a cuadro a la fijación anterior — por lo que un aumento exitoso nunca es silencioso: nombre la versión anterior y la nueva en el resumen de la ejecución. Un proyecto sin composición aún no necesita verificación. Si la verificación falla, revierta el cambio en package.json, continúe con la versión fijada e informe en qué versión se queda el proyecto y por qué. Actúe según la señal en lugar de transmitirla al usuario; nunca deje una fijación aumentada sin verificar.
2. Enrutar creación nueva
Use la primera fila coincidente. Coincida con el entregable solicitado, no con una palabra o tipo de archivo mencionado de paso.
| Prioridad | Solicitud | Flujo de trabajo |
|---|---|---|
| 1 | Portar explícitamente una fuente de Remotion existente | /remotion-to-hyperframes |
| 2 | Crear una presentación, pitch deck o mazo interactivo navegable | /slideshow |
| 3 | Agregar subtítulos o subtítulos simples a metraje de cabeza parlante existente sin cambiarlo | /embedded-captions |
| 4 | Agregar superposiciones gráficas diseñadas a metraje de cabeza parlante, entrevista o podcast existente sin cambiar el metraje | /talking-head-recut |
| 5 | Construir un video sincronizado con el ritmo a partir de una pista de música, sin narración ni captura de sitio web | /music-to-video |
| 6 | Crear una unidad explícitamente corta, sin narración y centrada en el movimiento, típicamente de menos de 10 s | /motion-graphics |
| 7 | Explicar un pull request de GitHub o un cambio de código a partir de una referencia de PR | /pr-to-video |
| 8 | Comercializar o mostrar un sitio web, sitio de producto, aplicación o empresa a partir de una URL o resumen específico del sitio | /product-launch-video |
| 9 | Explicar un tema, artículo o notas con imágenes inventadas y sin captura de producto o sitio | /faceless-explainer |
| 10 | Cualquier otro video o composición personalizada | /general-video |
Antes de finalizar la ruta, lea references/routes/<workflow>.md — un archivo pequeño por ruta: el contrato canónico de entrada/salida/desencadenante (disponible antes de que las habilidades del flujo de trabajo instalado de forma diferida estén presentes) más la entrada de entrevista de esa ruta. Si el candidato no cumple con su contrato, continúe enrutando en lugar de forzar la coincidencia. Lea solo el archivo de la ruta coincidente.
Resolver ambigüedades comunes
- Un título animado corto, sting de logotipo, impacto de estadística, impacto de gráfico, impacto de mapa o tercio inferior independiente es
/motion-graphicscuando no tiene narración y el movimiento es el mensaje. Una tarjeta de título estática, secuencia narrada, montaje más largo o bucle personalizado es/general-video. - Un gráfico en movimiento explícitamente corto puede usar una URL, tweet, artículo o captura de pantalla como material de origen. Una solicitud genérica de "hacer un video de este sitio" es
/product-launch-video. - El metraje existente con subtítulos se enruta a
/embedded-captions; el metraje con tarjetas de información diseñadas se enruta a/talking-head-recut. Reajuste de tiempo, reordenamiento, recoloreado, reencuadre o remezcla de metraje es una edición personalizada y cae en/general-video. - Un archivo de música selecciona
/music-to-videosolo cuando su cuadrícula de ritmo impulsa la pieza. La música utilizada como fondo no anula la ruta coincidente con el tema. - "Quiero un storyboard" cambia el proceso de revisión, no el flujo de trabajo. Sin otra señal de enrutamiento, use
/general-video. Unstoryboard.htmlesbozado confirmado puede ser en sí mismo el entregable solicitado; el bucle de revisión define ese punto de parada. - Los flujos de trabajo narrativos especializados soportan hasta unos 3 minutos y son más fuertes alrededor de 30–90 s. Enrute una pieza claramente más larga a
/general-video. La duración nunca anula un puerto explícito, mazo, subtítulo, superposición o entregable impulsado por música.
3. Enrutar una vez, luego salir
Para la creación nueva, la capa de intención (references/intent-interview.md) ejecuta la conversación completa — memoria, triaje, ronda de propuesta, imprescindibles, forma de ejecución, traspaso — y termina escribiendo BRIEF.md. El resumen es el único artefacto de enrutamiento que lee el flujo de trabajo; nada más tarde reabre esta habilidad o la entrevista. Responda a cada pregunta posterior de "¿qué requirió la ruta?" desde BRIEF.md.
4. Instale y entre en el flujo de trabajo
Antes de leer el flujo de trabajo seleccionado, instálelo o actualícelo junto con las habilidades básicas del dominio:
npx hyperframes skills update <nombre-del-flujo-de-trabajo>
Use el nombre simple sin /. Si el comando falla, muestre el error; no reconstruya el flujo de trabajo de memoria. Todo lo demás sobre la instalación — la división entre básico y diferido, lo que init actualiza, diagnóstico, exclusión de CI y la alternativa sin CLI — se encuentra en references/skill-lifecycle.md.
5. Cargue habilidades de dominio bajo demanda
| Necesidad | Habilidad |
|---|---|
| Estructura de composición, atributos de sincronización, pistas, variables, determinismo | /hyperframes-core |
| Reglas de movimiento, planos de escena, transiciones, adaptadores de runtime | /hyperframes-animation |
GSAP seguro de búsqueda, CSS, Anime.js, WAAPI, FLIP, trazados, máscaras, SVG, fotogramas clave 3D o diagnósticos de hyperframes keyframes | /hyperframes-keyframes |
| Especificaciones de diseño, concepto, paleta, tipografía, narración, planificación de ritmo | /hyperframes-creative |
| Imágenes, iconos, logotipos, audio, subtítulos, grados, LUT, medios reutilizables | /media-use |
| Tallado de voz en off, cadenas de efectos de audio, sobres de automatización, o una cadena/desvanecedor a través de varias pistas (bus de submezcla) | /hyperframes-audio |
| Iniciar, lint, verificar, instantáneas, comparar, renderizar por lotes, Studio, renderizar, publicar o diagnósticos | /hyperframes-cli |
| Bloques y componentes del registro | /hyperframes-registry |
| Un look, efecto, tratamiento o transición nombrados — líneas de barrido CRT, glitch, grano de película, barrido de brillo, ráfaga de confeti — ANTES de construirlo manualmente | /hyperframes-registry |
| Activos, tokens, componentes o fotogramas de storyboard de Figma como movimiento reconstruido | /figma |
Las frases de edición del creador son solicitudes entre dominios. Cargue cada habilidad nombrada en la fila coincidente:
| Solicitud del creador | Dominios requeridos |
|---|---|
| “cortar este metraje”, corte duro, recortar, empalmar, reordenar o usar un rango de origen |