Communitygithub.com

video-general

Habilidad para crear y editar videos de forma automatizada o colaborativa utilizando el ecosistema Hyperframes. Orquesta composición de escenas, activos multimedia, animaciones y revisiones desde una línea base de proyecto.

¿Qué es video-general?

Esta habilidad convierte cualquier flujo de trabajo de video en una experiencia estructurada, ya sea automatizada o de cocreación. Soporta plataformas como Hyperframes y se integra con Figma para importar activos, y con media-use para gestionar audio, imágenes, LUTs y efectos. Su lógica central se basa en un contrato de proyecto (BRIEF.md) que define el alcance, el flujo (automatización vs. acompañante), el uso de storyboard y el modo de checkpoint. La habilidad ejecuta etapas secuenciales: planificación (con citas a blueprints de animación), revisión opcional, resolución de dependencias, construcción de escenas (con edición temporal y keyframes), y renderizado final. También incluye un modo "acompañante" donde el agente actúa como director creativo, proponiendo tratamientos ambiciosos y refinando iterativamente con el usuario, maximizando la calidad sin exceder lo solicitado. Para desarrolladores y usuarios avanzados, esta skill ofrece un marcado control sobre la edición de video mediante código HTML y CSS, con reglas deterministas para evitar improvisaciones no soportadas.

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

Preguntar en tu IA favorita

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

Documentación

¿Qué hace video-general?

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. Informa de un fallo de actualización en lugar de continuar desde la memoria.

1. Aplicar adaptadores transversales de origen

  • Media: Para cualquier necesidad de audio, imagen, icono, logo, voz, grado, 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). La retroalimentación vaga sobre metraje y los estilos nombrados usan ../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 la sesión ha caducado, aplica la compuerta en ../hyperframes-core/references/brief-contract.md: la colaboración espera a que se inicie sesión o se elija explícitamente el modo sin conexión; el autónomo indica el estado y continúa a través de un proveedor sin conexión disponible. Informa de 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 de figma.com, ejecuta /figma primero. Construye a partir de sus activos exportados, tokens, componentes o fotogramas de 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íficaRealiza la edición, conserva las decisiones existentes del proyecto y luego vuelve a ejecutar las comprobaciones afectadas. No reabras la fase de descubrimiento.
BRIEF.md existeLéelo. Si workflow nombra otro flujo de trabajo y flow no es companion, transfiere el control. No hagas preguntas sobre el brief.
No hay brief, pero existe hyperframes.json o STORYBOARD.mdReanuda desde los archivos y las preferencias registradas. Rellena BRIEF.md solo a partir de hechos conocidos.
Creación nuevaEjecuta /hyperframes y su capa de intención. Regresa aquí solo para workflow: general-video o flow: companion.

Para un proyecto nuevo, elige un nombre de directorio en kebab-case a partir del brief y crea la estructura 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-core/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-core/references/brief-contract.md:

CampoSignificadoEfecto
flowQuién dirigeautomation: elige y ejecuta la ruta. companion: cocrea en conversación.
storyboardSi el tablero es una superficie de revisiónyes: ejecuta plan y revisión de bocetos. no: construye sin el tablero.
mode derivadoCómo se comportan las compuertas de checkpointSigue el contrato del brief. Nunca le pidas al usuario que nombre un modo.

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

  • Para flow: automation, elige la ruta y menciónala en una línea en la primera actualización de progreso.
  • Para una edición específica, realiza 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 colocación/orden con data-start. El audio creado por separado sigue los mismos rangos de clip y sincronización en elementos <audio> coincidentes. /hyperframes-core es dueño de esta edición temporal; usa /hyperframes-keyframes solo para animación de propiedades visuales como zoom, impacto, paneo, recorte, máscara o clip-path en un contenedor interno. Copia los contratos completos de ../hyperframes-core/references/creator-editing-recipes.md.

Flujo de acompañante

Cuando flow: companion:

  • Lee BRIEF.md y concilia los ## Assets y ## Customizations aceptados con los artefactos del proyecto. Completa el trabajo aceptado que aún esté pendiente; deja intacto el trabajo completado; no ofrezcas nuevamente una capacidad aceptada como si fuera nueva.
  • Llega como el director, no el contratista. Un usuario que eligió "acompañante" eligió participació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 plan es el tratamiento máximo: el arco narrativo (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 la disciplina del plan), las transiciones, la identidad de audio — marcas musicales y sonoras, o silencio deliberado — el material del usuario colocado, y una apertura y cierre diseñados. Di lo que cada capa añade en una línea; marca las costosas (tiempo de renderizado, inicio de sesión, facturación) a medida que las nombras. El usuario recorta un tratamiento; nunca debería tener que ensamblar 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 vestiría cualquier video de la misma manera es decoración. La artesanía se eleva hasta el techo; el contenido nunca crece más allá de lo solicitado (§ 6).
  • Entre puntos de control, ../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 mejora de cada paso: un punto de control de plan, boceto o construcción puede llevar una o dos ofertas trazadas apuntando al material que el usuario está viendo ("la estadística de la escena 3 quiere el tratamiento de cuenta regresiva"). Léelo 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 inmediatamente. Reescribe un campo de 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. "Acompañante" cambia quién dirige, no lo que la calidad requiere.

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-core/references/storyboard-format.md y ../hyperframes-core/references/review-loop.md
Cualquier activo u operación multimedia, incluyendo narración, BGM, SFX, subtítulos, gradación o transformaciones/media-use; para reproducción y colocación del marco, también lee /hyperframes-core → references/variables-and-media.md
Ensamblaje de múltiples escenas../hyperframes-core/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 máximo se diseña a partir de estos, no se recuerda
Una oferta de capacidad de acompañante, captura, cuadrícula de ritmo, video generativo, mapa, publicación o capacidad entre flujos de trabajo../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 está realmente cargada.

5. Ejecutar la composición

Usa este orden de dependencias. Omite una etapa solo cuando falte su entrada.

  1. Plan. Indica el arco del espectador, la estructura, el ritmo y el controlador de duración. Usa un archivo para una escena corta única; usa subcomposiciones para tres o más cortes de escena duros 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 el prompt 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 encaja, o las reglas nombradas que compone de rules-index.md cuando ninguna encaja — los nombres de movimiento provienen de esos índices, nunca inventados. La verdad de la historia decide qué escenas existen; la cita las viste. Un plan de múltiples escenas también se registra como el artefacto de envío: un bloque ## Frame N por escena en STORYBOARD.md — status: outline, una src: declarada, la cita del plano/reglas, y el texto del ritmo — incluso cuando storyboard: no. El bloque es la unidad de envío; el tablero 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 abrir el tablero. Cuando ocurra una pausa en el plan de todos modos, incluye la concesión de delegación del subagente (necesaria para codex en el paso 4 del envío) en esa pausa en lugar de detenerse nuevamente más tarde.

  3. Resolver dependencias. Instala bloques de registro antes del trabajo paralelo. Organiza los activos del usuario, adopta medios existentes y resuelve solo lo que requiere el brief. Inicia el audio temprano cuando sus tiempos determinen la duración.

  4. Construir escenas. Para una pieza de una sola escena corta, implementa la escena en su momento más visible antes de añadir movimiento (el wireframe confirmado, cuando esté presente, es ese estado final y no debe redibujarse), luego anima a partir de su plano o reglas citados — lee el cuerpo completo de la receta (/hyperframes-animation → blueprints/<id>.md, rules/<id>.md) antes de escribir el movimiento.

    El envío solo se amortiza a escala. Los paquetes de autoría y el calentamiento de contextos de trabajador frescos cuestan minutos y tokens reales: una película de hasta ~6 escenas cortas se construye MÁS RÁPIDO en línea, en este contexto, una escena tras otra (medido: 5 escenas cortas ≈ 9 minutos en línea frente a ~18 con envío). Más allá de 6, usa el envío.

    Lógica de envío: Antes de enviar escenas, escribe el artefacto de envío mencionado en el paso 1. Para cada bloque Frame N que no tenga status: complete y cuya src coincida con el tipo de contenido esperado, prepara un paquete de escena: el plan de la escena (brief + bloque), los activos resueltos, las reglas de diseño citadas y el nombre del plano, y cualquier contrato relevante de determinismo. Luego guarda el paquete en <PROJECT_ROOT>/.hyperframes/dispatch/<scene-id>/package.md. Después del envío, ensambla el archivo de composición final en el orden de escena.

    Para construir con una especificación de diseño, lee primero la especificación y produce una composición que la satisfaga; no asumas valores predeterminados.

  5. Construir cuando storyboard: yes. Después de que el plan sea revisado y antes de construir, si el storyboard lo requiere, procesa un boceto para la escena actual. Lee ../hyperframes-core/references/storyboard-format.md y ../hyperframes-core/references/review-loop.md para el bucle. Después de que cada escena sea bocetada, pasa a la revisión del boceto si se solicita.

  6. Validar y renderizar. Valida la composición construida contra el brief usando ../hyperframes-core/references/determinism-rules.md para la verificación de diseño. Cuando se satisfagan todas las validaciones, renderiza la composición. Para el renderizado final, ejecuta:

    npx hyperframes render <ruta-al-archivo-de-composición>
    

    Luego entrega la salida renderizada.

6. Navegar por el bucle de producción

Usa ../hyperframes-core/references/production-loop.md para ciclos de revisión y publicación. Durante storyboard: yes, el bucle de revisión compartido (../hyperframes-core/references/review-loop.md) se ejecuta en los puntos de control definidos.

Sigue ../hyperframes-core/references/brief-contract.md para cómo se comportan los modos y las compuertas (autonomous, collaborative, approval).

Continuará...

Individual skills in this repo

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

embedded-captions

>

faceless-explainer

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.

figma

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.

hyperframes

>

hyperframes-animation

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

hyperframes-audio

>

hyperframes-cli

>

hyperframes-core

The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class=

hyperframes-creative

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`.

hyperframes-keyframes

>

hyperframes-registry

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).

jasonfast123/hyperframes-skills

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.

media-use

Agent Media OS, the single skill for every media need in a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-ready block + ledger record (one verb, `resolve`); generate via TTS / music / image models when the catalog misses; produce voiceover, transcription, captions, and background removal through one shared audio engine; operate on media (cut / reframe / transform); and reuse assets across projects. Also use for vague feedback that real footage looks dark, flat, boring, should feel retro/camcorder/print/ASCII, needs privacy, or needs a media reveal.

motion-graphics

>

music-to-video

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.

pr-to-video

Turn a GitHub pull request (a PR URL, owner/repo#N, or

remotion-to-hyperframes

Port an existing Remotion (React) composition

slideshow

>

talking-head-recut

Package an existing talking-head / interview / podcast video with timed, designed GRAPHIC OVERLAY cards — kinetic titles, lower-thirds, data callouts, quotes, side panels, picture-in-picture — synced to the transcript, on a 16:9 / 9:16 / 4:5 canvas of your choice; the clip plays untouched underneath. Trigger on

Skills relacionados