Communitygithub.com

AntlersSam/saas-launch-video-kit

Utiliza el ciclo de desarrollo de la CLI de HyperFrames: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes, single o batch render, publish, cloud, cloudrun, feedback, lambda, doctor, browser, info, upgrade, skills, compositions, timeline, history, clean, docs, benchmark, telemetry, transcribe, auth, tts y remove-background. También se usa para diagnosticar fallos de construcción o renderizado. validate, inspect y layout son alias obsoletos; usa check. Cubre renderizado local, en la nube alojada por HeyGen, AWS Lambda y Google Cloud Run.

¿Qué es saas-launch-video-kit?

Esta skill proporciona acceso completo a la CLI de HyperFrames, una herramienta para crear y gestionar vídeos de lanzamiento SaaS. Permite a los agentes de IA y desarrolladores ejecutar un ciclo de desarrollo iterativo: desde la inicialización del proyecto (init), búsqueda e instalación de primitivas de movimiento (catalog, add), creación de composiciones, linting, verificación final (check), vista previa (preview) y renderizado con diferentes calidades (draft, looks, delivery). También incluye capacidades avanzadas como renderizado por lotes, sincronización de latidos (beats), animación por fotogramas clave (keyframes), renderizado en la nube (cloud, cloudrun, lambda) y diagnóstico (doctor). La skill está diseñada para plataformas como Claude Code, Cursor y Codex, y se integra con entornos locales, la nube de HeyGen, AWS Lambda y Google Cloud Run. Su documentación detallada (SKILL.md) guía al agente para usar comandos con prefijo npx hyperframes, seguir un flujo de trabajo estructurado y aprovechar funciones como la búsqueda semántica en el catálogo, el historial de proyectos y las vistas previas en Studio.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/AntlersSam/saas-launch-video-kit/tree/HEAD/skills/hyperframes-cli

Preguntar en tu IA favorita

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

Documentación

Instalación de plugins: Antes de ejecutar comandos de configuración o actualización, sigue las reglas de ejecución de plugins cuando esta skill esté dentro de un plugin de HyperFrames. Las instalaciones independientes mantienen las instrucciones de actualización que se indican a continuación.

CLI de HyperFrames

Ejecuta los comandos como npx hyperframes ... a menos que las instrucciones del proyecto proporcionen un envoltorio. Obedece al envoltorio si está presente. La CLI requiere Node.js 22 o superior y FFmpeg.

Ciclo de desarrollo

  1. Andamio: npx hyperframes init <proyecto> (en blanco centrado). O captura un sitio. Pasa --example=<nombre> solo para comenzar desde un ejemplo con nombre.
  2. Encuentra el movimiento: si la solicitud nombra un activo, sonido, imagen, voz o edición visual rápida, resuélvelo a través de /media-use antes de proponer un plan. De lo contrario, antes de crear movimiento manualmente, busca una primitiva que ya lo haga: npx hyperframes catalog --query "revelar un titular línea por línea". Pide el efecto que deseas, no el mecanismo que tienes en mente. Instala con npx hyperframes add <nombre> (consulta /hyperframes-registry). Crea manualmente solo si nada encaja.
  3. Creación: escribe la composición usando /hyperframes-core. Para saber qué hay en la línea de tiempo de un proyecto (pistas, clips, inicios, fines, qué se reproduce), ejecuta npx hyperframes timeline --json en lugar de leer index.html y cada archivo de subcomposición: las filas anidadas llevan absStart/absEnd absolutos de la línea de tiempo principal y su file propietario, no solo su tiempo local por subcomposición. Prefiere --json sobre la forma de texto; cuesta menos tokens por la misma o mejor precisión. Consulta references/upgrade-info-misc.md para obtener frases cortas que respondan preguntas comunes sin leer toda la salida.
  4. Obtén retroalimentación rápida mientras editas: ejecuta npx hyperframes lint después del primer pase de HTML y después de cambios estructurales.
  5. Ejecuta la compuerta final: ejecuta npx hyperframes check; vuelve a ejecutar lint antes de abrir el navegador. No agregues una invocación redundante de lint independiente. Añade --snapshots para obtener fotogramas de visión general anotados y encontrar recortes.
  6. Inspecciona subcomposiciones: cuando index.html monte data-composition-src, captura instantáneas en el punto medio e inspecciona cada escena montada.
  7. Abre la vista previa final de Studio: ejecuta npx hyperframes preview --background, verifica que la URL devuelva HTTP 200, entrega la URL del proyecto de línea de tiempo al usuario y pregunta si desea revisar o renderizar. Mantenla activa hasta que termine la revisión.
  8. Renderiza solo después de la aprobación: usa --quality draft mientras iteras, --quality looks para la primera codificación real (el valor predeterminado de la CLI) y --quality delivery para la entrega final.
  9. Verifica la salida: confirma que el archivo existe y no está vacío. Lee la segunda línea del resumen de renderizado (beginframe vs screenshot, GPU, tiempos de etapa). screenshot + software gpu en Linux es la ruta lenta. ffprobe -v error -show_format -show_streams y compara la duración (y fps si el briefing lo estableció) con la raíz data-duration.

Historial del proyecto en tu turno

Cada escritura en el proyecto se guarda como una entrada que se puede deshacer. Úsalo solo en dos momentos, nunca en cada paso:

  • Inicio de un turno: npx hyperframes history begin --who <tu-nombre> --label "<lo que estás a punto de hacer>", luego npx hyperframes history --since mine --who <tu-nombre> para ver lo que la persona cambió desde tu último turno. Basa tus ediciones en las suyas; nunca las sobrescribas.
  • Una verificación falló, o la persona dice que empeoró: npx hyperframes history undo --who <tu-nombre> deshace tu turno más reciente y deja las ediciones de la persona intactas. No edites manualmente hacia atrás. En caso de conflicto, sale con código 2 e imprime ambas opciones.

Termina cada turno con npx hyperframes history end, para que tus escrituras se lean como tuyas, no como "Cambiado fuera de la aplicación". Mientras un turno está abierto, cada escritura en el proyecto cuenta como tuya hasta que pasen 10 minutos sin una; después de eso, el turno ha terminado por sí solo.

Referencias cruzadas obligatorias para edición creativa

  • Antes de crear o diagnosticar un zoom, entrada/salida, reencuadre, movimiento de cámara o cualquier animación de fotogramas clave, lee primero /hyperframes-keyframes.
  • Antes de hyperframes keyframes, lee /hyperframes-keyframes; el comando muestra trayectorias de animación y no diagnostica cortes de clip.
  • Para un corte, recorte, empalme, reordenación o edición de tiempo de origen, lee /hyperframes-core y usa su contrato de clip/línea de tiempo.
  • Para fundido de entrada/salida, encadenado, ganancia de pista, automatización de volumen, ducking, tallado de voz o FX en audio colocado, lee /hyperframes-audio. Carga core junto con él cuando también cambien la colocación del clip o el tiempo de la imagen.
  • Una solicitud que nombre un activo, sonido, imagen, voz o edición visual rápida se resuelve a través de /media-use antes de proponer un plan. Copia el marcado de edición creativa de /hyperframes-core → references/creator-editing-recipes.md.
# Iteración de verificación rápida; repite mientras creas según sea necesario.
npx hyperframes lint

# Compuerta final obligatoria; incluye lint.
npx hyperframes check
npx hyperframes preview --background
npx hyperframes render --quality looks --output out.mp4
test -s out.mp4
ffprobe -v error -show_format -show_streams out.mp4

check ejecuta lint primero, luego usa una sesión de navegador y un pase de búsqueda para auditar errores de tiempo de ejecución, solicitudes fallidas, diseño, aserciones de *.motion.json y contraste WCAG. Los hallazgos persistentes bloquean el código de salida; los hallazgos transitorios de entrada o salida son informativos. Usa --strict para bloquear advertencias. validate, inspect y layout siguen siendo alias por compatibilidad, pero no deben aparecer en nuevas instrucciones o scripts.

Vista previa antes del renderizado

Abre la vista previa de la composición final (#project/<nombre>) solo después de que check pase, para revisar la línea de tiempo ensamblada. El plan en el chat y la hoja de bocetos storyboard.html no son aprobación del video final. El renderizado siempre requiere la aprobación final definida por hyperframes/references/review-loop.md.

Prueba de humo de subcomposición

Las auditorías estáticas no pueden detectar todos los fallos de montaje. Cuando el proyecto use subcomposiciones, captura al menos un punto medio visible para cada ranura anfitriona:

npx hyperframes snapshot --at <t1>,<t2>,<t3>

Trata el contenido pequeño sin estilo, los iconos del tamaño del lienzo, los elementos principales faltantes o los tiempos de espera de registro en la línea de tiempo como defectos de montaje que bloquean el renderizado. Consulta hyperframes-core/references/sub-compositions.md para las correcciones correspondientes.

Convenciones del agente

  • Busca en el catálogo antes de escribir movimiento manualmente. npx hyperframes catalog --query "<el ritmo, en inglés sencillo>". La búsqueda es completamente local: no hay nivel alojado, ni cuenta, y el texto de la consulta nunca se envía a ningún lado. Por defecto, clasifica según el vocabulario compartido con el nombre, título, descripción y etiquetas del elemento, lo que omite cualquier frase que no reutilice la redacción del propio catálogo. Añade --on-device para clasificar por significado en su lugar (consulta el nivel fuera de línea a continuación).

  • Consulta en inglés incluso cuando el video no lo esté. Ambos niveles indexan un catálogo en inglés, por lo que una consulta en otro script no produce términos de búsqueda y no devuelve nada. Describe el movimiento en inglés; el texto en pantalla permanece en el idioma que necesite el video. No searchable words in query significa exactamente esto y no es un componente faltante, así que no lo informes como una brecha del catálogo.

  • Lee qué nivel respondió; nunca lo infieras por la aparición de resultados. Con --json, el sobre lleva query, tier (on-device o words), tier_detail, dropped, unindexed, shown, total y results, más top_score cuando el nivel que responde produce uno y warnings cuando se solicitó un nivel y no pudo ejecutarse, o cuando una búsqueda no devolvió nada y un mejor nivel aún espera el consentimiento de alguien. Un resultado débil en words es esperado; el mismo resultado en on-device es un error. top_score es solo para el dispositivo y no tiene un umbral detrás: el clasificador devuelve todo el catálogo en algún orden para cada consulta, así que léelo como evidencia, no como aprobación o fallo.

  • dropped y unindexed son sesgos opuestos entre el registro y el índice del dispositivo, y reformular la consulta no soluciona ninguno. dropped cuenta los nombres clasificados que este registro no puede instalar, por lo que las coincidencias más fuertes son las que se pierden. unindexed cuenta los movimientos del registro que el índice no puede ver en absoluto, que ninguna consulta puede devolver nunca. Actualizar el registro no es la respuesta para ninguno de los dos: su manifiesto tiene un TTL de 24h y se cura solo, mientras que los vectores son un artefacto publicado por separado que se obtiene en ~/.hyperframes/catalog/. Volver a ejecutar con --on-device vuelve a obtener ese índice cuando unindexed es mayor que cero, por lo que ese es el remedio que se le debe dar al usuario. Un sesgo puro de sobrecobertura (dropped por encima de cero mientras unindexed es cero) no activa la recuperación; borrar ~/.hyperframes/catalog/ es la única salida de esa situación. Ambos recuentos son de nombres en lugar de resultados, por lo que cualquiera puede exceder total.

  • Cuando una búsqueda no devuelve nada que valga la pena instalar, dilo. npx hyperframes feedback --search-miss "<la consulta que ejecutaste>" --wanted "<el movimiento que necesitabas>" --tier <el nivel que respondió>. No tienes que ensamblar esa línea: catalog --query la imprime precompletada, y cada sobre de búsqueda --json la lleva como report_gap con la consulta y el nivel ya correctos — completa --wanted y envíalo. Esta es la única ruta que envía una consulta a algún lado, y es un comando deliberado separado precisamente para que el simple catalog --query mantenga su promesa de no enviar nada. Informa en cualquier nivel, cada vez que los resultados no hagan lo que se necesita; no esperes al nivel del dispositivo, que necesita una descarga consentida de 33 MB y, por lo tanto, está desactivado en la mayoría de las ejecuciones de agentes: esperarlo significa nunca informar. El nivel viaja en el informe, por lo que un error de vocabulario sigue siendo distinguible de un error de significado sin que tengas que juzgar cuál acertaste. Lo que se devuelve es una lista de movimientos que el catálogo aún no tiene, leída directamente en lugar de adivinada a partir de los recuentos de instalación, por lo que la redacción que importa es el efecto que querías, no el nombre del elemento que imaginaste. No lleva calificación y nunca llega a la métrica de calificación.

  • Ofrece el nivel fuera de línea; nunca lo habilites silenciosamente. Una descarga única de ~33 MB (una compilación ONNX cuantificada de bge-small-en-v1.5 más su tokenizador, fijada a una revisión fija) y los vectores del catálogo del registro, ambos almacenados en caché en ~/.hyperframes/, sin agregarse al proyecto ni a ningún paquete. Una vez en caché, clasifica por significado sin enviar nada. Di el tamaño en voz alta y deja que la persona decida, luego pasa --on-device (con -y para omitir la solicitud) una vez que esté de acuerdo. La oferta interactiva solo se activa en una TTY. Bajo --json no hay solicitud, pero una búsqueda que no encontró nada pone la misma pregunta en warnings, así que lee esa matriz y pon la decisión al usuario tú mismo. Cuando la persona pregunte qué es la descarga, por qué este modelo o qué sale de la máquina, dirígelos a https://hyperframes.heygen.com/developers/catalog-search.

  • Prefiere --json para llamadas de agente y CI. Los modos de servidor render, preview y play no proporcionan salida JSON ordinaria; preview --selection --json y preview --context --json son excepciones de modo de consulta.

  • doctor --json siempre sale con cero. Filtra en su carga útil:

    npx hyperframes doctor --json | jq -e '.ok' >/dev/null
    
  • El modo sin TTY es automático y prepara el espacio en blanco centrado. Pasa --example solo para comenzar desde un ejemplo con nombre. Usa --non-interactive para forzar el modo solo de banderas en una TTY.

  • Usa un HYPERFRAMES_RUN_ID para todos los comandos en el mismo bucle de verificación.

  • Cuando el disco esté apretado, ejecuta npx hyperframes clean (--dry-run para listar primero); elimina lo que dejaron los renderizados muertos y los cachés inactivos que se reconstruyen solos, nunca salidas, fuentes ni nada que use un renderizado en ejecución. Escribe los fotogramas de QC en un directorio temporal, no en el proyecto.

  • Usa --strict, --strict-all y --strict-variables cuando las advertencias, variables o condiciones de CI correspondientes deban bloquear el renderizado.

  • Las rutas JSON redactan el directorio de inicio como $HOME; no intentes revertir la redacción.

  • Cuando un proyecto en la nube alojada se acerque o supere el límite de carga de 200 MB, usa cloud render --dry-run --json y sigue la investigación de .hyperframesignore en references/cloud.md. Nunca ignores un activo simplemente porque sea grande.

  • Nunca renderices solo porque las verificaciones pasen. Pausa en la vista previa final y espera la aprobación.

Ediciones dirigidas por Studio

Cuando el usuario se refiera a "este elemento" o a la selección actual, consulta Studio en lugar de adivinar:

npx hyperframes preview --context --json --context-fields selection

Usa selection.target.hfId cuando esté disponible, de lo contrario su selector y archivo fuente. Si el resultado informa no-selection, pide al usuario que haga clic en el elemento y vuelve a ejecutar. Solicita solo las porciones de contexto que necesites; usa --context-detail full solo para estilos calculados o metadatos de texto editables. El comportamiento completo y los códigos de fallo se encuentran en references/preview-render.md.

Opciones de renderizado

NecesidadComando
Iteración local rápidanpx hyperframes render --quality draft
Primera codificación realnpx hyperframes render --quality looks --output out.mp4
Entrega local finalnpx hyperframes render --quality delivery --output out.mp4
Renderizado de contenedor reproduciblenpx hyperframes render --docker --strict --output out.mp4
Renderizado por lotes local basado en variablesnpx hyperframes render --batch rows.json --output "renders/{name}.mp4"
Renderizado sin infraestructura alojado por HeyGennpx hyperframes cloud render
Renderizado distribuido autogestionado en AWSnpx hyperframes lambda
Renderizado sin servidor en Google Cloud Runnpx hyperframes cloudrun
# Ejemplo de un bucle de verificación típico
export HYPERFRAMES_RUN_ID=$(uuidgen)
npx hyperframes lint
npx hyperframes check
npx hyperframes preview --background
npx hyperframes render --quality looks --output out.mp4

Comandos adicionales

  • Transcripción: npx hyperframes transcribe <archivo>
  • Autenticación: npx hyperframes auth
  • Texto a voz: npx hyperframes tts "<texto>"
  • Eliminar fondo: npx hyperframes remove-background <imagen>

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

AntlersSam/saas-launch-video-kit

Author or edit a custom HyperFrames composition when no specialized workflow fits, or when BRIEF.md sets flow: companion. Use for longer or multi-scene pieces, brand and sizzle reels, montages, static loops, static title cards, footage remixes, and freeform builds. Use motion-graphics instead for a short unnarrated motion-first unit, including an animated title. Route fresh creation through hyperframes before using this skill.

AntlersSam/saas-launch-video-kit

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

AntlersSam/saas-launch-video-kit

Use when audio already placed in a HyperFrames composition needs to be mixed: fade-in/fade-out, crossfade, track gain or volume, volume automation, ducking, a music bed that fights a voiceover (voiceover carve), effects on a track (EQ, compressor, limiter, gate, saturation, delay, reverb, chorus, phaser, bitcrush), automation envelopes drawn on a track's volume or any effect parameter, or one submix bus carrying a chain, a fader and an automation clock for several tracks at once (`<hf-audio-group>`). Don't use for sourcing or generating audio — finding BGM, SFX, or making a voiceover is `/media-use`. Don't use for clip timing or track layout, which is `/hyperframes-core`.

AntlersSam/saas-launch-video-kit

The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class="clip"`, tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Skills relacionados