Todas as skills

hyperframes (heygen-com/hyperframes)

Cria, edita, anima e renderiza vídeos HyperFrames, de filmes de lançamento e explicadores a gráficos e legendas.

Skill HyperFrames: mesma qualidade de vídeo de sem skill, mas 1.9x os tokens e uma estrutura de projeto mais editável

SituacionalAtenção

Codex CLI · gpt-6-astra

19.9 / 30

Ganho sobre sem skill: -0.01 · Situacional · 18 execuções

Situacional: o total 19.9/30 está abaixo de 22 e o ganho -0.01 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

Aprovado

Testado 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.0
Qualidade da saída
4.9
Custo de tokens e tempo
2.0
Instalação e portabilidade
3.0
Segurança
3.0

Revisão de segurança

Atenção

Varredura estática: 27 CRÍTICO / 26 ALTO / 88 MÉDIO. Revisão manual: seguro para executar (sandbox sem rede). Uma varredura limpa não prova que a skill é segura.

Instalar

npx skills@latest add heygen-com/hyperframes --skill hyperframes

Fonte

Commit fixado: af0d68d612ebd9c419f27d9ebc8068512667bae4

Testado: 2026-11-02

O que testamos

  • Teaser de produto de 15 s — Neste projeto HyperFrames (composição raiz index.html, timeline GSAP, renderizado por npx hyperframes render), crie um teaser de produto de 15 segundos, 1920x1080, 30 fps, para a Tidepool, uma assinatura mensal de petiscos de algas. Texto obrigatório na tela: o nome 'Tidepool',…
  • Vídeo explicativo animado com gráfico de barras de 20 s — Neste projeto HyperFrames (composição raiz index.html, timeline GSAP, renderizado por npx hyperframes render), crie um vídeo explicativo animado de 20 segundos, 1920x1080, 30 fps: um gráfico de barras da receita mensal (Aug $42k, Sep $58k, Oct $71k). Título 'Revenue, last 3 months'…
  • Short vertical com legendas de 30 s — Neste projeto HyperFrames (composição raiz index.html, timeline GSAP, renderizado por npx hyperframes render), crie um short vertical para redes sociais de 30 segundos, 1080x1920, 30 fps, com legendas embutidas. Legendas, na ordem, cada uma na tela por cerca de 5 segundos começando em…

Prós

  • A skill foi acionada sem ser nomeada: o arquivo da skill foi lido em 6/6 execuções de tratamento.
  • Qualidade absoluta alta com a skill: 4.89 de 5.

Contras

  • Nenhum ganho mensurável em relação ao grupo sem skill (-0.01, dentro do ruído).
  • Um prompt de uma frase tirou 4.91, contra 4.89 com a skill (-0.01).
  • Usa 1.95x os tokens do grupo sem skill.
  • O controle já tira 4.9: efeito teto, então o teste não consegue mostrar ganho.
  • Ressalva do teste: avalia apenas a orientação da skill: o ciclo da CLI do hyperframes (check, preview, render) não estava disponível no sandbox. A CLI é um pacote npm separado que não auditamos nem executamos, e ela envia telemetria de uso a menos que seja desativada. As skills irmãs hyperframes-core e hyperframes-animation foram testadas no commit mais antigo 207c8a4; esta, no af0d68d.
  • 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 uma máquina de teste Mac, 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). Ambiente: o template do projeto (index.html com a tag de script do GSAP, metadados da composição) é o mesmo para todos os grupos. O sandbox não tem rede nem a CLI do HyperFrames, então nenhum dos grupos conseguiu rodar check, snapshot ou render; eles escreveram apenas o código-fonte. Depois, renderizamos todos os projetos em outra máquina offline com o HyperFrames 0.8.226 fixado (qualidade draft). Isso testa o texto da skill, não o ciclo da CLI.

Comparação entre os braços

BraçoNota média (0-5)Tokens por execução
Sem a skill4.9128k
Prompt de uma frase4.91150k
Com a skill4.89249k

Medido com Codex CLI em 18 execuções, com pontuação por verificações baseadas em regras e sem juiz LLM. Total 19.9 / 30, veredito Situacional.

Divulgação: Avalia apenas a orientação da skill: o loop da CLI do hyperframes (check, preview, render) não estava disponível no sandbox. A CLI é um pacote npm separado que não auditamos nem executamos, e ela envia telemetria de uso a menos que seja desativada. As skills irmãs hyperframes-core e hyperframes-animation foram testadas no commit mais antigo 207c8a4; esta, em af0d68d.

Veredito: Situacional (19.9 / 30). Fonte: heygen-com/hyperframes, skills/hyperframes, fixada no commit af0d68d. Instalação: npx skills@latest add heygen-com/hyperframes --skill hyperframes. Licença: Apache-2.0.

O que é

A skill hyperframes de heygen-com/hyperframes (Apache-2.0): um SKILL.md de 1,100 palavras mais ~25 arquivos de referência e alguns scripts auxiliares, para criar vídeos como HTML que é renderizado em MP4 avançando uma timeline GSAP pausada quadro a quadro. Ela define um contrato de renderização de 12 regras (todo elemento com tempo é class="clip" com data-start/data-duration, uma timeline pausada registrada em window.__timelines, nada não determinístico), uma estrutura editável (uma cena por subcomposição) e um ciclo de trabalho em torno da CLI npx hyperframes (check, snapshot, preview, render).

Como testamos

Codex CLI 0.166 (gpt-6-astra, raciocínio baixo) em um Mac de teste, um projeto temporário novo e HOME/TMPDIR/caches temporários a cada execução, skill instalada (grupo com skill), ausente (controle) ou ausente com o requisito central da skill comprimido em uma frase anexada ao prompt (grupo de uma frase), 2 execuções por grupo por tarefa, rede desativada, gravações em /tmp bloqueadas. Os prompts nunca mencionam a skill (exceto pela formulação indicada abaixo).

Ambiente: o template do projeto (index.html com a tag de script do GSAP, metadados da composição) é o mesmo para todos os grupos. O sandbox não tem rede nem CLI do HyperFrames, então nenhum dos grupos pôde rodar check, snapshot ou render; eles apenas escreveram o código-fonte. Depois renderizamos cada projeto em uma máquina offline separada com o HyperFrames 0.8.226 fixado (qualidade de rascunho). Isso testa o texto da skill, não seu ciclo de CLI.

  1. Teaser de produto de 15 s — Neste projeto HyperFrames (composição raiz index.html, timeline GSAP, renderizado por npx hyperframes render), crie um teaser de produto de 15 segundos, 1920x1080, 30 fps, para a Tidepool, uma assinatura mensal de snacks de algas. Texto obrigatório na tela: o nome 'Tidepool',…
  2. Explicativo animado de gráfico de barras de 20 s — Neste projeto HyperFrames (composição raiz index.html, timeline GSAP, renderizado por npx hyperframes render), crie um explicativo animado de 20 segundos, 1920x1080, 30 fps: um gráfico de barras da receita mensal (ago $42k, set $58k, out $71k). Título 'Revenue, last 3 months…
  3. Short vertical legendado de 30 s — Neste projeto HyperFrames (composição raiz index.html, timeline GSAP, renderizado por npx hyperframes render), crie um short social vertical de 30 segundos, 1080x1920, 30 fps, com legendas queimadas. Legendas, em ordem, cada uma na tela por cerca de 5 segundos começando em…

A pontuação é programática (testes ocultos / detecção de problemas plantados / verificações de restrições / renderização+OCR quando aplicável), de 0 a 5 por execução. Nenhum juiz LLM decidiu qualquer nota.

Resultados

A frase única dada ao terceiro grupo: "Crie como uma composição HTML do HyperFrames: uma raiz com data-composition-id/data-width/data-height/data-duration, todo elemento com tempo recebendo class="clip" mais data-start e data-duration em segundos, uma timeline GSAP pausada registrada como window.__timelines["<composition-id>"], e nada não determinístico (sem Date.now(), Math.random() sem seed, timers, rede ou repeat:-1)."

TarefaNota do controleUma fraseCom a skillTokens do controleTokens da fraseTokens com a skillSkill lida
t1-teaser5.05.04.97140k173k364k2/2
t2-chart4.714.724.71125k116k184k2/2
t3-vertical5.05.05.0117k158k197k2/2

Nota média: 4.9 sem vs 4.89 com a skill (delta -0.01). Tokens por execução: 128k vs 249k (1.95x); tempo 154s vs 208s. Grupo de uma frase: 4.91 (ganho da skill sobre a frase: -0.01; ganho da própria frase sobre sem skill: +0.0); tokens da frase: 150k por execução, então a skill custa 1.67x a frase.

O que aconteceu

  • A qualidade dos vídeos foi a mesma. Todos os 18 projetos renderizaram com o tamanho, o comprimento e a taxa de quadros corretos de primeira, e o texto obrigatório (nome, slogan, $14 / caixa, frase de encerramento, legendas) foi encontrado na tela pelo OCR em toda execução que deveria tê-lo. Nota média 4.90 sem a skill, 4.91 só com a versão de uma frase de suas regras, 4.89 com a skill. Os únicos pontos perdidos, nos três grupos, vêm do fato de o explicativo de gráfico de barras ficar parado por longos trechos (quadros com movimento de 15-23%).
  • A versão de uma frase foi tão bem quanto a skill. Dar ao agente de controle uma única frase do contrato (classe clip, data-start/data-duration, uma timeline pausada, nenhum código não determinístico) produziu as mesmas notas e a mesma aparência: vimos folhas de contato do teaser, do gráfico e do short vertical dos três grupos e não conseguimos classificá-los por qualidade.
  • A skill é lida sempre (6/6 execuções com a skill), mas muda como o projeto é construído, não como ele se parece. Todas as 6 execuções com a skill dividiram o filme em subcomposições (compositions/*.html, uma por cena) como pede sua seção 'mantenha editável'; Nenhuma das 12 execuções sem a skill fez isso. Marcar elementos com tempo como clips variou por grupo, não por skill: as execuções sem skill usaram 0-6 por projeto, as com skill 1-9, e as da frase 3-25. Essa é a parte da skill que importa se alguém for abrir o projeto no HyperFrames Studio depois, e não é pontuada aqui.
  • Custa caro. 249k tokens por execução contra 128k sem a skill (1.94x) e 150k com a frase (1.66x), 15 comandos por execução contra 8, e cerca de 35% mais tempo. O agente lê o SKILL.md e vários arquivos de referência primeiro e, no modo autônomo, ainda escreve SPEC.md, REVIEW.md e um README que ninguém pediu (4.7 arquivos por execução contra 1).
  • Parte da skill não pôde rodar. O ciclo do SKILL.md é check, snapshot, review e então render; sem CLI disponível, os agentes recorreram a arquivos REVIEW.md escritos à mão. Um ambiente com a CLI funcionando poderia mostrar um resultado diferente e talvez pegar erros que os projetos daqui, feitos de primeira, não tinham.

Notas por dimensão

DimensãoNotaPor quê
1_output_quality4.89

Nota média 4.89/5 com a skill (verificações programáticas, veja a tabela por tarefa).

2_lift_vs_no_skill1.99

-0.01 pontos vs 4.90 sem a skill (n=2 por tarefa; abaixo de ~1 ponto é ruído).

3_trigger5.0Arquivo da skill lido em 6/6 execuções com a skill.
4_instructions_portability3

Depende da CLI npx hyperframes e de skills irmãs (/hyperframes-cli, /media-use, /registry); dois arquivos referenciados (SPEC.md, REVIEW.md) são produzidos pelo agente, não vêm no pacote; sem rede, o ciclo não roda.

5_efficiency2

1.95x tokens (249k vs 128k por execução) e 1.35x tempo (208s vs 154s).

6_safety_hygiene3

Texto e scripts revisados: apenas menções de documentação a .env/process.env, uma chamada opcional ao Gemini que precisa da chave do próprio usuário; mas a CLI é baixada com npx em tempo de execução e envia telemetria a menos que seja desativada, e os agentes deixaram arquivos SPEC/REVIEW/README extras.

Limitações deste teste

  • O ciclo da CLI (check, snapshot, preview, render) não estava disponível no sandbox, então isto avalia apenas a orientação da skill; a própria premissa da skill é que a CLI fecha o ciclo.
  • Três tarefas: um teaser de produto, um gráfico de três barras e um short vertical legendado, todos desenhados em código. Filmagens, áudio, mapas, blocos do registry e os recursos de mídia baseados no HeyGen não foram testados.
  • Renderizações em qualidade de rascunho em uma máquina Linux; a verificação de movimento é um limiar grosseiro de diferença entre quadros e a mesma tarefa de gráfico perde pontos em todos os grupos.
  • As contagens estruturais (subcomposições, elementos clip) vêm da leitura dos arquivos-fonte e não fazem parte da nota de 0-30.
  • A licença é Apache-2.0, mas a CLI em que a skill se apoia é um pacote npm separado que não auditamos nem rodamos no computador de teste; ela envia telemetria de uso a menos que seja desativada.
  • n = 2 por grupo por tarefa: diferenças abaixo de cerca de 1 ponto são ruído.
  • A pontuação baseada em regras mede o que as verificações conseguem ver; não avalia gosto nem se o resultado é o melhor possível.

Segurança

Veja security.md. Varredura: 27 CRITICAL / 26 HIGH / 88 MEDIUM. Veredito: seguro para executar (sandbox sem rede). Uma varredura limpa não prova que a skill é segura.

Conclusão

Para vídeos avulsos desenhados em código neste sandbox, a skill não deixou os vídeos melhores e custou cerca do dobro dos tokens; uma frase do seu contrato fez o mesmo trabalho. Seu valor está na estrutura do projeto (uma cena por subcomposição, clipes marcados) para quem vai continuar editando no HyperFrames Studio, e no ciclo de CLI que não pudemos exercitar. Instale se você trabalha com HyperFrames regularmente; pule para renderizações rápidas e descartáveis.

Transcrição

Log de execuções: hyperframes (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-teaser control-1: nota 5.0, tokens 158742, s 258.0, verificações 5/5, nada aberto
t1-teaser control-2: nota 5.0, tokens 122491, s 163.4, verificações 5/5, nada aberto
t1-teaser oneliner-1: nota 5.0, tokens 194827, s 274.5, verificações 5/5, nada aberto
t1-teaser oneliner-2: nota 5.0, tokens 151350, s 215.4, verificações 5/5, nada aberto
t1-teaser treatment-1: nota 4.94, tokens 359882, s 360.9, verificações 5/5, abriu hyperframes
t1-teaser treatment-2: nota 5.0, tokens 370088, s 251.3, verificações 5/5, abriu hyperframes
t2-chart control-1: nota 4.73, tokens 159545, s 126.0, verificações 4/5, nada aberto
t2-chart control-2: nota 4.69, tokens 91764, s 107.4, verificações 4/5, nada aberto
t2-chart oneliner-1: nota 4.74, tokens 118117, s 146.0, verificações 4/5, nada aberto

18 execuções, 21 artefatos

Resultado de exemplo

SOTA · With the skill: compositions/arrival.html (t1-teaser, run 1, Codex)

<template> <style>*{box-sizing:border-box}#root{position:absolute;inset:0;font-family:Arial,Helvetica,sans-serif;color:#173E32}.stage,.artboard{position:absolute;inset:0;width:1920px;height:1080px;overflow:hidden}.artboard{background:#F5F0DF}h1,h2,p{margin:0}.eyebrow{font-size:24px;font-weight:700;letter-spacing:4px;text-transform:uppercase}.rule{height:2px;background:currentColor;opacity:.3}.pouch{position:absolute;width:470px;height:650px}.pouch svg{width:100%;height:100%}.wipe{position:absolute;z-index:20}.serial{position:absolute;left:192px;top:930px;font-size:22px;letter-spacing:3px}.wordmark{font-weight:900;letter-spacing:-8px}.chip{position:absolute;width:400px;height:472px}.chip svg{width:100%;height:100%} </style> <div id="root" data-composition-id="arrival" data-width="1920" data-height="1080" data-duration="5"> <div id="arrival-stage" class="clip stage" data-start="0" data-duration="5" data-track-index="0" data-track-kind="graphics"><div class="artboard"> <svg id="arrival-rings" width="1920" height="1080" style="position:absolute" aria-hidden="true"><g fill="none" stroke="#173E32" stroke-width="2" opacity=".16"><ellipse cx="1450" cy="530" rx="335" ry="335"/><ellipse cx="1450" cy="530" rx="445" ry="445"/><ellipse cx="1450" cy="530" rx="560" ry="560"/></g></svg> <div id="arrival-kicker" class="eyebrow" style="position:absolute;left:192px;top:202px">Meet your monthly ocean fix</div> <div style="position:absolute;left:192px;top:299px;overflow:hidden;width:1000px;height:220px"><h1 id="arrival-title" class="wordmark" data-var-text="brand" style="font-size:192px;line-height:1.1">Tidepool</h1></div> <p id="arrival-copy" data-var-text="tagline" style="position:absolute;left:194px;top:555px;width:820px;font-size:48px;line-height:1.25;letter-spacing:-1px">Crisp seaweed snacks, delivered monthly</p> <div id="arrival-rule" class="rule" style="position:absolute;left:194px;top:750px;width:710px"></div> <p id="arrival-note" style="position:absolute;left:194px;top:785px;font-size:24px;letter-spacing:2px">FROM THE SEA. TO YOUR SNACK DRAWER.</p> <div id="arrival-pouch" class="pouch" style="left:1190px;top:201px"><svg viewBox="0 0 470 650" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Illustrated Tidepool seaweed snack pouch"><defs><linearGradient id="a-foil" x1="0" x2="1"><stop stop-color="#BACA99"/><stop offset=".12" stop-color="#E3E8BC"/><stop offset=".7" stop-color="#D7DFAE"/><stop offset="1" stop-color="#AABA8C"/></linearGradient><pattern id="a-seal" width="8" height="8" patternUnits="userSpaceOnUse"><path d="M0 0V8" stroke="#173E32" opacity=".2" stroke-width="2"/></pattern></defs><path d="M40 15Q235 0 430 15L420 68Q436 350 445 605Q235 640 25 605L48 68Z" fill="url(#a-foil)" stroke="#173E32" stroke-width="3"/><path d="M40 15Q235 0 430 15L425 50H44Z" fill="url(#a-seal)"/><path d="M30 580Q235 600 441 580L445 605Q235 640 25 605Z" fill="url(#a-seal)"/><path d="M48 68H420" stroke="#173E32" stroke-width="3" opacity=".4"/><path d="M64 82L47 565M405 80L423 564" stroke="#FFFBE2" stroke-width="4" opacity=".6"/><text x="235" y="157" text-anchor="middle" fill="#173E32" font-family="Arial, sans-serif" font-size="71" font-weight="900" letter-spacin [... excerpt: first 3200 of 5490 characters]

Ver o Pro