Communitygithub.com

general-video

Habilidad para crear, editar y gestionar proyectos de video usando HyperFrames con un flujo de trabajo estructurado y adaptadores de código abierto.

¿Qué es general-video?

La habilidad 'general-video' de HyperFrames es un flujo de trabajo integral para la creación, edición y gestión de proyectos de video. Está diseñada para desenvolverse de manera autónoma o colaborativa (flujo 'companion'), partiendo del estado del proyecto y aplicando las adaptaciones necesarias para recursos multimedia y de Figma. Su propósito es guiar al agente de IA en la toma de decisiones de producción, desde la interpretación del 'brief' hasta la ejecución de la composición, utilizando terminología canónica para evitar ambigüedades. Es útil porque centraliza las mejores prácticas de edición de video, gestión de activos, animación y postproducción, reduciendo la improvisación y mejorando la coherencia del resultado final. La habilidad se apoya en una serie de referencias y scripts (como 'hyperframes-core', 'hyperframes-creative' y 'hyperframes-animation') para garantizar que cada etapa del proceso se ejecute correctamente, y proporciona un catálogo de bloques y componentes predefinidos que se pueden buscar e instalar sin necesidad de un proyecto previo.

Compatible con~Claude Code✓Codex CLI~Cursor
npx skills add https://github.com/heygen-com/hyperframes/tree/main/skills/general-video

Preguntar en tu IA favorita

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

Documentación

General video

Antes de confiar en este flujo de trabajo, ejecuta:

npx hyperframes skills update general-video

Un no-op exitoso significa que la habilidad está actualizada. Reporta un fallo de actualización en lugar de continuar desde la memoria.

1. Aplicar adaptadores de fuente transversales

  • Media: Para cualquier necesidad de audio, imagen, icono, logotipo, voz, etalonaje, LUT, tratamiento/efecto, subtítulo u operación multimedia, carga /media-use y sigue ../media-use/references/resolve.md (resolver, adoptar, reutilizar) y ../media-use/references/setup-providers.md (proveedores, autenticación). Los comentarios vagos sobre metraje y los estilos nombrados utilizan ../media-use/references/media-treatments.md antes de editar; no improvises efectos multimedia compatibles con CSS/SVG/opacidad. Antes de la primera acción autenticada de un proveedor, ejecuta npx hyperframes auth status y transmite su salida textualmente. Si no has iniciado sesión, aplica la compuerta en ../hyperframes/references/brief-contract.md: colaborativo espera el inicio de sesión o una elección explícita de trabajar sin conexión; autónomo indica el estado y continúa a través de un proveedor sin conexión disponible. Reporta un bloqueo cuando ningún proveedor sin conexión pueda satisfacer una capacidad requerida. La adopción local por sí sola no requiere una compuerta de autenticación.
  • Figma: Si alguna entrada es una URL figma.com, ejecuta /figma primero. Construye a partir de sus activos exportados, tokens, componentes o fotogramas del storyboard. No uses llamadas directas al conector de Figma porque omiten la sanitización de SVG, la procedencia de los medios y la vinculación de tokens de marca.

Estos adaptadores no cambian el flujo de trabajo seleccionado por /hyperframes.

2. Iniciar desde el estado del proyecto

Aplica la primera fila coincidente; no evalúes filas de estado inferiores:

EstadoAcción
Edición específicaHaz la edición, preserva las decisiones existentes del proyecto, luego vuelve a ejecutar las comprobaciones afectadas. No reabras el descubrimiento.
BRIEF.md existeLée esto. Si workflow nombra otro flujo de trabajo y flow no es companion, entrega la tarea. No hagas preguntas sobre el brief.
Sin brief, pero existen hyperframes.json o STORYBOARD.mdReanuda a partir de los archivos y las preferencias registradas. Rellena BRIEF.md solo con hechos conocidos.
Creación nuevaEjecuta /hyperframes y su capa de intención. Vuelve aquí solo para workflow: general-video o flow: companion.

Para un nuevo proyecto, elige un nombre de directorio en kebab-case a partir del brief y crea el andamio antes de escribir el brief:

npx hyperframes init "videos/<project>" --non-interactive --example=blank --skill=general-video

Luego escribe BRIEF.md en la raíz del proyecto usando ../hyperframes/references/brief-format.md. En un proyecto existente, la raíz es el directorio que contiene hyperframes.json. Registra solo los campos respaldados por preferencias confirmadas que nombra el formato del brief, usando node <MEDIA_DIR>/scripts/prefs.mjs record --hyperframes <PROJECT_ROOT>; nunca registres valores predeterminados inferidos. Aquí <MEDIA_DIR> es el directorio de la habilidad /media-use instalada y <PROJECT_ROOT> es el directorio que contiene hyperframes.json. Si la capa de intención adoptó una receta, aplícala ahora con node <MEDIA_DIR>/scripts/recipe.mjs use --hyperframes <PROJECT_ROOT> --name <name> y no preguntes de nuevo.

3. Interpretar la forma de la ejecución

Usa solo los términos canónicos de ../hyperframes/references/brief-contract.md:

CampoSignificadoEfecto
flowQuién dirigeautomation: elige y ejecuta la ruta. companion: co-crea en conversación.
storyboardPlanificar, esbozar y revisar antes de construiryes: ejecuta la revisión del plan y el boceto (storyboard.html). no: construye sin ello.
mode derivadoCómo se comportan las compuertas de verificaciónSigue el contrato del brief. Nunca preguntes al usuario que nombre un modo.

No inventes sinónimos para estos estados. Una señal continua de "solo construye" es manejada por la capa de intención y llega como flow: automation, storyboard: no.

  • Para flow: automation, elige la ruta y exponla en una línea en la primera actualización de progreso.
  • Para una edición específica, haz la edición sin inventar una nueva ruta.

Para un corte duro, recorte, empalme o reordenación de metraje existente, duplica la misma fuente de video en múltiples elementos de clip. En cada copia, establece el rango de origen con data-media-start más data-duration, luego establece la ubicación/orden creados con data-start. El audio creado por separado sigue los rangos de clip y la sincronización idénticos en elementos <audio> coincidentes. /hyperframes-core posee esta edición temporal; usa /hyperframes-keyframes solo para la animación de propiedades visuales como zoom, perforación, paneo, recorte, máscara o clip-path en un envoltorio interno. Copia los contratos completos de ../hyperframes-core/references/creator-editing-recipes.md.

Flujo de compañero

Cuando flow: companion:

  • Lee BRIEF.md y concilia las secciones ## Assets y ## Customizations aceptadas con los artefactos del proyecto. Completa el trabajo aceptado que aún esté pendiente; deja el trabajo completado en paz; no ofrezcas una capacidad aceptada nuevamente como si fuera nueva.
  • Llega como el director, no como el contratista. Un usuario que eligió compañero eligió implicación y calidad; la respuesta honesta es la mejor versión que puedas diseñar, no la más pequeña que puedas defender. El primer plano es el tratamiento techo: el arco argumental (toma prestada la lente de género más cercana — menú § Lentes de género), la especificación de diseño, el tratamiento de movimiento de cada escena citado por su nombre (§ 5's plan discipline), las transiciones, la identidad de audio — música y marcas sonoras, o silencio deliberado — el material del usuario colocado, y una apertura y cierre diseñados. Di qué añade cada capa en una línea; marca las caras (tiempo de renderizado, inicio de sesión, facturación) al nombrarlas. El usuario recorta un tratamiento; nunca debería tener que montar uno aprobación por aprobación.
  • El techo pertenece al concepto, no a la caja de herramientas. Cada capa debe servir al mensaje del brief — un tratamiento que vistiera cualquier video de la misma manera es decoración. La artesanía se eleva al techo; el contenido nunca crece más allá de lo que se pidió (§ 6).
  • Entre compuertas de verificación, ../hyperframes/references/capability-menu.md funciona de dos maneras. Como lista de activación: ofrece una capacidad relevante cuando el usuario menciona su entrada o la construcción alcanza su necesidad. Como canal de actualización de cada pase: una compuerta de plan, boceto o construcción puede llevar una o dos ofertas rastreadas apuntando al material que el usuario está mirando ("el estadístico de la escena 3 quiere el tratamiento de cuenta regresiva"). Lée esto antes de ofrecer; nunca vuelques el catálogo completo.
  • Después de que el usuario acepte una capacidad, produce su artefacto y registra la decisión en la sección del cuerpo de BRIEF.md correspondiente de inmediato. Reescribe un campo del frontmatter y registra la preferencia confirmada solo cuando el usuario la cambie explícitamente.
  • Mantén las mismas compuertas de storyboard, validación, vista previa final y aprobación de renderizado. Compañero cambia quién dirige, no lo que exige la calidad.

4. Cargar el conocimiento requerido antes de cada etapa

Estas lecturas son obligatorias cuando su condición coincide:

CondiciónLeer antes de actuar
Cualquier HTML de composición o diseño de escena/hyperframes-core; usa references/determinism-rules.md para su contrato de diseño
Cualquier creación no trivial o tratamiento visual/hyperframes-creative → references/house-style.md y references/video-composition.md
Cualquier movimiento, animación o transición de escena/hyperframes-animation; sigue su enrutamiento a las reglas, adaptadores, planos o referencias de transición coincidentes
storyboard: yes../hyperframes/references/storyboard-format.md y ../hyperframes/references/review-loop.md
Cualquier activo u operación multimedia, incluyendo narración, BGM, SFX, subtítulos, etalonaje o transformaciones/media-use; para reproducción y colocación en el framework también lee /hyperframes-core → references/variables-and-media.md
Ensamblaje de múltiples escenas../hyperframes/references/production-loop.md
flow: companion, antes del primer plan/hyperframes-creative → references/story-spine.md y references/house-style.md; la lente de género más cercana y el ../hyperframes/references/capability-menu.md completo — el tratamiento techo se diseña a partir de estos, no se recuerda
Una oferta de capacidad de compañero, captura, cuadrícula de tempo, video generativo, mapa, publicación o capacidad de flujo de trabajo cruzado../hyperframes/references/capability-menu.md
Existe una especificación de diseño, antes de la aprobación final/hyperframes-creative → references/design-adherence.md

No reemplaces estas lecturas con el recuerdo. La divulgación progresiva ahorra contexto solo cuando la referencia coincidente se carga realmente.

5. Ejecutar la composición

Usa este orden de dependencia. Salta una etapa solo cuando su entrada esté ausente.

  1. Plan. Indica el arco del espectador, la estructura, el ritmo y el controlador de duración. Usa un archivo para una escena única corta; usa subcomposiciones para tres o más cortes duros de escena o cualquier escena reutilizada. Lee /hyperframes-creative → references/story-spine.md para arcos narrados, references/beat-direction.md para el ritmo y /hyperframes-core → references/composition-patterns.md para la estructura. Para un brief de múltiples escenas abierto, expande la indicación a través de /hyperframes-creative → references/prompt-expansion.md. Un plan de múltiples escenas cita la forma de cada escena: un id de plano de /hyperframes-animation → blueprints-index.md cuando uno encaja, o las reglas con nombre que lo componen de rules-index.md cuando ninguno lo hace — los nombres de movimiento provienen de esos índices, nunca inventados. La verdad de la historia decide qué escenas existen; la cita las viste. Busca en el catálogo en vivo antes de planificar construir cualquier aspecto nombrado por ti mismo: para cada aspecto, efecto, tratamiento o transición que nombre el brief — "líneas de barrido CRT", "glitch", "grano de película", "barrido de brillo", "explosión de confeti" — ejecuta npx hyperframes catalog --query "<el aspecto, en inglés simple>" --json y lee los mejores resultados antes de que el plan nombre cómo se construye ese aspecto. La búsqueda no necesita nada instalado: sin proyecto, sin add previo, sin cuenta. Clasifica todo el registro alojado (~400 bloques y componentes) desde cualquier directorio, por lo que también se aplica a un aspecto que el usuario solicite a mitad de la construcción. Los bloques que el plan nombra se instalan en la etapa 3; crea un aspecto manualmente solo después de que una búsqueda no haya devuelto nada que encaje. Un plan de múltiples escenas también se registra como el artefacto de despacho: un bloque ## Frame N por escena en STORYBOARD.md — status: outline, un src: declarado, la cita del plano/reglas y el texto del tempo — incluso cuando storyboard: no. El bloque es la unidad de despacho; la hoja del storyboard es solo la superficie de revisión.
  2. Revisar el plan cuando se solicite. Para storyboard: yes, ejecuta el bucle de revisión compartido sobre esos bloques. Para storyboard: no, continúa sin una pausa de plan u hoja de boceto. Cuando se produzca una pausa de plan de todos modos, incorpora la concesión de delegación del subagente (necesaria por codex para el paso 4 de despacho) en esa pausa en lugar de detenerte de nuevo más tarde.
  3. Resolver dependencias. Instala bloques del registro antes del trabajo en paralelo. Organiza los activos del usuario, adopta los existentes...

Individual skills in this repo

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

heygen-com/animejs

Anime.js adapter patterns for HyperFrames. Use when writing Anime.js animations or timelines inside HyperFrames compositions, registering animations on window.__hfAnime, making Anime.js seek-driven and deterministic, or translating Anime.js examples into render-safe HyperFrames HTML.

heygen-com/claude-design-hyperframes

Use when running inside Claude Design specifically. Produces a valid, brand-accurate HyperFrames video draft using pre-valid skeletons. For Claude Code / Cursor / Codex, use the `hyperframes` skill instead.

heygen-com/contribute-catalog

Author a new HyperFrames registry block (caption style, VFX block, transition, lower third) or component (text effect, overlay, snippet) and ship it as an upstream PR to the hyperframes repo. Use ONLY when the user wants to CONTRIBUTE to the public catalog — for in-project caption/transition authoring use the `hyperframes` skill, for installing existing registry items use the `hyperframes-registry` skill.

heygen-com/css-animations

CSS animation adapter patterns for HyperFrames. Use when authoring CSS keyframes, animation-delay based timing, animation-fill-mode, animation-play-state, or CSS-only motion that HyperFrames must seek deterministically during preview and rendering.

heygen-com/gsap

GSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labels, nesting, playback), and performance (transforms, will-change, quickTo). Use when writing GSAP animations in HyperFrames compositions.

heygen-com/hyperframes

Leaves sweep through the frame and part to reveal the headline. HyperFrames block, 1920×1080, 12s, 11 variables.

heygen-com/hyperframes

Render-correctness doctrine for scene-to-scene seams in HyperFrames launch videos — the prerequisites that make transitions composite correctly on the master timeline. Load when assembling the master timeline / index.html, when a white flash appears at a cut or crossfade seam (especially on dark films), when reasoning about why a transition opacity dip shows through, or when verifying the render-side mechanics of how overlapping scene wrappers blend. Covers the opaque stage-ground (#root background) white-flash guard and how the injector overlaps wrappers, holds final frames, ping-pongs tracks, and stamps lint-clean template code onto the master timeline. Does NOT contain the per-transition catalog — see the transition registry for individual transition entries.

heygen-com/hyperframes

The technique catalog: five velocity-matched SEAMS (zoom-through, INVERSE zoom-through, cut-the-curve, waterfall cut, rack-focus blur-cut) plus the two in-scene techniques — waterfall ENTRY (staggered arrival cascades for title cards / segment openers) and the nudge curve (slow-fast-slow three-phase group slides). Covers partial-travel (~12% of frame) velocity matching via mirrored power4 eases, the Z scale-sign rule, size-scaled blur (10px text / 18-20px full-frame), word-by-word staggered cuts, cascade pacing by element weight, and the 10/65/25 slide ratio. Read before authoring any transition, text-beat handoff, kinetic text entry, or group reposition. [depth, zoom, inverse-zoom, scale-sign, mirrored-zoom, rack-focus, pacing, velocity, cut-the-curve, waterfall, stagger, cascade, kinetic-text, title-card, segment-opener, nudge, slide, easing, group-motion, z-depth, motion-graphics, cinematic, transition, blur, directional-continuity]

heygen-com/hyperframes

Glass shards fly in through fog and tile themselves into the headline. HyperFrames block, 1920×1080, 12.16s, 19 variables.

heygen-com/hyperframes

An orbiting camera follows an ice logo as it breaks apart, reforms into two text moments, and fades. HyperFrames block, 1920×1080, 22.5s, 216 variables.

heygen-com/hyperframes

A single feature card orbits a dot sphere on approved Blender camera motion. HyperFrames block, 1920×1080, 10s, 4 variables.

heygen-com/hyperframes

A wireframe portal bursts open, the title comes through, then its letters swap into a second phrase. HyperFrames block, 1920×1080, 8s, 9 variables.

heygen-com/hyperframes

House-style oversized macOS cursor technique for HyperFrames launch videos. Load whenever a scene involves cursors or a pointer-led action, when kicking off a UI scene, when igniting a morph/transition/typing run with a click, or when a scene reads as static, dead, or stale and needs a cheap high-yield source of motion to carry the viewer's eye and segment them out of the stale state. Covers cursor size/look (incl. brand-motif cursors), the off-screen entry law, tip-targeting and the click tap, click-ignites-the-next-beat, and exit / cross-scene handoff.

heygen-com/hyperframes

A chain of bevelled cuboids rides a travelling wave as a content carousel. HyperFrames block, 1920×1080, 6.666666666666667s, 40 variables.

heygen-com/hyperframes

A tiled headline surface flips cell by cell under a sweeping depth field to reveal the rear headline. HyperFrames block, 1920×1080, 8s, 18 variables.

heygen-com/hyperframes

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]

heygen-com/hyperframes

name: embedded-captions

heygen-com/hyperframes

Turn arbitrary text — an article, notes, a topic, a brief — into a faceless explainer video: there is no site or footage to capture, so the visuals are invented per scene (typography, abstract graphics, diagrams, data-viz). Use for topic explainers, concept breakdowns, how-tos, listicles. Not a video built from a website (/product-launch-video — promo or tour). Unclear → /hyperframes.

heygen-com/hyperframes

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

heygen-com/hyperframes

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.

Skills relacionados