Instalação de plugins: Antes de comandos de configuração ou atualização, siga as regras de execução de plugins quando este skill estiver dentro de um plugin HyperFrames. Instalações independentes mantêm as instruções de atualização abaixo.
Ponto de entrada HyperFrames
HyperFrames renderiza vídeo a partir de HTML — uma composição é um arquivo HTML cujo DOM declara o tempo com atributos data-*, cujo runtime de animação é buscável e cuja reprodução de mídia é controlada pela estrutura. O contrato completo de autoria está em /hyperframes-core; leia-o antes de escrever HTML de composição. Os contratos de briefing, storyboard, revisão, produção, despacho e frame-worker estão em references/ deste skill.
1. Comece pelo estado do projeto
Aplique a primeira linha correspondente; não avalie linhas de estado inferiores:
| Estado | Ação |
|---|---|
| Porte explícito de fonte Remotion existente para HyperFrames | Leia references/routes/remotion-to-hyperframes.md, depois encaminhe diretamente para esse workflow. Pule a camada de intenção. |
| Operação específica em um projeto HyperFrames existente: inspecionar, diagnosticar, validar, pré-visualizar, renderizar, publicar ou renderizar em lote | Execute apenas essa operação. Pule o roteamento de intenção e workflow; carregue /hyperframes-cli e quaisquer habilidades de domínio necessárias. |
| Uma pergunta, uma pausa, uma ideia sem mudança concreta ou uma nota sobre um filme construído, em um projeto existente | Siga /hyperframes-studio § 0. |
| Um novo filme solicitado dentro de um projeto existente | Siga /hyperframes-studio § 5. |
| Edição específica em um projeto existente | Faça a edição. Não execute a camada de intenção. Para saber o que está na linha do tempo de um projeto (faixas, clipes, inícios, fins, o que é reproduzido), execute npx hyperframes timeline [--json] em vez de ler index.html e cada arquivo de sub-composição. |
BRIEF.md existe | Leia workflow e flow. Execute esse workflow; flow: companion sempre é executado em /general-video. Não faça perguntas de briefing. |
Sem briefing, mas hyperframes.json ou STORYBOARD.md existe | Retome dos arquivos do projeto e preferências registradas. Infira o workflow proprietário a partir dos artefatos existentes. Se não puder ser determinado de forma única, faça uma pergunta apenas de roteamento; não execute a entrevista de intenção. |
| Criação nova | Execute a camada de intenção — references/intent-interview.md — depois encaminhe uma vez usando a tabela da § 2. |
Quando você editar um projeto existente, delimite suas edições com o histórico do projeto (/hyperframes-cli, Histórico do projeto em sua vez).
Se uma solicitação nova não identificar o assunto ou a entrada, pergunte sobre o que é o vídeo antes de rotear. Verifique preferências e receitas antes de perguntar qualquer coisa (references/intent-interview.md, passo 1). Uma entrada figma.com ou uma receita nomeada altera a captação, não o roteamento — a seção "Adaptar entradas ortogonais" da entrevista lida com ambas.
Mantenha o CLI do projeto atualizado
Um projeto scaffoldado fixa hyperframes@<versão> em seus scripts package.json para que as renderizações permaneçam reproduzíveis; a fixação nunca avança por conta própria, e uma execução fixada de um CLI antigo não imprime aviso sobre isso. Ao retomar um projeto cujos scripts carregam uma fixação, verifique uma vez antes do primeiro comando que afeta a renderização:
npx hyperframes@latest upgrade --project . --check
A verificação é somente leitura e relata a fixação em relação ao lançamento mais recente; mantenha o . explícito — em versões antigas do CLI, um --project simples seguido de outra flag consome essa flag como valor do diretório. Quando relatar que o projeto está desatualizado — ou qualquer saída do CLI já mostrar isso (o aviso stderr This project pins hyperframes@… (latest …), ou _meta.updateAvailable: true em um resultado --json de um script fixado) — aplique com npx hyperframes@latest upgrade --project ., depois verifique com npx hyperframes check. Uma verificação bem-sucedida confirma que as composições do projeto ainda são válidas na nova versão — não que a saída renderizada seja idêntica quadro a quadro à fixação antiga — portanto, um aumento bem-sucedido nunca é silencioso: nomeie a versão antiga e a nova no resumo da execução. Um projeto sem composição ainda não precisa de verificação. Se a verificação falhar, reverta a alteração no package.json, continue na versão fixada e relate em qual versão o projeto permanece e por quê. Aja com base no sinal, em vez de repassá-lo ao usuário; nunca deixe uma fixação aumentada sem verificação.
2. Roteie a criação nova
Use a primeira linha correspondente. Corresponda ao entregável solicitado, não a uma palavra ou tipo de arquivo mencionado de passagem.
| Prioridade | Solicitação | Workflow |
|---|---|---|
| 1 | Portar explicitamente uma fonte Remotion existente | /remotion-to-hyperframes |
| 2 | Criar uma apresentação, deck de pitch ou deck interativo navegável | /slideshow |
| 3 | Adicionar legendas ou subtítulos simples a filmagens existentes de cabeça falante sem alterá-las | /embedded-captions |
| 4 | Adicionar sobreposições gráficas projetadas a filmagens existentes de cabeça falante, entrevista ou podcast sem alterar a filmagem | /talking-head-recut |
| 5 | Construir um vídeo sincronizado com batida a partir de uma faixa de música, sem narração ou captura de site | /music-to-video |
| 6 | Criar uma unidade explicitamente curta, sem narração, focada em movimento, tipicamente com menos de 10s | /motion-graphics |
| 7 | Explicar um pull request do GitHub ou alteração de código a partir de uma referência de PR | /pr-to-video |
| 8 | Comercializar ou mostrar um site, site de produto, aplicativo ou empresa a partir de uma URL ou briefing específico do site | /product-launch-video |
| 9 | Explicar um tópico, artigo ou notas com visuais inventados e sem captura de produto ou site | /faceless-explainer |
| 10 | Qualquer outro vídeo ou composição personalizada | /general-video |
Antes de finalizar a rota, leia references/routes/<workflow>.md — um arquivo pequeno por rota: o contrato canônico de entrada/saída/acionador (disponível antes que as habilidades de workflow instaladas preguiçosamente estejam presentes) mais a entrada de entrevista dessa rota. Se o candidato não satisfizer seu contrato, continue roteando em vez de forçar a correspondência. Leia apenas o arquivo da rota correspondente.
Resolva ambiguidades comuns
- Um título animado curto, logotipo de vinheta, destaque de estatística, destaque de gráfico, destaque de mapa ou terço inferior independente é
/motion-graphicsquando não é narrado e o movimento é a mensagem. Um cartão de título estático, sequência narrada, montagem mais longa ou loop personalizado é/general-video. - Um gráfico em movimento explicitamente curto pode usar URL, tweet, artigo ou captura de tela como material de origem. Uma solicitação genérica "fazer um vídeo a partir deste site" é
/product-launch-video. - Filmagens existentes com legendas vão para
/embedded-captions; filmagens com cartões de informação projetados vão para/talking-head-recut. Re-temporização, reordenação, recolorização, reenquadramento ou remixagem de filmagens é uma edição personalizada e cai em/general-video. - Um arquivo de música seleciona
/music-to-videoapenas quando sua grade de batida impulsiona a peça. Música usada como fundo não substitui a rota correspondente ao assunto. - "Quero um storyboard" altera o processo de revisão, não o workflow. Sem outro sinal de roteamento, use
/general-video. Umstoryboard.htmlesboçado confirmado pode ser o próprio entregável solicitado; o loop de revisão define esse ponto de parada. - Workflows narrativos especializados suportam até cerca de 3 minutos e são mais fortes em torno de 30–90s. Roteie uma peça claramente mais longa para
/general-video. A duração nunca substitui um porte explícito, deck, legenda, sobreposição ou entregável orientado por música.
3. Roteie uma vez, depois saia
Para criação nova, a camada de intenção (references/intent-interview.md) executa a conversa completa — memória, triagem, rodada de pitch, must-haves, formato de execução, hand-off — e termina escrevendo BRIEF.md. O briefing é o único artefato de roteamento que o workflow lê; nada depois reabre este skill ou a entrevista. Responda a cada pergunta posterior "o que a rota exigiu?" a partir de BRIEF.md.
4. Instale e entre no workflow
Antes de ler o workflow selecionado, instale ou atualize-o junto com as habilidades centrais de domínio:
npx hyperframes skills update <nome-do-workflow>
Use o nome simples sem /. Se o comando falhar, exiba o erro; não reconstrua o workflow de memória. Todo o resto sobre instalação — a divisão core-vs-lazy, o que init atualiza, diagnóstico, exclusão de CI e fallback sem CLI — está em references/skill-lifecycle.md.
5. Carregue habilidades de domínio sob demanda
| Necessidade | Habilidade |
|---|---|
| Estrutura de composição, atributos de tempo, faixas, variáveis, determinismo | /hyperframes-core |
| Regras de movimento, blueprints de cena, transições, adaptadores de runtime | /hyperframes-animation |
GSAP seguro para busca, CSS, Anime.js, WAAPI, FLIP, paths, máscaras, SVG, keyframes 3D ou diagnósticos hyperframes keyframes | /hyperframes-keyframes |
| Especificações de design, conceito, paleta, tipografia, narração, planejamento de batida | /hyperframes-creative |
| Imagens, ícones, logotipos, áudio, legendas, gradações, LUTs, mídia reutilizável | /media-use |
| Corte de voz, cadeias de efeitos de áudio, envelopes de automação ou uma cadeia/fader em várias faixas (barramento de sub-mix) | /hyperframes-audio |
| Init, lint, check, snapshots, compare, renderização em lote, Studio, render, publicar ou diagnósticos | /hyperframes-cli |
| Blocos e componentes de registro | /hyperframes-registry |
| Um visual, efeito, tratamento ou transição nomeada — scanlines CRT, glitch, grão de filme, sweep de brilho, explosão de confete — ANTES de construí-lo manualmente | /hyperframes-registry |
| Ativos, tokens, componentes ou quadros de storyboard do Figma como movimento reconstruído | /figma |
Frases de edição do criador são solicitações de domínio cruzado. Carregue todas as habilidades nomeadas na linha correspondente:
| Solicitação do criador | Domínios necessários |
|---|---|
| "cortar esta filmagem", corte duro, aparar, emendar, reordenar ou usar um intervalo de origem | ... |