CommunityProgramación y desarrollogithub.com

hyperframes

Habilidades de Diseño para Agentes

¿Qué es hyperframes?

hyperframes es un conjunto de habilidades de IA para agentes de codificación (como Claude Code, Cursor y Codex) diseñado para convertir composiciones HTML en videos. Incluye 11 habilidades que cubren desde la creación de escenas con HTML, CSS y JS, hasta texto a voz, transcripción y renderizado de video a través de HeyGen. También ofrece un flujo de trabajo CLI, un registro de activos reutilizables, captura de URL para contenido web en vivo y seis sub-habilidades de animación: GSAP, Anime.js, animaciones CSS, Lottie, Three.js 3D y Web Animations API (WAAPI). Es útil para agentes que necesitan producir videos a partir de HTML sin salir del entorno de codificación. Requiere una cuenta de HeyGen para las funciones de generación de medios y TTS. No debe usarse para animaciones estáticas sin salida de video, donde otras habilidades como gsap-skills o framer-motion-skills son más apropiadas.

Compatible con✓Claude Code~Codex CLI✓Cursor
npx skills add podo/design-agent-skills

Installed? Explore more Programación y desarrollo skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

Preguntar en tu IA favorita

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

Documentación

¿Qué hace hyperframes?

Catálogo resumido — paquete completo: heygen-com/hyperframes

Nota: Requiere una cuenta de HeyGen para las funciones de TTS y generación de medios.

Árbol de decisión

  1. ¿El paquete ya está instalado? Verifique: el directorio de habilidades de su agente contiene hyperframes con contenido más allá de este resumen.

    • Sí → invoque hyperframes y continúe
    • No → vaya al paso 2
  2. ¿En qué agente está?

    • Claude Code → npx skills add heygen-com/hyperframes — o envíe ! npx skills add … como mensaje de chat (agregue -g para global, omita para solo proyecto)
    • Cursor → npx skills add heygen-com/hyperframes
    • Otro → npx skills add heygen-com/hyperframes o consulte el README de GitHub

Comando de instalación

npx skills add heygen-com/hyperframes

Se requiere una cuenta de HeyGen para las funciones de TTS, transcripción y renderizado de video. La creación de animaciones funciona sin una cuenta.

Invocar después de instalar

  • Nombre de la habilidad: hyperframes
  • Frases de activación: "hyperframes", "HTML a video", "HeyGen", "renderizar video desde HTML", "Anime.js"

Qué hace

"Escribe HTML. Renderiza video." — un conjunto de 11 habilidades construidas específicamente para agentes de codificación de IA que necesitan producir video a partir de composiciones HTML. Cubre: creación de composiciones (construcción de escenas HTML/CSS/JS), texto a voz y transcripción a través de HeyGen, un flujo de trabajo de renderizado mediante CLI, un registro de activos para medios reutilizables, captura de URL para obtener contenido web en vivo, y seis sub-habilidades de animación que abarcan GSAP, Anime.js, animaciones CSS, reproducción de Lottie, Three.js 3D y la API de animaciones web (WAAPI). Diseñado desde el principio para pipelines de producción de video impulsados por agentes.

Cuándo NO usarlo

  • Animación estática sin salida de video (use gsap-skills, framer-motion-skills o animate-css-skill)
  • Cuando no tenga una cuenta de HeyGen — las funciones de generación de medios (TTS, renderizado de video) no funcionarán

Individual skills in this repo

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

Skills relacionados