Habilidades hyperframes-cli
📦

hyperframes-cli

Seguro

Renderizar composições HTML em vídeo com HyperFrames CLI

Transforme composições de vídeo baseadas em HTML em saída MP4 ou WebM sem renderização manual. Automatize scaffolding, linting, inspeção visual e entrega final para criadores de conteúdo e equipes de desenvolvimento.

Suporta: Claude Codex Code(CC)
🥉 74 Bronze
1

Baixar o ZIP da skill

2

Upload no Claude

Vá em Configurações → Capacidades → Skills → Upload skill

3

Ative e comece a usar

Testar

A utilizar "hyperframes-cli". npx hyperframes doctor

Resultado esperado:

Verificando ambiente...
✓ Chrome: instalado
✓ FFmpeg: instalado
✓ Node: v22.10.0
✓ Memória: 8GB disponível

Ambiente pronto para renderização.

A utilizar "hyperframes-cli". npx hyperframes lint ./my-project

Resultado esperado:

Linting da composição...
✓ index.html: válido
✗ compositions/intro.html: data-composition-id ausente
⚠ compositions/outro.html: tracks sobrepostas às 2.5s

1 erro, 1 aviso encontrado.

Auditoria de Segurança

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
Arquivos analisados
151
Linhas analisadas
0
achados
1
Total de auditorias
Nenhum problema de segurança encontrado
Auditado por: claude

Pontuação de qualidade

38
Arquitetura
100
Manutenibilidade
87
Conteúdo
50
Comunidade
100
Segurança
91
Conformidade com especificações

O Que Você Pode Construir

Automatizar geração de vídeo em pipelines CI/CD

Use hyperframes render com a flag --non-interactive para gerar vídeos como parte de fluxos de trabalho automatizados sem intervenção manual.

Criar conteúdo de vídeo marketing a partir de templates

Scaffold um projeto com um template como product-promo, personalize a composição HTML, então renderize para MP4 final para redes sociais ou publicidade.

Debugar e corrigir problemas de layout visual em composições de vídeo

Execute hyperframes lint para capturar erros estruturais, então hyperframes inspect para identificar overflow de texto e recortes antes da renderização final.

Tente Estes Prompts

Scaffold de um novo projeto de vídeo 
Run `npx hyperframes init my-project --non-interactive` to create a new HyperFrames video project in the current directory.
Validar e inspecionar uma composição 
Run `npx hyperframes lint` followed by `npx hyperframes inspect --json` to check for errors and visual layout issues in the current composition.
Renderizar uma composição para vídeo 
Run `npx hyperframes render --output final.mp4 --quality high --fps 30` to render the current composition to a high-quality MP4 file.
Pré-visualizar e testar mudanças ao vivo 
Run `npx hyperframes preview --port 3002` to start the preview server and open the HyperFrames studio for interactive testing.

Melhores Práticas

  • Execute os comandos lint e inspect antes de pré-visualizar para capturar problemas estruturais e visuais antecipadamente
  • Use a flag --docker para renders reproduzíveis e byte-a-byte idênticos em diferentes ambientes
  • Use qualidade draft durante iteração e mude para alta qualidade apenas para entrega final

Evitar

  • Não pule os passos de lint e inspect antes de renderizar - erros estruturais podem causar falhas silenciosas
  • Não use 60fps a menos que especificamente necessário - isso dobra o tempo de renderização com benefício visual mínimo
  • Não renderize diretamente para saída final durante desenvolvimento - use qualidade draft para economizar tempo

Perguntas Frequentes

Quais são os requisitos de sistema para HyperFrames CLI?
Node.js versão 22 ou superior e FFmpeg devem estar instalados. Execute npx hyperframes doctor para verificar seu ambiente.
Como renderizo um vídeo sem a janela de pré-visualização?
Use npx hyperframes render com a flag --non-interactive em ambientes CI/CD ou scripts automatizados.
Qual é a diferença entre os comandos lint e inspect?
Lint verifica erros estruturais como atributos faltantes e tracks sobrepostas. Inspect executa a composição em Chrome headless para detectar problemas visuais como overflow de texto.
Como garantir renders consistentes em diferentes máquinas?
Use a flag --docker que executa a renderização dentro de um container Docker com versões fixas de Chrome e FFmpeg.
Posso adicionar narração em áudio na minha composição de vídeo?
Sim, use npx hyperframes tts para gerar text-to-speech, e npx hyperframes transcribe para importar arquivos de áudio ou legendas existentes.
Quais configurações de qualidade devo usar para entrega final?
Use --quality high --fps 30 para entrega final. Use --quality draft durante iteração para economizar tempo.

Detalhes do Desenvolvedor

Licença

MIT

Repositório

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

Referência

main

Estrutura de arquivos

📄 SKILL.md