Habilidades hyperframes-cli
📦

hyperframes-cli

Seguro

Renderizar composiciones HTML a video con HyperFrames CLI

Transforma composiciones de video basadas en HTML en salida MP4 o WebM sin renderizado manual. Automatiza la estructuración, el linting, la inspección visual y la entrega final para creadores de contenido y equipos de desarrollo.

Soporta: Claude Codex Code(CC)
🥉 74 Bronce
1

Descargar el ZIP de la skill

2

Subir en Claude

Ve a Configuración → Capacidades → Skills → Subir skill

3

Activa y empieza a usar

Pruébalo

Usando "hyperframes-cli". npx hyperframes doctor

Resultado esperado:

Checking environment...
✓ Chrome: installed
✓ FFmpeg: installed
✓ Node: v22.10.0
✓ Memory: 8GB available

Environment is ready for rendering.

Usando "hyperframes-cli". npx hyperframes lint ./my-project

Resultado esperado:

Linting composition...
✓ index.html: valid
✗ compositions/intro.html: missing data-composition-id
⚠ compositions/outro.html: overlapping tracks at 2.5s

1 error, 1 warning found.

Auditoría de seguridad

Seguro
v1 • 4/27/2026

All 69 static findings are false positives. The external_command detections are markdown code examples showing CLI usage, not executable code. Network detections are localhost URLs for local development preview, which is expected. No cryptographic code or malicious patterns exist in this skill.

1
Archivos escaneados
151
Líneas analizadas
0
hallazgos
1
Auditorías totales
No se encontraron problemas de seguridad
Auditado por: claude

Puntuación de calidad

38
Arquitectura
100
Mantenibilidad
87
Contenido
50
Comunidad
100
Seguridad
91
Cumplimiento de la especificación

Lo que puedes crear

Automatizar la generación de video en pipelines de CI/CD

Usa hyperframes render con la bandera --non-interactive para generar videos como parte de flujos de trabajo automatizados sin intervención manual.

Crear contenido de video de marketing a partir de plantillas

Estructura un proyecto con una plantilla como product-promo, personaliza la composición HTML, y luego renderiza a MP4 final para redes sociales o publicidad.

Depurar y corregir problemas de diseño visual en composiciones de video

Ejecuta hyperframes lint para capturar errores estructurales, luego hyperframes inspect para identificar desbordamiento de texto y recorte antes del renderizado final.

Prueba estos prompts

Estructurar un nuevo proyecto de video 
Run `npx hyperframes init my-project --non-interactive` to create a new HyperFrames video project in the current directory.
Validar e inspeccionar una composición 
Run `npx hyperframes lint` followed by `npx hyperframes inspect --json` to check for errors and visual layout issues in the current composition.
Renderizar una composición a video 
Run `npx hyperframes render --output final.mp4 --quality high --fps 30` to render the current composition to a high-quality MP4 file.
Previsualizar y probar cambios en vivo 
Run `npx hyperframes preview --port 3002` to start the preview server and open the HyperFrames studio for interactive testing.

Mejores prácticas

  • Ejecuta los comandos lint e inspect antes de previsualizar para detectar problemas estructurales y visuales tempranamente
  • Usa la bandera --docker para renders reproducibles e idénticos byte a byte en diferentes entornos
  • Usa calidad draft durante la iteración y cambia a alta calidad solo para la entrega final

Evitar

  • No saltes los pasos de lint e inspect antes de renderizar - los errores estructurales pueden causar fallos silenciosos
  • No uses 60fps a menos que sea específicamente necesario - duplica el tiempo de renderizado con beneficio visual mínimo
  • No renderices directamente a la salida final durante el desarrollo - usa calidad draft para ahorrar tiempo

Preguntas frecuentes

¿Cuáles son los requisitos del sistema para HyperFrames CLI?
Deben estar instalados Node.js versión 22 o superior y FFmpeg. Ejecuta npx hyperframes doctor para verificar tu entorno.
¿Cómo renderizo un video sin la ventana de previsualización?
Usa npx hyperframes render con la bandera --non-interactive en entornos de CI/CD o scripts automatizados.
¿Cuál es la diferencia entre los comandos lint e inspect?
Lint verifica errores estructurales como atributos faltantes y pistas superpuestas. Inspect ejecuta la composición en Chrome sin cabeza para detectar problemas visuales como desbordamiento de texto.
¿Cómo aseguro renders consistentes en diferentes máquinas?
Usa la bandera --docker que ejecuta el renderizado dentro de un contenedor Docker con versiones fijas de Chrome y FFmpeg.
¿Puedo agregar narración de audio a mi composición de video?
Sí, usa npx hyperframes tts para generar texto a voz, y npx hyperframes transcribe para importar archivos de audio o subtítulos existentes.
¿Qué configuraciones de calidad debo usar para la entrega final?
Usa --quality high --fps 30 para la entrega final. Usa --quality draft durante la iteración para ahorrar tiempo.

Detalles del desarrollador

Licencia

MIT

Repositorio

https://github.com/heygen-com/hyperframes/tree/main/skills/hyperframes-cli/

Ref.

main

Estructura de archivos

📄 SKILL.md