Pack de 25 skills
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.
indexados aquí
cubiertas
en GitHub
al repositorio
v0.8.22
Funciona con cualquier agente que lea SKILL.md
npx -y skills add heygen-com/hyperframes --agent claude-codeInstala todos los skills del repositorio, solo en este proyecto.
Instala los 25 skills del repositorio de una vez. Cada ficha individual trae su propio comando si solo quieres uno — cada skill instalado ocupa contexto en el agente.
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.
Los 24 más populares del pack, sobre Diseño y UI, Herramientas para desarrolladores, Redacción y contenido.
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.
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.
Programa publicaciones en todas tus redes desde un solo sitio.
Instala, descubre y conecta blocks y components del registry en composiciones HyperFrames, incluyendo cómo autorar nuevos items para contribuir al proyecto.
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.
Ú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`.
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.
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.
Importa contenido de Figma a una composición de HyperFrames: assets renderizados, tokens de marca, componentes, secciones de storyboard reconstruidas como movimiento y shaders.
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.
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).
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.
Haz crecer tu tráfico orgánico en piloto automático.
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.
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.
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.
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.
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.
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.
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.
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).
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.
Revisiones de código con IA. Detecta bugs y corrígelos en un clic.
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 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.
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.
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.
Agrupados por categoría. Cada uno enlaza a su ficha con el comando de instalación, los permisos que pide y el SKILL.md completo.
