Communitygithub.com

general-video

Fluxo de trabalho de direção de pós-produção de vídeo para HyperFrames, gerenciando edição temporal, composição, animação e revisão colaborativa para a criação de conteúdo profissional em vídeo.

O que é general-video?

Esta skill do HyperFrames define um fluxo de trabalho estruturado para criação e edição profissional de vídeos. Ela orquestra todo o processo, desde a interpretação de briefings, configuração de adaptadores de mídia e Figma, até a execução da composição com planos de cena, animações e transições. A skill suporta dois modos de operação: automação (onde o agente toma decisões de forma independente) e modo companion (onde o agente atua como co-criador, apresentando propostas ambiciosas para o usuário refinar). Um aspecto fundamental é a obrigatoriedade de pesquisa no catálogo de blocos e componentes hospedados (ex: `npx hyperframes catalog --query "..." --json`) antes de criar qualquer efeito visual do zero, garantindo reuso e eficiência. A skill integra-se com `/hyperframes`, `/hyperframes-core`, `/hyperframes-creative`, `/hyperframes-animation`, `/media-use`, e gerencia autenticação de provedores de mídia, fluxo de revisão e exportação final.

Funciona com~Claude Code✓Codex CLI~Cursor
npx skills add https://github.com/heygen-com/hyperframes/tree/main/skills/general-video

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

Vídeo Geral

Antes de confiar neste fluxo de trabalho, execute:

npx hyperframes skills update general-video

Um no-op bem-sucedido significa que a skill está atualizada. Reporte uma falha de atualização em vez de continuar com base na memória.

1. Aplicar adaptadores de fonte transversais

  • Mídia: Para qualquer necessidade de áudio, imagem, ícone, logotipo, locução, gradação, LUT, tratamento/efeito, legenda ou operação de mídia, carregue /media-use e siga ../media-use/references/resolve.md (resolver, adotar, reutilizar) e ../media-use/references/setup-providers.md (provedores, autenticação). Feedback vago de filmagem e estilos nomeados usam ../media-use/references/media-treatments.md antes da edição; não improvise efeitos de mídia suportados com CSS/SVG/opacidade. Antes da primeira ação autenticada do provedor, execute npx hyperframes auth status e repita sua saída literalmente. Se desconectado, aplique a barreira em ../hyperframes/references/brief-contract.md: colaborativo aguarda o login ou uma escolha offline explícita; autônomo informa o status e continua por meio de um provedor offline disponível. Reporte um bloqueio quando nenhum provedor offline puder satisfazer uma capacidade necessária. A adoção local por si só não requer barreira de autenticação.
  • Figma: Se qualquer entrada for uma URL figma.com, execute /figma primeiro. Construa a partir de seus ativos exportados, tokens, componentes ou quadros de storyboard. Não use chamadas brutas do conector Figma porque elas ignoram a sanitização de SVG, a proveniência de mídia e a vinculação de token de marca.

Estes adaptadores não alteram o fluxo de trabalho selecionado por /hyperframes.

2. Iniciar a partir do estado do projeto

Aplique a primeira linha correspondente; não avalie linhas de estado inferiores:

EstadoAção
Edição específicaFaça a edição, preserve as decisões existentes do projeto, então reexecute as verificações afetadas. Não reabra a descoberta.
BRIEF.md existeLeia-o. Se workflow nomear outro fluxo de trabalho e flow não for companion, passe adiante. Não faça perguntas do brief.
Sem brief, mas hyperframes.json ou STORYBOARD.md existeRetome dos arquivos e preferências registradas. Preencha BRIEF.md apenas com fatos conhecidos.
Criação novaExecute /hyperframes e sua camada de intenção. Retorne aqui apenas para workflow: general-video ou flow: companion.

Para um novo projeto, escolha um nome de diretório em kebab-case a partir do brief e crie o esqueleto antes de escrever o brief:

npx hyperframes init "videos/<projeto>" --non-interactive --example=blank --skill=general-video

Em seguida, escreva BRIEF.md na raiz do projeto usando ../hyperframes/references/brief-format.md. Em um projeto existente, a raiz é o diretório que contém hyperframes.json. Registre apenas os campos com preferência confirmada nomeados pelo formato do brief, usando node <MEDIA_DIR>/scripts/prefs.mjs record --hyperframes <PROJECT_ROOT>; nunca registre padrões inferidos. Aqui <MEDIA_DIR> é o diretório da skill /media-use instalada e <PROJECT_ROOT> é o diretório que contém hyperframes.json. Se a camada de intenção adotou uma receita, aplique-a agora com node <MEDIA_DIR>/scripts/recipe.mjs use --hyperframes <PROJECT_ROOT> --name <nome> e não pergunte novamente.

3. Interpretar a forma da execução

Use apenas os termos canônicos de ../hyperframes/references/brief-contract.md:

CampoSignificadoEfeito
flowQuem dirigeautomation: escolha e execute a rota. companion: cocrie em conversa.
storyboardPlanejar, esboçar e revisar antes de construiryes: execute o plano e a revisão do esboço (storyboard.html). no: construa sem ele.
mode derivadoComo os portões de verificação se comportamSiga o contrato do brief. Nunca peça ao usuário para nomear um modo.

Não invente sinônimos para esses estados. Um sinal contínuo de "apenas construa" é tratado pela camada de intenção e chega como flow: automation, storyboard: no.

  • Para flow: automation, escolha a rota e declare-a em uma linha na primeira atualização de progresso.
  • Para uma edição específica, faça a edição sem inventar uma nova rota.

Para um corte bruto, ajuste, emenda ou reordenamento de filmagem existente, duplique a mesma fonte de vídeo em vários elementos de clipe. Em cada cópia, defina o intervalo de origem com data-media-start mais data-duration, então defina o posicionamento/ordem autoral com data-start. Áudio autorado separadamente segue os intervalos e temporização idênticos do clipe em elementos <audio> correspondentes. /hyperframes-core é dono desta edição temporal; use /hyperframes-keyframes apenas para animação de propriedades visuais como zoom, perfuração, panorâmica, corte, máscara ou clip-path em um invólucro interno. Copie os contratos completos de ../hyperframes-core/references/creator-editing-recipes.md.

Fluxo companion

Quando flow: companion:

  • Leia BRIEF.md e reconcilie os ## Assets e ## Customizations aceitos com os artefatos do projeto. Complete o trabalho aceito que ainda está pendente; deixe o trabalho concluído em paz; não ofereça uma capacidade aceita novamente como se fosse nova.
  • Chegue como o diretor, não o empreiteiro. Um usuário que escolheu companion escolheu envolvimento e qualidade; a resposta honesta é a melhor versão que você pode projetar, não a menor que você pode defender. O primeiro plano é o tratamento teto: o arco da história (pegue emprestada a lente de gênero mais próxima — menu § Lentes de gênero), a especificação de design, o tratamento de movimento de cada cena citado pelo nome (§ 5 da disciplina do plano), as transições, a identidade de áudio — música e marcas sonoras, ou silêncio deliberado — o material do usuário colocado, e uma abertura e fechamento projetados. Diga o que cada camada adiciona em uma linha; sinalize as caras (tempo de renderização, login, cobrança) ao nomeá-las. O usuário reduz um tratamento; eles nunca devem ter que montar um, aprovação por aprovação.
  • O teto pertence ao conceito, não à caixa de ferramentas. Cada camada deve servir à mensagem do brief — um tratamento que vestiria qualquer vídeo da mesma forma é decoração. O trabalho artesanal sobe ao teto; o conteúdo nunca cresce além do que foi solicitado (§ 6).
  • Entre os pontos de verificação, ../hyperframes/references/capability-menu.md funciona de duas maneiras. Como lista de gatilho: ofereça uma capacidade relevante quando o usuário mencionar sua entrada ou a construção atingir sua necessidade. Como canal de atualização de cada passagem: um plano, esboço ou ponto de verificação de construção pode carregar uma ou duas ofertas rastreadas apontadas para o material que o usuário está olhando ("o stat da cena 3 quer o tratamento de contagem"). Leia antes de oferecer; nunca despeje o catálogo completo.
  • Após o usuário aceitar uma capacidade, produza seu artefato e registre a decisão na seção correspondente do corpo de BRIEF.md imediatamente. Reescreva um campo de frontmatter e registre a preferência confirmada apenas quando o usuário a alterar explicitamente.
  • Mantenha os mesmos portões de storyboard, validação, pré-visualização final e aprovação de renderização. Companion muda quem dirige, não o que a qualidade exige.

4. Carregar conhecimento necessário antes de cada etapa

Estas leituras são obrigatórias quando sua condição corresponder:

CondiçãoLeia antes de agir
Qualquer HTML de composição ou layout de cena/hyperframes-core; use references/determinism-rules.md para seu contrato de layout
Qualquer criação ou tratamento visual não trivial/hyperframes-creative → references/house-style.md e references/video-composition.md
Qualquer movimento, animação ou transição de cena/hyperframes-animation; siga seu roteamento para as regras, adaptadores, blueprints ou referências de transição correspondentes
storyboard: yes../hyperframes/references/storyboard-format.md e ../hyperframes/references/review-loop.md
Qualquer ativo ou operação de mídia, incluindo narração, BGM, SFX, legendas, gradação ou transformações/media-use; para reprodução e posicionamento do framework, leia também /hyperframes-core → references/variables-and-media.md
Montagem de múltiplas cenas../hyperframes/references/production-loop.md
flow: companion, antes do primeiro plano/hyperframes-creative → references/story-spine.md e references/house-style.md; a lente de gênero mais próxima e o ../hyperframes/references/capability-menu.md completo — o tratamento teto é projetado a partir destes, não lembrado
Uma oferta de capacidade companion, captura, grade de batidas, vídeo generativo, mapa, publicação ou capacidade de fluxo de trabalho cruzado../hyperframes/references/capability-menu.md
Uma especificação de design existe, antes da aprovação final/hyperframes-creative → references/design-adherence.md

Não substitua estas leituras por lembrança. A divulgação progressiva economiza contexto apenas quando a referência correspondente é realmente carregada.

5. Executar a composição

Use esta ordem de dependência. Pule uma etapa apenas quando sua entrada estiver ausente.

  1. Plano. Declare o arco do espectador, estrutura, ritmo e driver de duração. Use um arquivo para uma cena única curta; use subcomposições para três ou mais cortes bruscos de cena ou qualquer cena reutilizada. Leia /hyperframes-creative → references/story-spine.md para arcos narrados, references/beat-direction.md para ritmo e /hyperframes-core → references/composition-patterns.md para estrutura. Para um brief de múltiplas cenas aberto, expanda o prompt através de /hyperframes-creative → references/prompt-expansion.md. Um plano de múltiplas cenas cita a forma de cada cena: um id de blueprint de /hyperframes-animation → blueprints-index.md quando um se encaixa, ou as regras nomeadas que ele compõe de rules-index.md quando nenhum se encaixa — nomes de movimento vêm desses índices, nunca inventados. A verdade da história decide quais cenas existem; a citação as veste. Pesquise o catálogo ativo antes de planejar construir qualquer visual nomeado você mesmo: para cada visual, efeito, tratamento ou transição que o brief nomeia — "scanlines CRT", "glitch", "grão de filme", "varredura cintilante", "explosão de confete" — execute npx hyperframes catalog --query "<o visual, em português claro>" --json e leia os principais resultados antes que o plano nomeie como esse visual será construído. A pesquisa não precisa de nada instalado: nenhum projeto, nenhum add anterior, nenhuma conta. Ela classifica todo o registro hospedado (~400 blocos e componentes) de qualquer diretório, portanto, também se aplica a um visual que o usuário solicita no meio da construção. Blocos que o plano nomeia são instalados na etapa 3; crie um visual manualmente apenas depois que uma pesquisa por ele não retornar nada que se encaixe. Um plano de múltiplas cenas também é registrado como o artefato de despacho: um bloco ## Quadro N por cena em STORYBOARD.md — status: outline, um src: declarado, a citação de blueprint/regras e o texto da batida — mesmo quando storyboard: no. O bloco é a unidade de despacho; a folha de storyboard é apenas a superfície de revisão.
  2. Revisar o plano quando solicitado. Para storyboard: yes, execute o loop de revisão compartilhada sobre esses blocos. Para storyboard: no, continue sem pausa de plano ou folha de esboço. Quando uma pausa de plano acontece de qualquer forma, dobre a concessão de delegação de subagente (necessária pelo codex para o despacho da etapa 4) nessa pausa, em vez de parar novamente mais tarde.
  3. Resolver dependências. Instale blocos do registro antes do trabalho paralelo. Prepare ativos do usuário, adote ativos existentes e resolva provedores offline primeiro. Após a instalação, execute a verificação de integridade.
  4. Despachar construção paralela. Emita cada bloco de cena como uma chamada de ferramenta para o dispatcher de composição. O dispatcher cria subcomposições, aplica regras de movimento e transições, e monta o quadro de cena final. Após a conclusão, carregue a saída e execute a verificação de qualidade.
  5. Revisão visual. Para storyboard: yes, apresente o storyboard renderizado para aprovação do usuário. Para flow: companion, o usuário pode solicitar alterações neste ponto. Para flow: automation, prossiga sem aprovação.
  6. Montagem final. Concatene todas as cenas, aplique transições globais, mistura de áudio e legendas. Execute a verificação de exportação final.
  7. Renderização e entrega. Renderize o vídeo final no formato e codec especificados. Carregue para o destino configurado ou deixe o artefato no caminho de saída do projeto.

6. Verificações de qualidade e aderência

Cada verificação deve ser executada após sua condição de gatilho. A falha de qualquer verificação bloqueia a progressão até que o teste passe novamente.

VerificaçãoCondição de gatilhoAção de sanção
Aderência ao designespecificação de design existeCorresponder a saída renderizada contra a especificação de design com references/design-adherence.md
Consistência da históriaPlano de múltiplas cenasVerificar cada cena contra seu status: e src:
Aderência à marcaLogotipos ou ativos de marca carregadosVerificar posicionamento, escala e variantes de cor
Qualidade de áudioFaixas de áudio presentesVerificar níveis, clipe, ruído de fundo
Legibilidade de legendasLegendas codificadasVerificar tempo, contraste, comprimento de linha

7. Diretrizes do modo companion

  • Sempre enquadre a resposta do agente como um diretor colaborativo: "Aqui está o que a história pede..." vs. "Aqui está o que eu fiz."
  • Nunca recue para uma resposta mínima ou defensiva. O teto é o design que melhor serve à mensagem, não o mais fácil de implementar.
  • Documente cada decisão de design aceita na seção ## Customizations de BRIEF.md para manter a consistência entre as execuções.
  • Se o usuário rejeitar um tratamento, registre o motivo e a preferência, e ofereça uma alternativa que mantenha a integridade do design geral.

8. Tratamento de erros e fallback

  • Se um provedor de mídia autenticado falhar, faça fallback para um provedor offline se disponível. Se nenhum provedor offline puder satisfazer, relate um bloqueio claro.
  • Se uma etapa de composição falhar (ex: dispatcher excede tempo limite), carregue a saída parcial e continue se a falha for isolada; caso contrário, reporte o erro e ofereça um plano de correção.
  • Se a pesquisa de catálogo (npx hyperframes catalog ...) não retornar resultados, apenas então prossiga com a criação manual do efeito. Isto mantém a eficiência e evita reinventar a roda.

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

heygen-com/animejs

Anime.js adapter patterns for HyperFrames. Use when writing Anime.js animations or timelines inside HyperFrames compositions, registering animations on window.__hfAnime, making Anime.js seek-driven and deterministic, or translating Anime.js examples into render-safe HyperFrames HTML.

heygen-com/claude-design-hyperframes

Use when running inside Claude Design specifically. Produces a valid, brand-accurate HyperFrames video draft using pre-valid skeletons. For Claude Code / Cursor / Codex, use the `hyperframes` skill instead.

heygen-com/contribute-catalog

Author a new HyperFrames registry block (caption style, VFX block, transition, lower third) or component (text effect, overlay, snippet) and ship it as an upstream PR to the hyperframes repo. Use ONLY when the user wants to CONTRIBUTE to the public catalog — for in-project caption/transition authoring use the `hyperframes` skill, for installing existing registry items use the `hyperframes-registry` skill.

heygen-com/css-animations

CSS animation adapter patterns for HyperFrames. Use when authoring CSS keyframes, animation-delay based timing, animation-fill-mode, animation-play-state, or CSS-only motion that HyperFrames must seek deterministically during preview and rendering.

heygen-com/gsap

GSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labels, nesting, playback), and performance (transforms, will-change, quickTo). Use when writing GSAP animations in HyperFrames compositions.

heygen-com/hyperframes

Leaves sweep through the frame and part to reveal the headline. HyperFrames block, 1920×1080, 12s, 11 variables.

heygen-com/hyperframes

Render-correctness doctrine for scene-to-scene seams in HyperFrames launch videos — the prerequisites that make transitions composite correctly on the master timeline. Load when assembling the master timeline / index.html, when a white flash appears at a cut or crossfade seam (especially on dark films), when reasoning about why a transition opacity dip shows through, or when verifying the render-side mechanics of how overlapping scene wrappers blend. Covers the opaque stage-ground (#root background) white-flash guard and how the injector overlaps wrappers, holds final frames, ping-pongs tracks, and stamps lint-clean template code onto the master timeline. Does NOT contain the per-transition catalog — see the transition registry for individual transition entries.

heygen-com/hyperframes

The technique catalog: five velocity-matched SEAMS (zoom-through, INVERSE zoom-through, cut-the-curve, waterfall cut, rack-focus blur-cut) plus the two in-scene techniques — waterfall ENTRY (staggered arrival cascades for title cards / segment openers) and the nudge curve (slow-fast-slow three-phase group slides). Covers partial-travel (~12% of frame) velocity matching via mirrored power4 eases, the Z scale-sign rule, size-scaled blur (10px text / 18-20px full-frame), word-by-word staggered cuts, cascade pacing by element weight, and the 10/65/25 slide ratio. Read before authoring any transition, text-beat handoff, kinetic text entry, or group reposition. [depth, zoom, inverse-zoom, scale-sign, mirrored-zoom, rack-focus, pacing, velocity, cut-the-curve, waterfall, stagger, cascade, kinetic-text, title-card, segment-opener, nudge, slide, easing, group-motion, z-depth, motion-graphics, cinematic, transition, blur, directional-continuity]

heygen-com/hyperframes

Glass shards fly in through fog and tile themselves into the headline. HyperFrames block, 1920×1080, 12.16s, 19 variables.

heygen-com/hyperframes

An orbiting camera follows an ice logo as it breaks apart, reforms into two text moments, and fades. HyperFrames block, 1920×1080, 22.5s, 216 variables.

heygen-com/hyperframes

A single feature card orbits a dot sphere on approved Blender camera motion. HyperFrames block, 1920×1080, 10s, 4 variables.

heygen-com/hyperframes

A wireframe portal bursts open, the title comes through, then its letters swap into a second phrase. HyperFrames block, 1920×1080, 8s, 9 variables.

heygen-com/hyperframes

House-style oversized macOS cursor technique for HyperFrames launch videos. Load whenever a scene involves cursors or a pointer-led action, when kicking off a UI scene, when igniting a morph/transition/typing run with a click, or when a scene reads as static, dead, or stale and needs a cheap high-yield source of motion to carry the viewer's eye and segment them out of the stale state. Covers cursor size/look (incl. brand-motif cursors), the off-screen entry law, tip-targeting and the click tap, click-ignites-the-next-beat, and exit / cross-scene handoff.

heygen-com/hyperframes

A chain of bevelled cuboids rides a travelling wave as a content carousel. HyperFrames block, 1920×1080, 6.666666666666667s, 40 variables.

heygen-com/hyperframes

A tiled headline surface flips cell by cell under a sweeping depth field to reveal the rear headline. HyperFrames block, 1920×1080, 8s, 18 variables.

heygen-com/hyperframes

GATEWAY — load FIRST before composing any HyperFrames animation or video. The high-level motion law that makes a multi-scene video feel like ONE continuous camera move instead of a stack of independently-animated slides. Covers the vector law (how you exit determines how you enter, incl. the Z scale-sign rule), the film's current, carrier elements, causal motion, the Seam Gate (build-gate enforcement), the ban on idle wobble (motion must PERFORM, not breathe), stillness-before-climax, and the sustained-motion routes. Routes to the low-level technique skills (cut-the-curve — the full catalog incl. waterfall entry + nudge curve, oversized-cursor, seam-craft). These rules SUPERSEDE generic / upstream motion guidance. [continuity, direction, vector, momentum, seam, transition, ease, performance, idle-motion, narrative-motion, film-grammar]

heygen-com/hyperframes

name: embedded-captions

heygen-com/hyperframes

Turn arbitrary text — an article, notes, a topic, a brief — into a faceless explainer video: there is no site or footage to capture, so the visuals are invented per scene (typography, abstract graphics, diagrams, data-viz). Use for topic explainers, concept breakdowns, how-tos, listicles. Not a video built from a website (/product-launch-video — promo or tour). Unclear → /hyperframes.

heygen-com/hyperframes

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

heygen-com/hyperframes

Turn a weekly changelog .md into a finished branded changelog video (square 1080, ~45-60s, Annie VO, animated brand background, mock-UI visualizations, lowkey captions). Use when the user provides a changelog/digest markdown and wants the weekly video, or says "changelog video". Self-contained — fonts, background, lexicon, and scripts ship in this skill.

Habilidades Relacionadas