hyperframes-core (HeyGen HyperFrames)
Monta uma composição HyperFrames renderizável a partir de HTML, cobrindo estrutura, tempo, mídia e validação.
hyperframes-core: o Codex acerta composições HyperFrames com muito mais frequência usando a skill (controle 4.1, skill 4.9, prompt de uma frase 4.6) e usa menos tokens (0.48x o controle), mas esta skill foi descontinuada do repositório da HeyGen
Codex CLI · gpt-6-astra
25.8 / 30
Ganho sobre sem skill: +0.85 · Situacional · 18 execuções
Situacional: o ganho +0.85 está abaixo de +1.0. Para ser recomendado, é preciso total de 22/30, qualidade da saída de 3.5 e ganho de +1.0.
SOTA
AprovadoTestado com Codex.
Cobre Codex, Claude Code
Codex CLI 0.166 (nível SOTA): 18 execuções avaliadas. Uma aprovação aqui também vale para o Claude Code pela nossa regra de níveis; ela não diz nada sobre o segundo nível.
Notas
Cada dimensão vai de 0 a 5, e as seis somam o total de 30. 5 é melhor em todas as dimensões. Custo 5 significa barato e rápido. Instalação 5 significa fácil.
- Confiabilidade do acionamento
- 5.0
- Ganho sobre sem skill
- 2.9
- Qualidade da saída
- 4.9
- Custo de tokens e tempo
- 5.0
- Instalação e portabilidade
- 4.0
- Segurança
- 4.0
Revisão de segurança
SeguroVarredura estática: 0 CRÍTICO / 0 ALTO / 21 MÉDIO. Revisão manual: seguro para instalar. Uma varredura limpa não prova que a skill é segura.
Instalar
npx skills@latest add heygen-com/hyperframes --skill hyperframes-core
Commit fixado: 207c8a4daf6480d697f203784f1fd422727569e3
Testado: 2026-11-02
O que testamos
- Vídeo explicativo em três cenas — Crie um vídeo de 12 segundos em 1920x1080 como uma composição HyperFrames (um framework open-source que renderiza uma página HTML em MP4 percorrendo uma timeline GSAP quadro a quadro; o GSAP vem de uma tag de script de CDN). Três cenas de 4 segundos cada: um cartão de título ('Meet Orbit'), uma lista de marcadores…
- Corrigir uma composição quebrada — o index.html nesta pasta é uma composição HyperFrames (um framework open-source que renderiza uma página HTML em MP4 percorrendo uma timeline GSAP quadro a quadro; o GSAP vem de uma tag de script de CDN) que renderiza errado (tremida, timing de cena errado, cena 2 invisível…).
- Lower-third reutilizável como subcomposição — Crie um vídeo HyperFrames (um framework open-source que renderiza uma página HTML em MP4 percorrendo uma timeline GSAP quadro a quadro; o GSAP vem de uma tag de script de CDN) de 8 segundos, 1920x1080. Um lower-third reutilizável (nome e cargo que entram deslizando pela esquerda…).
Prós
- Eleva a nota média de 4.09 para 4.94 em relação ao grupo sem skill (+0.85).
- A skill foi acionada sem ser nomeada: o arquivo da skill foi lido em 6/6 execuções de tratamento.
- Sem custo extra de tokens: 0.47x os tokens do grupo sem skill.
- Supera em +0.32 uma versão de uma frase da própria regra.
- Qualidade absoluta alta com a skill: 4.94 de 5.
Contras
- Ressalva do teste: testada no commit 207c8a4 de heygen-com/hyperframes. A skill foi removida depois do HEAD do repositório, então esta avaliação descreve uma versão descontinuada e o comando de instalação pode não funcionar no repositório atual.
- n=2 por tarefa por braço; diferenças abaixo de cerca de 1 ponto são ruído.
Avaliação
Codex CLI 0.166 (gpt-6-astra, raciocínio baixo) em um PC Windows dedicado a testes, um projeto temporário novo e HOME/TMPDIR/caches temporários por execução, skill instalada (tratamento), ausente (controle) ou ausente com o requisito central da skill condensado em uma frase anexada ao prompt (grupo de uma frase), 2 execuções por grupo por tarefa, rede desligada, gravações em /tmp bloqueadas. Os prompts nunca mencionam a skill (exceto o texto indicado abaixo). O HyperFrames é descrito no prompt como “um framework open-source que renderiza uma página HTML em MP4 percorrendo uma timeline GSAP quadro a quadro”, sem detalhes do contrato. Tarefas: criar um vídeo explicativo de 12 segundos em três cenas, corrigir uma composição quebrada (tremor, timing errado) e construir um lower-third reutilizável como subcomposição. O prompt de uma frase enuncia o contrato completo de composição em um parágrafo.
Comparação entre os braços
| Braço | Nota média (0-5) | Tokens por execução |
|---|---|---|
| Sem a skill | 4.09 | 239k |
| Prompt de uma frase | 4.62 | 160k |
| Com a skill | 4.94 | 114k |
Medido com Codex CLI em 18 execuções, com pontuação por verificações baseadas em regras e sem juiz LLM. Total 25.8 / 30, veredito Situacional.
Divulgação: Testada no commit 207c8a4 de heygen-com/hyperframes. A skill foi removida depois do HEAD do repositório, então esta avaliação descreve uma versão aposentada e o comando de instalação pode não funcionar no repositório atual.
Veredito: Situacional (25.8 / 30). Fonte: heygen-com/hyperframes, skills/hyperframes-core, fixado no commit 207c8a4. Instalação: npx skills@latest add heygen-com/hyperframes --skill hyperframes-core. Licença: Apache-2.0 (LICENSE do repositório).
O que é
A skill hyperframes-core de heygen-com/hyperframes, testada no commit 207c8a4 (a skill foi removida do HEAD do repositório depois, então isto descreve uma versão descontinuada). Ela documenta o contrato de composição do HyperFrames: div raiz com data-composition-id/width/height/duration, clipes com tempo definido por data-start/data-duration e class=clip, uma timeline GSAP pausada registrada em window.__timelines[root id], regras de determinismo em tempo de renderização e subcomposições em arquivos separados.
Como testamos
Codex CLI 0.166 (gpt-6-astra, raciocínio baixo) em um PC de testes Windows dedicado, com um projeto temporário novo e HOME/TMPDIR/caches temporários a cada execução, skill instalada (com a skill), ausente (controle) ou ausente com o requisito central da skill comprimido em uma frase anexada ao prompt (grupo do prompt de uma frase), 2 execuções por grupo por tarefa, rede desativada, gravações em /tmp bloqueadas. Os prompts nunca mencionam a skill (exceto pelo texto indicado abaixo).
O HyperFrames é descrito no prompt como "um framework de código aberto que renderiza uma página HTML em MP4 avançando uma timeline GSAP quadro a quadro", sem detalhes do contrato. Tarefas: criar um explicador de 12 segundos em três cenas, corrigir uma composição quebrada (tremores, timing errado) e construir um lower-third reutilizável como subcomposição. O prompt de uma frase enuncia o contrato de composição completo em um parágrafo.
- Explicador em três cenas — Crie um vídeo de 12 segundos em 1920x1080 como um HyperFrames (um framework de código aberto que renderiza uma página HTML em MP4 avançando uma timeline GSAP quadro a quadro; o GSAP vem de uma tag script de CDN). Três cenas de 4 segundos cada: um cartão de título ("Meet Orbit"), uma lista de tópicos l…
- Corrigir uma composição quebrada — O index.html nesta pasta é uma composição HyperFrames (um framework de código aberto que renderiza uma página HTML em MP4 avançando uma timeline GSAP quadro a quadro; o GSAP vem de uma tag script de CDN) que renderiza errado (instável, timing de cena errado, cena 2 invisível, d…
- Lower-third reutilizável como subcomposição — Construa um vídeo HyperFrames (um framework de código aberto que renderiza uma página HTML em MP4 avançando uma timeline GSAP quadro a quadro; o GSAP vem de uma tag script de CDN) de 8 segundos, 1920x1080. Um lower-third reutilizável (nome e cargo que entram deslizando pela esquerda e…
A pontuação é programática (testes ocultos / recuperação de problemas plantados / verificações de restrições / renderização+OCR quando relevante), 0–5 por execução. Nenhum juiz LLM decidiu qualquer pontuação.
Resultados
A frase única dada ao terceiro grupo: "Contrato de composição do HyperFrames: uma raiz autônoma <div data-composition-id data-width data-height data-duration> em <body>; elementos com tempo carregam data-start e data-duration (class=clip); crie UMA gsap.timeline({paused:true}) e registre-a em window.__timelines['<root id>']; determinismo em tempo de renderização: sem Math.random/Date.now/timers/rAF, sem repeat:-1, nunca faça tween de display/visibility/autoAlpha em um clipe; subcomposições ficam em arquivos separados com data-composition-src, conteúdo envolvido em <template>, id do host = id interno = chave da timeline."
| Tarefa | Pontuação do controle | Prompt de uma frase | Com a skill | Tokens do controle | Tokens do prompt de uma frase | Tokens com a skill | Skill lida |
|---|---|---|---|---|---|---|---|
| t1-explainer | 3.33 | 5.0 | 5.0 | 136k | 82k | 98k | 2/2 |
| t2-fix | 3.95 | 3.86 | 4.82 | 377k | 100k | 128k | 2/2 |
| t3-sub | 5.0 | 5.0 | 5.0 | 203k | 298k | 114k | 2/2 |
Pontuação média: 4.09 sem a skill vs 4.94 com a skill (delta +0.85). Tokens por execução: 239k vs 114k (0.47x); tempo 107s vs 79s. Grupo prompt de uma frase: 4.62 (ganho da skill sobre o prompt de uma frase: +0.32; ganho do próprio prompt de uma frase sobre nenhuma skill: +0.53); tokens do prompt de uma frase: 160k por execução, então a skill custa 0.71x o prompt de uma frase.
O que aconteceu
- Controle 4.09, skill 4.94, prompt de uma frase 4.62 (n=6 cada). A maior diferença está no explicador: o controle escreveu tweens de visibility/display ou autoAlpha nos clipes em 2/2 execuções e não registrou a timeline em window.__timelines em 2/2; as duas execuções com a skill e as duas do prompt de uma frase ficaram limpas (5.0).
- Tarefa de correção: a skill pontuou 4.82, contra 3.95 do controle e 3.86 do prompt de uma frase. O controle deixou a raiz sem duração e com tamanho em px fixo em 2/2, e a duração da raiz não cobria o último clipe; as execuções do prompt de uma frase fixaram o tamanho em px e uma não registrou a timeline.
- Tarefa de subcomposição: os três grupos pontuaram 5.0, então um modelo sem nenhuma orientação já lida com
data-composition-srce o wrapper de template quando se pede um componente reutilizável. - Tokens: skill 114k, prompt de uma frase 160k, controle 239k por execução. Sem o contrato, o controle gasta muito mais passos (13 comandos por execução contra 9) tentando descobrir o formato; a skill custa menos do que trabalhar sem orientação alguma.
- Uma verificação, "todo elemento com tempo tem uma duração", falha em 3 execuções, incluindo execuções com a skill; ela conta apenas dois clipes no arquivo da tarefa de correção e é a mesma regra para todos os grupos.
Pontuações por dimensão
| Dimensão | Pontuação | Por quê |
|---|---|---|
| 1_output_quality | 4.94 | Pontuação média de 4.94/5 com a skill (verificações programáticas, veja a tabela por tarefa). |
| 2_lift_vs_no_skill | 2.85 | +0.85 pontos vs 4.09 sem a skill (n=2 por tarefa; abaixo de ~1 ponto é ruído). |
| 3_trigger | 5.0 | Arquivo da skill lido em 6/6 execuções com a skill. |
| 4_instructions_portability | 4 | SKILL.md mais referências; conteúdo específico da CLI do HyperFrames. |
| 5_efficiency | 5 | 0.47x tokens (114k vs 239k por execução) e 0.74x tempo (79s vs 107s). |
| 6_safety_hygiene | 4 | Apenas texto e regras; consulte security.md. |
Limites deste teste
- As verificações são estáticas: a estrutura HTML, as chamadas GSAP e o registro da timeline foram analisados, mas nenhum quadro foi renderizado (a CLI do hyperframes, o Chrome e o FFmpeg não foram executados).
- A skill foi testada no commit 207c8a4 porque o HEAD não a contém mais; o comando de instalação da análise pode não funcionar no repositório atual.
- n=2 por célula; a contagem de tokens do controle é inflada por algumas execuções muito longas (até 440k).
- Os prompts descrevem o HyperFrames em uma frase; um agente com acesso à web poderia consultar a documentação, mas a rede estava desativada.
- n = 2 por grupo por tarefa: diferenças abaixo de ~1 ponto são ruído.
- A pontuação baseada em regras mede o que as verificações conseguem ver; ela não julga bom gosto nem se o resultado é o melhor possível.
Segurança
Consulte security.md. Varredura: 0 CRITICAL / 0 HIGH / 21 MEDIUM. Veredito: seguro para executar (sandbox sem rede). Uma varredura limpa não prova que uma skill é segura.
Conclusão
Onde o formato é desconhecido, a skill reduz aproximadamente pela metade a chance de erros de contrato e economiza tokens. Um parágrafo enunciando o contrato recupera a maior parte do benefício. Como a skill não está mais no repositório do fornecedor, trate o resultado como um registro daquela versão anterior.
Transcrição
Log de execuções: hyperframes-core (Codex CLI, network off, per-run temp HOME/TMPDIR, one row per graded run.) Colunas: tarefa, grupo-execução, nota (0-5), tokens, segundos, verificações aprovadas, arquivos da skill abertos pelo agente. t1-explainer control-1: nota 3.1, tokens 140793, s 87.3, verificações 7/11, nada aberto t1-explainer control-2: nota 3.57, tokens 132979, s 80.3, verificações 8/11, nada aberto t1-explainer oneliner-1: nota 5.0, tokens 90890, s 75.8, verificações 11/11, nada aberto t1-explainer oneliner-2: nota 5.0, tokens 73311, s 72.9, verificações 11/11, nada aberto t1-explainer treatment-1: nota 5.0, tokens 111517, s 90.6, verificações 11/11, abriu hyperframes-core t1-explainer treatment-2: nota 5.0, tokens 84676, s 102.2, verificações 11/11, abriu hyperframes-core t2-fix control-1: nota 3.95, tokens 314272, s 165.7, verificações 7/10, nada aberto t2-fix control-2: nota 3.95, tokens 440614, s 142.2, verificações 7/10, nada aberto t2-fix oneliner-1: nota 3.77, tokens 108753, s 81.4, verificações 7/10, nada aberto
18 execuções, 3 artefatos
Resultado de exemplo
SOTA · With the skill: index.html (t1-explainer, run 1, Codex)
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=1920, height=1080"> <title>Meet Orbit — 12-second film</title> <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script> <style> * { box-sizing: border-box; } html, body { width: 100%; height: 100%; margin: 0; } body { background: #f3f0e7; color: #202d29; font-family: system-ui, sans-serif; } #root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #f3f0e7; } .brand { position: absolute; top: 66px; left: 100px; display: flex; align-items: center; gap: 16px; font-size: 32px; font-weight: 750; letter-spacing: -1px; } .brand-mark { width: 30px; height: 30px; border: 8px solid #e65932; border-radius: 50%; } .edition { position: absolute; top: 77px; right: 100px; font-size: 18px; letter-spacing: 3px; } .clip { position: absolute; inset: 0; } .scene { width: 100%; height: 100%; padding: 190px 100px 150px; display: flex; align-items: center; gap: 65px; } .copy { flex: 1; position: relative; z-index: 2; } .eyebrow { margin: 0 0 30px; font-size: 21px; font-weight: 650; letter-spacing: 4px; text-transform: uppercase; color: #52635b; } h1, h2, p { margin: 0; } h1 { font-size: 150px; line-height: 1.05; letter-spacing: -10px; font-weight: 650; } h2 { font-size: 86px; line-height: 1.07; letter-spacing: -5px; font-weight: 650; } .subtitle { margin-top: 34px; font-size: 31px; line-height: 1.5; color: #52635b; } .art { width: 760px; height: 650px; flex: none; } .orbit-svg { display: block; width: 100%; height: 100%; overflow: visible; } .footer { position: absolute; bottom: 65px; left: 100px; right: 100px; display: flex; justify-content: space-between; font-size: 18px; letter-spacing: 2px; color: #52635b; } .progress-track { position: absolute; bottom: 0; left: 0; right: 0; height: 7px; background: #deded3; } .progress { width: 100%; height: 100%; background: #e65932; transform-origin: left center; } .features-copy { max-width: 650px; } .features { list-style: none; margin: 0; padding: 0; width: 930px; } .feature { display: flex; align-items: center; gap: 30px; padding: 39px 0; border-bottom: 2px solid #ced3c9; font-size: 43px; font-weight: 550; letter-spacing: -1.5px; } .feature:first-child { border-top: 2px solid #ced3c9; } .number { display: grid; place-items: center; width: 66px; height: 66px; flex: none; border-radius: 50%; background: #202d29; color: #f3f0e7; font-size: 22px; letter-spacing: 0; } .feature-dot { margin-left: auto; color: #e65932; font-size: 40px; } .closing { justify-content: center; text-align: center; } .closing-copy { width: 1300px; } .closing h2 { font-size: 119px; letter-spacing: -7px; } .cta { display: inline-flex; align-items: center; justify-content: center; gap: 50px; margin-top: 48px; padding: 26px 42px; border-radius: 100px; background: #e65932; color: #17251f; font-size: 32px; font-weight: 650; } .cta-arrow { font-size: 40px; line-height: 1; } .closing-icon { display: block; width: 84px; height: 84px; margin: 0 auto 38px; border: 19px solid [... excerpt: first 3200 of 7731 characters]