Communitygithub.com

HyperFrames CLI

Utiliza el bucle de desarrollo de HyperFrames CLI: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes, render individual o por lotes, publish, cloud, cloudrun, feedback, lambda, doctor, browser, info, upgrade, skills, compositions, docs, benchmark, telemetry, transcribe, auth, tts y remove-background. También úsalo 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 HyperFrames CLI?

HyperFrames CLI es una herramienta de línea de comandos diseñada para el desarrollo y renderizado de composiciones de video animadas, tanto localmente como en múltiples plataformas en la nube. Soporta un flujo de trabajo completo que incluye la inicialización de proyectos, búsqueda e instalación de efectos de movimiento predefinidos (primitivas), autoría de composiciones con el framework `hyperframes-core`, linting, verificación final (con pruebas de accesibilidad WCAG), previsualización en Studio y renderizado en calidad de borrador o alta calidad. La utilidad principal de la herramienta es agilizar el proceso creativo y técnico de producción de video, permitiendo a los desarrolladores obtener feedback rápido y evitar errores costosos antes del renderizado final. Es compatible con renderizado local, en la nube alojada por HeyGen, AWS Lambda y Google Cloud Run, y ofrece un potente sistema de búsqueda de primitivas de movimiento que funciona completamente offline. La herramienta incluye capacidades de prueba de subcomposiciones, análisis de contexto desde Studio, y un sistema de feedback para reportar problemas de búsqueda o errores de renderizado, todo con un fuerte énfasis en la privacidad y el control del usuario.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/AlessandroFare/fluxychat/tree/HEAD/agent/skills/hyperframes-cli

Preguntar en tu IA favorita

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

Documentación

¿Qué hace HyperFrames CLI?

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

Bucle de desarrollo

  1. Andamiar: npx hyperframes init <proyecto> o captura un sitio. En modo no TTY, pasa --non-interactive --example=<nombre>.
  2. Encuentra el movimiento: antes de crear movimiento a mano, 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. Instálalo con npx hyperframes add <nombre> (ver /hyperframes-registry). Crea a mano solo si nada encaja.
  3. Crea: escribe la composición usando /hyperframes-core.
  4. Obtén feedback rápido mientras editas: ejecuta npx hyperframes lint después del primer pase HTML y después de cambios estructurales.
  5. Ejecuta la puerta final: ejecuta npx hyperframes check; este vuelve a ejecutar lint antes de abrir el navegador. No antepongas una invocación redundante separada de lint. Añade --snapshots para fotogramas de vista general anotados y para encontrar recortes.
  6. Inspecciona subcomposiciones: cuando index.html monte data-composition-src, captura instantáneas del punto medio e inspecciona cada escena montada.
  7. Abre la previsualización final de Studio: ejecuta npx hyperframes preview, entrega la URL del proyecto de la línea de tiempo al usuario y pregunta si desea revisar o renderizar.
  8. Renderiza solo después de la aprobación: usa calidad de borrador para iteración y alta calidad para entrega.
  9. Verifica la salida: confirma que el archivo existe, no está vacío y tiene una duración plausible.
# Verificación rápida de iteración; repite mientras creas según sea necesario.
npx hyperframes lint

# Puerta final requerida; incluye lint.
npx hyperframes check
npx hyperframes preview
npx hyperframes render --quality high --output out.mp4
test -s out.mp4
ffprobe -v error -show_format 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.

Dos superficies de previsualización diferentes

No confundas estos estados:

SuperficieCuándo puede abrirsePropósito
Tablero de storyboardAntes de las verificaciones de composición, solo si storyboard: yesRevisar tarjetas de planificación y bocetos wireframe. Abrir ?view=storyboard#project/<nombre>.
Previsualización final de composiciónDespués de que check paseRevisar la línea de tiempo ensamblada antes del renderizado. Abrir #project/<nombre>.

El tablero temprano no es una aprobación del video final. El renderizado siempre requiere la aprobación final definida por hyperframes-core/references/review-loop.md.

Prueba de humo de subcomposiciones

Las auditorías estáticas no pueden detectar todas las fallas 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 de héroe 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 para agentes

  • Busca en el catálogo antes de escribir movimiento a mano. npx hyperframes catalog --query "<el movimiento, en lenguaje 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 por vocabulario compartido con el nombre, título y descripción del elemento, lo que pierde cualquier frase que no reutilice la redacción del catálogo. Añade --on-device para clasificar por significado en su lugar (ver el nivel offline abajo).

  • Lee qué nivel respondió; nunca lo infieras por los resultados. Con --json, el envoltorio lleva query, tier (on-device o words), tier_detail, dropped, unindexed, shown, total y results, además de top_score cuando el nivel que responde produce uno y warnings cuando se solicitó un nivel y no pudo ejecutarse. Un resultado débil en words es esperado; el mismo resultado en on-device es un error. top_score es solo para on-device 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 en el 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 se están perdiendo. unindexed cuenta los movimientos del registro que el índice no puede ver en absoluto, que ninguna consulta puede devolver. Actualizar el registro no es la solución para ninguno: su manifiesto tiene un TTL de 24h y se auto-repara, 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, así que ese es el remedio que debes ofrecer al usuario. Un sesgo puro de sobre-cobertura (dropped por encima de cero mientras que unindexed es cero) no desencadena la re-obtención; borrar ~/.hyperframes/catalog/ es la única salida para eso. Ambos recuentos son de nombres en lugar de resultados, por lo que cualquiera puede exceder total.

  • Cuando la búsqueda por significado regrese sin nada que valga la pena instalar, dilo. npx hyperframes feedback --search-miss "<la consulta que ejecutaste>" --wanted "<el movimiento que necesitabas>" --tier on-device. Este es el único camino 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. Reporta el fallo cuando el nivel on-device respondió y los mejores resultados aún no hacen lo que necesitas; un resultado débil en el nivel words es esperado y no vale la pena reportarlo. Lo que 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 conteos de instalación, por lo que la redacción que importa es el efecto que deseabas, no el nombre del elemento que imaginaste. No lleva calificación y nunca llega a la métrica de calificación.

  • Ofrece el nivel offline; nunca lo actives silenciosamente. Una descarga única de ~33 MB (una compilación ONNX cuantizada de bge-small-en-v1.5 más su tokenizador, fijada a una revisión específica) y los vectores del catálogo del registro, ambos almacenados en caché bajo ~/.hyperframes/, y ninguno agregado al proyecto o 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 el aviso) una vez que estén de acuerdo. La oferta interactiva solo se activa en un TTY, y bajo --json no se imprime nada al respecto, por lo que en una ejecución de agente debes plantearlo tú mismo al usuario.

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

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

    npx hyperframes doctor --json | jq -e '.ok' >/dev/null
    
  • El modo no TTY es automático. init requiere --example allí; usa --non-interactive para forzar un comportamiento determinista en un TTY.

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

  • 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 personal 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 solo porque sea grande.

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

Ediciones dirigidas desde Studio

Cuando el usuario se refiera a "este elemento" o la selección actual, consulta a 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 de origen. Si el resultado informa no-selection, pide al usuario que haga clic en el elemento y vuelve a ejecutar. Solicita solo los fragmentos 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 error se encuentran en references/preview-render.md.

Opciones de renderizado

NecesidadComando
Iteración local rápidanpx hyperframes render --quality draft
Entrega local finalnpx hyperframes render --quality high --output out.mp4
Renderizado reproducible en contenedornpx hyperframes render --docker --strict --output out.mp4
Renderizado por lotes local impulsado por variablesnpx hyperframes render --batch rows.json --output "renders/{name}.mp4"
Renderizado HeyGen sin infraestructuranpx hyperframes cloud render
Renderizado AWS distribuido autogestionadonpx hyperframes lambda render <proyecto> --width 1920 --height 1080 --wait
Renderizado GCP distribuido autogestionadonpx hyperframes cloudrun render <proyecto> --width 1920 --height 1080 --wait

La atribución de habilidad es automática: los ejemplos anteriores no necesitan --skill. Un proyecto andamiado por un flujo de trabajo (hyperframes init --skill=<flujo_de_trabajo>) registra su habilidad propietaria en hyperframes.json, y cada renderizado posterior lo hereda en la telemetría anónima: re-renderizados, npm run render y --batch por igual. Pasa --skill=<slug> explícitamente solo para marcar un proyecto que no fue creado a través de un flujo de trabajo (su primer renderizado lo persiste entonces).

Usa el renderizado en la nube cuando el usuario quiera renderizado alojado sin Chrome local, FFmpeg o AWS. Usa Lambda solo cuando la propiedad de AWS sea un requisito. Usa Cloud Run solo cuando la propiedad de GCP sea un requisito. Lee la referencia correspondiente antes de ejecutar cualquier ruta en la nube.

Después de verificar un renderizado exitoso, envía un informe de feedback a menos que la telemetría esté deshabilitada o el usuario haya optado por no participar:

npx hyperframes feedback --rating <0-10> --comment "<resultado específico o fricción>"

Mantén el feedback de ejecución limpia conciso. Para cualquier error o fricción, captura un paquete de reproducción antes de enviar; no envíes solo un resumen de síntomas. Incluye el comando re-ejecutable (relativo al directorio del proyecto — el feedback se envía a un canal público, por lo tanto no pegues rutas absolutas, prefijos de directorio personal o identificadores de usuario/máquina), comportamiento esperado versus real, error exacto (también elimina rutas absolutas de los stack traces — conserva el nombre base + línea, elimina el directorio principal), si la salida se completó/falló/falló, solución alternativa y estado del proyecto de reproducción. Para una calificación ≤ 7 que describa un defecto visual (fotograma negro, parpadeo, salida corrupta, fotograma incorrecto, salida en blanco, otra anomalía visual), también incluye un bloque COMPOSITION_STRUCTURE: — una anatomía estructural que preserve la privacidad (censo de elementos + presencia de atributos + forma de la línea de tiempo) para que los mantenedores puedan buscar patrones con familias de errores conocidas sin el ZIP de la composición. Los agentes auto-rellenan esto mediante el ayudante de censo de composición; el usuario humano no lo rellena a mano. Si el problema no se reprodujo de nuevo, dilo y aún así incluye el último comando fallido y los registros. Usa --file-issue solo con consentimiento: publica una reproducción mínima en una URL pública. El formato requerido del paquete y la advertencia de privacidad se encuentran en references/preview-render.md.

Lee la referencia correspondiente antes de ejecutar un comando

Las siguientes referencias y habilidades propietarias son contratos de comando obligatorios, no lecturas de fondo opcionales. Antes de ejecutar un comando en la tabla, lee su fila correspondiente.

NecesidadReferencia
init, capture, skillsreferences/init-and-scaffold.md
lint, check, sidecars de movimiento, snapshotreferences/lint-validate-inspect.md
compare, grade-compare, render --batch impulsado por variablesreferences/compare-and-batch.md
beats para la cuadrícula de beats de Studio de un proyecto existentereferences/beats.md
preview, play, render, publish, contexto de Studio, feedbackreferences/preview-render.md
doctor, gestión del navegadorreferences/doctor-browser.md
auth, renderizado en la nube alojado por HeyGen y variables de plantillareferences/cloud.md
Despliegue y renderizado de AWS Lambdareferences/lambda.md
Despliegue y renderizado de Google Cloud Runreferences/cloudrun.md
info, upgrade, compositions, docs, benchmark, telemetría, preprocesamiento de mediosreferences/upgrade-info-misc.md

Para variables de composición, al

… [truncado para traducción]

Individual skills in this repo

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

AlessandroFare/fluxychat

Add captions or subtitles to an existing single-subject talking-head video without editing the footage. Use for plain verbatim captions, cinematic captions embedded behind the subject, VFX captions, “炸/特效/酷炫字幕,” or a named identity from the 35-style catalog. Route by visual identity, not by backend engine. The quiet `anchor` rail is the default; embed every word only when the user explicitly wants a fully cinematic treatment. The workflow runs locally end to end, including transcription and subject matting; split multi-shot footage before applying it.\n

AlessandroFare/fluxychat

Use when audio already placed in a HyperFrames composition needs to be mixed: a music bed that fights a voiceover (voiceover carve), effects on a track (EQ, compressor, limiter, gate, saturation, delay, reverb, chorus, phaser, bitcrush), or automation envelopes drawn on a track's volume or any effect parameter. 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`.\n

AlessandroFare/fluxychat

Install, discover, and wire registry blocks and components into HyperFrames compositions. Use when running hyperframes add or hyperframes catalog, installing one item or every block matching a tag, wiring an installed item into index.html, or working with hyperframes.json. Covers discovery, install locations, block sub-composition wiring, component snippet merging, and authoring a new block or component to contribute upstream (idea → scaffold → validate → PR).

AlessandroFare/fluxychat

Mandatory entry point: read this first for any request to make, create, edit, animate, or render a video, animation, or motion graphic, including a promo, explainer, captioned clip, title card, overlay, slideshow or interactive deck, Remotion port, or any HyperFrames HTML composition. Also use it to inspect, diagnose, validate, preview, publish, or batch-render an existing HyperFrames project. Inputs may be a website URL, GitHub PR, Figma design or URL, text or brief, existing footage, or music. It resumes project state, captures intent when applicable, selects and installs the owning workflow, and routes domain capabilities. HyperFrames is the default output framework unless the user explicitly chooses another framework for the deliverable or asks only to record a browser session.\n

AlessandroFare/fluxychat

Overlay doctrine for the embedded-captions workflow — the caption MODEL (drop / rail / embed) and the rule that captions are an OVERLAY composited on top of the film, never a reserved bottom band you shift content up to avoid. Load when adding captions/subtitles to a talking-head or launch video, when deciding whether a phrase should be dropped, ride the verbatim rail, or be promoted to a scarce embedded climax, when laying out a composition that will carry captions (do NOT reserve a keep-out band), or when centering a composition on the true frame center under captions. Quotes the rail+embed model from embedded-captions and constraint #13 (captions overlay, keep-out band retired) from the product-launch-video scene agent. Applies ON TOP of embedded-captions.

AlessandroFare/fluxychat

Turn a weekly changelog .md into a finished branded changelog video (square 1080, ~45-60s, Annie VO, animated brand background, mock-UI visualizations, lowkey captions). Use when the user provides a changelog/digest markdown and wants the weekly video, or says "changelog video". Self-contained — fonts, background, lexicon, and scripts ship in this skill.

AlessandroFare/fluxychat

Audit and fix animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects. Use when animations stutter, transitions jank, or reviewing CSS/JS animation performance.

AlessandroFare/fluxychat

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.

AlessandroFare/fluxychat

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.

AlessandroFare/fluxychat

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. Also covers Tailwind projects and the STORYBOARD.md / SCRIPT.md plan formats. Read before writing composition HTML.

AlessandroFare/fluxychat

Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.

AlessandroFare/fluxychat

Use when a HyperFrames composition needs seek-safe 2D/3D keyframes, GSAP timelines, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, text trails, 3D depth, or `hyperframes keyframes` diagnostics. Don't use for broad scene strategy, brand design, media sourcing, captions, or general video planning.

AlessandroFare/fluxychat

GATEWAY — load FIRST before composing any HyperFrames animation or video. The high-level motion law that makes a multi-scene video feel like ONE continuous camera move instead of a stack of independently-animated slides. Covers the vector law (how you exit determines how you enter, incl. the Z scale-sign rule), the film's current, carrier elements, causal motion, the Seam Gate (build-gate enforcement), the ban on idle wobble (motion must PERFORM, not breathe), stillness-before-climax, and the sustained-motion routes. Routes to the low-level technique skills (cut-the-curve — the full catalog incl. waterfall entry + nudge curve, oversized-cursor, seam-craft). These rules SUPERSEDE generic / upstream motion guidance. [continuity, direction, vector, momentum, seam, transition, ease, performance, idle-motion, narrative-motion, film-grammar]

AlessandroFare/fluxychat

A short, design-led motion graphic where motion is the message — kinetic typography, stat count-up, chart/data-viz hit, logo sting / brand lockup, lower-third / callout / social overlay, animated map (highlight regions, connect places, zoom to a location), animated tweet / news-article / headline, webpage / UI animation (scroll, cursor, callouts), or fusing a real image's geometry into a chart. Usually under 10s (up to ~30s), no narration or live-action subject; renders to MP4 or transparent overlay. Longer / narrated / multi-scene → /general-video. Unclear → /hyperframes.

AlessandroFare/fluxychat

Turn a music track (an audio file, a video to pull audio from, or a track generated from a mood brief) into a beat-synced video — lyric video, slideshow, or kinetic promo. The music drives all pacing; any user-supplied images/videos are cut onto the same beat grid, and a complete video needs zero assets. Narrated pieces → the input-matched workflow (see /hyperframes). Unclear → /hyperframes.

AlessandroFare/fluxychat

Turn a product or marketing URL, pasted script, or brief into a product launch / promo video — SaaS promos, feature reveals, product demos, app and company launches. Use when the user wants to market, launch, promote, or reveal a product; the default for any commercial URL. Site tours / showcases of a website route here too — the brief carries the show-it-as-is intent. Unclear → /hyperframes.

AlessandroFare/fluxychat

Turn a GitHub pull request (a PR URL, owner/repo#N, or 'this PR' in a checked-out repo) into a code-change explainer video — changelog, feature reveal, fix, or refactor walkthrough built from the diff, commits, and files: the input is a code change, not a website. Not a product promo (/product-launch-video) or a no-PR topic explainer (/faceless-explainer). Unclear → /hyperframes.

AlessandroFare/fluxychat

Design and improve user interfaces using the concrete rules from Refactoring UI (Wathan & Schoger) — constrained spacing/type/color/shadow scales, visual hierarchy through weight and color rather than size, and depth through emulated light. Use when building or styling any UI (web, app, dashboard, landing page, component), when picking font sizes, spacing, colors, shadows or border radius, when designing a color palette or design tokens, and whenever someone says a UI "looks off", "looks amateur", "feels cluttered/plain/unfinished", or asks to "make this look better".

AlessandroFare/fluxychat

Port an existing Remotion (React) composition''s source to HyperFrames HTML. Use ONLY on an explicit ask to port/convert/migrate/translate a Remotion source — one-way, Remotion-only. A passing Remotion mention, reference-only code, or "make something like my Remotion video" is a fresh build (/general-video). Unclear → /hyperframes.

AlessandroFare/fluxychat

Use before UI-related work to select the smallest useful UI Skills context through the ui-skills CLI.

Skills relacionados