Communitygithub.com

heygen-com/hyperframes — media-use

El sistema operativo de medios para HyperFrames: resolver, generar, operar y recordar — un solo skill para todas las necesidades multimedia de un proyecto HyperFrames.

¿Qué es hyperframes — media-use?

Este skill, `media-use`, actúa como un sistema operativo de medios para proyectos HyperFrames. Permite a un agente de IA o desarrollador resolver (buscar y fijar localmente) cualquier tipo de activo multimedia, como música de fondo (BGM), efectos de sonido (SFX), imágenes, iconos, logotipos, voces (TTS), gradaciones de color (grade) y LUTs, usando un único comando `resolve`. Si el catálogo no contiene lo que se busca, puede generar contenido mediante modelos de TTS, música o imagen. Además, maneja voz en off, transcripciones, subtítulos y eliminación de fondos a través de un motor de audio compartido. También permite operar sobre medios existentes (cortar, reencuadrar, transformar) y reutilizar activos entre proyectos. Su principal fortaleza es centralizar toda la gestión de medios en un solo skill, eliminando el ruido de contexto y proporcionando un flujo de trabajo progresivo y determinista para tratar comentarios vagos sobre el aspecto visual (como 'se ve oscuro', 'aburrido', 'necesita privacidad' o 'parece retro') mediante tratamientos de medios inteligentes y basados en señales concretas.

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

Preguntar en tu IA favorita

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

Documentación

Instalación del plugin: Antes de ejecutar comandos de configuración o actualización, siga las reglas de ejecución de plugins cuando este skill se encuentre dentro de un plugin HyperFrames. Las instalaciones independientes conservan las instrucciones de actualización que se muestran a continuación.

media-use

El sistema operativo de medios para HyperFrames: resuelve · genera · opera · recuerda — cada tipo de medio, un solo skill, sin ruido de contexto.

Primer uso: instale e inicie sesión en la CLI de heygen (la ruta de uso gratuito), luego verifique con npx hyperframes media-use resolve --doctor. Configuración y proveedores: references/setup-providers.md.

Resolve — el único verbo

npx hyperframes media-use resolve --type <tipo> --intent "<descripción>" --project <directorio>

Devuelve una línea: resolved <id> → <ruta> (<tipo>, <metadatos>). Todo el ruido de búsqueda permanece en el disco.

TipoIntención en una línea
bgmmúsica de fondo (catálogo de HeyGen, más de 10 000 pistas)
sfxefectos de sonido (biblioteca incluida de 19 archivos + catálogo)
imagefotos, fondos (búsqueda de activos de HeyGen, más de 75 000 vectores)
iconiconos, símbolos (transparente)
logomarcas oficiales (theSVG → avatar de GitHub → favicon; nunca redibujado)
voicevoz en off TTS (ruta de uso gratuito de HeyGen; Kokoro local opcional)
gradecandidato de corrección medido; el pulido/estilizado general sigue los tratamientos de medios
lutarchivo .cube proporcionado por el usuario o elegido explícitamente y reutilizable, validado

Antes de resolver algo nuevo, liste los candidatos reutilizables con --candidates y juzgue usted mismo su idoneidad. Las reglas de reutilización, todas las banderas, la ingesta (--from) y la adopción se encuentran en references/resolve.md.

Tratar comentarios visuales amplios como intención de medios

Cuando un usuario pida explícitamente arreglar, pulir, estilizar, ocultar, enfatizar o revelar medios fotográficos, lea references/media-treatments.md incluso si no menciona la gradación de color o un efecto. Inspeccione el <img>/<video> real, elija una intención principal y luego use persistencia y verificación deterministas. Use una receta coincidente como semilla probada opcional, o inspeccione hyperframes media-treatment --capabilities --json, luego solicite una familia/efecto relevante con --capability <id> y arme un tratamiento personalizado a partir de los controles canónicos. Nunca cargue --all para una autoría común. Un tratamiento puede componer corrección, un preajuste, acabado, efectos de sombreado compatibles, fotogramas clave admitidos y superposiciones opcionales del Registro. Añada solo ajustes acotados y justificados por la fuente, nunca efectos solo para hacer que el resultado parezca más sofisticado. Persista la carga útil final combinada con hyperframes media-treatment.

Utilice un flujo de trabajo progresivo escalonado. Para video, inspeccione una hoja de contactos etiquetada (temprana/intermedia/tardía) en lugar de leer fotogramas por separado. Aplique un candidato e inspeccione una hoja posterior para corrección o pulido común. Escale a fotogramas individuales o evidencia de borrador en movimiento solo cuando el resultado sea ambiguo, temporal, estilizado, basado en LUT, sensible a HDR/LOG, privado o crítico para la marca.

Para corrección o pulido común, persista el JSON de preajuste/ajuste del tratamiento final. No genere un LUT .cube solo para codificar exposición, sombras, contraste o calidez. Use un LUT solo cuando el usuario lo proporcione o el tratamiento seleccionado lo posea explícitamente. resolve --type grade --for ... --analyze es evidencia de medición, no permiso para reemplazar el tratamiento elegido con un LUT generado. No recrear efectos compatibles de viñeta, grano, desenfoque, pixelado, color o tratamiento con superposiciones CSS/SVG; eso evita los controles de Studio y la ruta canónica de previsualización/renderizado por sombreador.

Sea proactivo — realice un pase de oportunidades de medios

El humano generalmente no puede saber qué medios mejorarían la pieza. Usted sí. Cuando construye o revisa una composición, realice un escaneo fundamentado y luego pregunte una vez — no añada en silencio y no insista por cada activo.

Sugiera una oportunidad solo cuando haya una señal concreta presente:

Señal detectadaOferta
Texto en pantalla / un guion sin voz en offVoz en off TTS (motor de audio)
Emoji o un <div> estilizado como iconoresolver iconos reales (icon)
Imagen que es un marcador de posición, pequeña o con aspecto de reescaladauna imagen mejor (image) (y/o mejorar resolución — consulte references/operations.md)
Cortes de escena abruptos / transiciones sin sonidoefectos de sonido de transición (sfx)
Una pieza de más de ~10s sin banda sonoramúsica de fondo (bgm)
Metraje que se ve subexpuesto/sobreexpuesto o con dominante de coloruna corrección (gradación) (inspecciónelo con hyperframes media-treatment --selector '#hero' --analyze --json)
Medios fotográficos que se sienten visualmente planos o fuera de temaun preajuste o tratamiento personalizado específico y apropiado para la fuente, con el objetivo previsto nombrado
Una entrada/revelación de medios significativa que se siente estáticauna animación de tratamiento compatible con búsqueda segura; conserve el color a menos que la solicitud también justifique un preajuste

Reglas que mantienen esto como una ayuda, no como un molestador: fundamentado, no genérico (sin señal → sin sugerencia); con opinión + concreto (proponga la corrección específica con valores predeterminados elegidos — el humano aprueba todo / algo / nada); una vez por proyecto (una sola solicitud consolidada; respete "déjalo así"); sugiera, nunca mute en silencio (especialmente las gradaciones de color: proponga y previsualice — una "corrección" de mundo gris arruina una puesta de sol intencional o un look neón).

Dónde buscar — lea solo el archivo que su tarea necesita

TareaLea
resolver / reutilizar / adoptar / ingerir, banderas, cascada, inventarioreferences/resolve.md
gradación de color, LUTs, gradación inteligente (--for), comparar gradaciónreferences/grading.md
voz en off / TTS, música, SFX, subtítulos, transcripción (motor de audio)references/audio.md
cortar / reencuadrar / transformar medios existentes, difusión de errores exacta, HEVCreferences/operations.md
tratamientos creativos conscientes de la fuente, efectos en tiempo real, superposiciones, revelacionesreferences/media-treatments.md
instalación + autenticación, tabla de proveedores, escaleras de RAM, --local-only, --providerreferences/setup-providers.md
preferencias recordadas + recetas congeladas (memoria del usuario)references/memory.md
matriz de propiedad, estadísticas de uso, telemetría, privacidad (orientado al mantenedor)references/meta.md

Individual skills in this repo

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

general-video

>

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

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

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

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

name: embedded-captions

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

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

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]

Skills relacionados