# hyperframes - 25 Claude Skills de heygen-com > Skills de HyperFrames (heygen-com) para crear, animar y renderizar video MP4 a partir de HTML con agentes de código. Fuente: https://skillsagentes.com/skills/heygen-com/hyperframes Markdown: https://skillsagentes.com/skills/heygen-com/hyperframes.md Conjunto de skills para escribir composiciones HTML y convertirlas en video MP4 determinista con HyperFrames, cubriendo desde el enrutamiento de intención hasta animación, audio, captions y renderizado por CLI. ## Instalar el pack entero ```bash npx -y skills add heygen-com/hyperframes --agent claude-code ``` Instala los 25 skills en el proyecto actual. Añade `-g` para toda la máquina, y cambia `--agent` por `cursor`, `codex`, `gemini`, `windsurf` o `cline`. ## Qué cubre El repositorio publica 25 skills que enseñan a un agente el ciclo de producción de HyperFrames: planificar el video, escribir HTML válido, encadenar animaciones seek-safe y renderizar a MP4. El punto de entrada es Hyperframes, que enruta hacia workflows de creación como Product Launch Video, Faceless Explainer, Pr To Video, Talking Head Recut, Motion Graphics, Music To Video, Slideshow y General Video. A este nivel se suman skills de dominio como Hyperframes Core (el contrato de composición con atributos data-*), Hyperframes Animation y Hyperframes Keyframes (adaptadores GSAP, Lottie, Three.js, Anime.js, CSS, WAAPI), Media Use para resolver assets, Hyperframes Registry, Hyperframes Cli para el flujo init/lint/preview/render, Figma para importar diseño, y un grupo de doctrina de estilo (Motion Doctrine, Cut The Curve, Oversized Cursor, Seam Craft, Captions Overlay) que fija reglas de movimiento y corte propias del proyecto. Instalar el conjunto completo tiene sentido para quien construye videos con agentes de código de forma recurrente —marketing, changelogs de producto o contenido de PR a video— y necesita tanto los workflows de creación como las capas atómicas de animación, audio y assets que estos componen. Quien solo necesite una tarea puntual, como añadir captions o portar una composición Remotion, puede instalar únicamente el skill correspondiente. El repositorio no cubre edición de video tradicional por timeline gráfico ni generación de video con modelos de difusión; todo el pipeline pasa por HTML, CSS y animaciones web renderizadas de forma determinista a MP4. ## Datos del repositorio - Publicado por: [heygen-com](https://skillsagentes.com/creators/heygen-com.md) - Skills indexados: 25 - Categorías: Diseño y UI, Herramientas para desarrolladores, Redacción y contenido - Estrellas: 43502 - Licencia: Apache-2.0 - Último push: 2026-09-01 - [Código fuente](https://github.com/heygen-com/hyperframes) ## Los 25 skills - [Talking Head Recut](https://skillsagentes.com/skills/heygen-com/hyperframes/talking-head-recut.md): Empaqueta un video de talking-head/entrevista/podcast existente con tarjetas gráficas superpuestas (títulos, lower-thirds, callouts, citas, PiP) sincronizadas con la transcripción, en 16:9, 9:16 o 4:5; el clip se reproduce intacto debajo. - [Motion Doctrine](https://skillsagentes.com/skills/heygen-com/hyperframes/motion-doctrine.md): GATEWAY — cárgalo primero antes de componer cualquier animación o video en HyperFrames; es la ley de movimiento que hace que un video multi-escena se sienta como UN solo movimiento de cámara continuo. - [Hyperframes Registry](https://skillsagentes.com/skills/heygen-com/hyperframes/hyperframes-registry.md): Instala, descubre y conecta blocks y components del registry en composiciones HyperFrames, incluyendo cómo autorar nuevos items para contribuir al proyecto. - [Hyperframes](https://skillsagentes.com/skills/heygen-com/hyperframes/hyperframes.md): Punto de entrada obligatorio para crear, editar, animar o renderizar video, animaciones o motion graphics con HyperFrames, así como para inspeccionar, validar o publicar proyectos existentes. - [Hyperframes Keyframes](https://skillsagentes.com/skills/heygen-com/hyperframes/hyperframes-keyframes.md): Úsalo cuando una composición HyperFrames necesite keyframes 2D/3D seek-safe: GSAP, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, morph/draw SVG, trails de texto, profundidad 3D o diagnósticos `hyperframes keyframes`. - [Product Launch Video](https://skillsagentes.com/skills/heygen-com/hyperframes/product-launch-video.md): Convierte una URL de producto o marketing, un guion pegado o un brief en un video de lanzamiento/promoción — promos SaaS, revelaciones de funciones, demos, lanzamientos de apps y empresas. - [Cut The Curve](https://skillsagentes.com/skills/heygen-com/hyperframes/cut-the-curve.md): El catálogo de técnicas: cinco SEAMS con velocidad emparejada más las dos técnicas dentro de escena (waterfall entry y nudge curve), con sus parámetros de blur, escala Z y ritmo de cascada. - [Figma](https://skillsagentes.com/skills/heygen-com/hyperframes/figma.md): Importa contenido de Figma a una composición de HyperFrames: assets renderizados, tokens de marca, componentes, secciones de storyboard reconstruidas como movimiento y shaders. - [General Video](https://skillsagentes.com/skills/heygen-com/hyperframes/general-video.md): Crea o edita una composición HyperFrames personalizada cuando ningún workflow especializado aplica, o cuando BRIEF.md fija flow: companion; para piezas largas o multi-escena, reels y montajes. - [Hyperframes Animation](https://skillsagentes.com/skills/heygen-com/hyperframes/hyperframes-animation.md): Todo el conocimiento de animación de HyperFrames: reglas atómicas, blueprints multi-fase, transiciones, técnicas de motion-design y siete adaptadores de runtime (GSAP, Lottie, Three.js, Anime.js, CSS, WAAPI, TypeGPU). - [Hyperframes Cli](https://skillsagentes.com/skills/heygen-com/hyperframes/hyperframes-cli.md): Usa el flujo de desarrollo de la CLI de HyperFrames: init, add, catalog, capture, lint, check, snapshot, compare, preview, render, publish, cloud, lambda, feedback, doctor y más; también para diagnosticar fallos de build o render. - [Hyperframes Core](https://skillsagentes.com/skills/heygen-com/hyperframes/hyperframes-core.md): El contrato de composición de HyperFrames: cómo construir un proyecto renderizable con atributos `data-*`, `class="clip"`, tracks, sub-composiciones, variables y reglas de renderizado determinista. - [Hyperframes Creative](https://skillsagentes.com/skills/heygen-com/hyperframes/hyperframes-creative.md): Dirección creativa no animada para vídeos HyperFrames: manejo de specs de diseño (frame.md / design.md), paletas, tipografía, narración, beats, audio-reactive y composición. - [Media Use](https://skillsagentes.com/skills/heygen-com/hyperframes/media-use.md): Agent Media OS: resuelve BGM, SFX, imágenes, iconos, logos, voz, gradación de color o LUTs en un archivo local o bloque listo para usar; genera, opera y reutiliza assets en proyectos HyperFrames. - [Music To Video](https://skillsagentes.com/skills/heygen-com/hyperframes/music-to-video.md): Convierte una pista de música (archivo de audio, video del que extraer el audio, o una pista generada a partir de un mood) en un video sincronizado al beat: lyric video, slideshow o promo cinético. - [Oversized Cursor](https://skillsagentes.com/skills/heygen-com/hyperframes/oversized-cursor.md): Técnica de estilo propio de HyperFrames: un cursor macOS de tamaño exagerado que entra desde fuera de cuadro, apunta con la punta, hace click para ignitar la siguiente acción y sale físicamente. - [Remotion To Hyperframes](https://skillsagentes.com/skills/heygen-com/hyperframes/remotion-to-hyperframes.md): Porta el código de una composición Remotion (React) existente a HTML de HyperFrames. Solo para pedidos explícitos de portar/convertir/migrar una fuente Remotion, en un único sentido. - [Seam Craft](https://skillsagentes.com/skills/heygen-com/hyperframes/seam-craft.md): Doctrina de corrección de render para los seams de escena a escena en videos de lanzamiento HyperFrames: los prerrequisitos para que las transiciones compongan bien en el master timeline. - [Faceless Explainer](https://skillsagentes.com/skills/heygen-com/hyperframes/faceless-explainer.md): Convierte texto (artículo, notas, tema o brief) en un video explicativo faceless: sin sitio ni material que capturar, los visuales se inventan por escena (tipografía, gráficos abstractos, diagramas, data-viz). - [Changelog Video](https://skillsagentes.com/skills/heygen-com/hyperframes/changelog-video.md): Convierte un changelog .md semanal en un video de marca terminado (cuadrado 1080, ~45-60s, voz de Annie, fondo animado, mock-UI, captions lowkey). Autocontenido: fuentes, fondo, léxico y scripts incluidos. - [Embedded Captions](https://skillsagentes.com/skills/heygen-com/hyperframes/embedded-captions.md): Añade subtítulos o captions a un vídeo de un solo sujeto hablando a cámara sin editar el metraje, usando el catálogo de 35 identidades visuales. - [Motion Graphics](https://skillsagentes.com/skills/heygen-com/hyperframes/motion-graphics.md): Motion graphic corto donde el movimiento es el mensaje: tipografía cinética, count-up, chart, logo sting, lower-third o mapa animado; sin narración, exporta a MP4 u overlay transparente. - [Captions Overlay](https://skillsagentes.com/skills/heygen-com/hyperframes/captions-overlay.md): Doctrina de overlay para captions embebidos: el modelo drop/rail/embed y la regla de que los captions son un overlay compuesto sobre el film, nunca una banda inferior reservada. - [Pr To Video](https://skillsagentes.com/skills/heygen-com/hyperframes/pr-to-video.md): Convierte un pull request de GitHub (URL, owner/repo#N o 'este PR') en un video explicativo del cambio de código —changelog, feature, fix o refactor— construido a partir del diff, commits y archivos. - [Slideshow](https://skillsagentes.com/skills/heygen-com/hyperframes/slideshow.md): Crea una slideshow de HyperFrames —presentación, pitch deck o deck interactivo— con slides, fragmentos, ramificación y modo presentador; también convierte una página existente en un deck navegable, no en un MP4. ## Preguntas frecuentes - **¿Qué incluye hyperframes?** 25 skills indexados en este directorio, repartidos entre 4 categorías, sobre todo Diseño y UI, Herramientas para desarrolladores, Redacción y contenido. Cada uno es un SKILL.md con sus propios archivos, y en la lista de esta página tienes los 25 con enlace a su ficha. - **¿Cómo instalo todo el pack hyperframes de una vez?** Con un solo comando: npx -y skills add heygen-com/hyperframes --agent claude-code. Instala los 25 skills del repositorio en el proyecto actual. Añade -g al final para dejarlos disponibles en toda la máquina, y cambia --agent si usas Cursor, Codex, Gemini CLI, Windsurf o Cline. - **¿Puedo instalar solo uno de los skills?** Sí. Cada ficha de skill trae su propio comando con el selector --skill, así que puedes coger uno suelto sin traerte los 25. Es lo recomendable si solo necesitas una tarea concreta: cada skill instalado ocupa contexto en tu agente. - **¿Qué licencia tiene hyperframes?** El repositorio declara licencia Apache-2.0. Los archivos son del autor; este directorio solo los indexa y enlaza al origen. - **¿Quién mantiene hyperframes?** heygen-com, en GitHub. El último push al repositorio se registró el 1 de septiembre de 2026. --- [Todos los packs](https://skillsagentes.com/skills/packs.md) · [Todas las skills](https://skillsagentes.com/skills.md) Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)