Communitygithub.com

general-video

Skill para criação e edição de vídeos usando Hyperframes, com suporte a fluxos automatizados e colaborativos.

O que é general-video?

O skill **general-video** (vídeo geral) fornece um workflow completo para criação e edição de projetos de vídeo utilizando a plataforma Hyperframes. Ele suporta tanto fluxos automatizados (`automation`) quanto colaborativos (`companion`), onde o desenvolvedor ou usuário dirige o processo criativo. O skill integra-se com adaptadores de mídia (`/media-use`) para tratar áudio, imagens, logotipos, vozes, legendas e efeitos, e também com adaptadores do Figma para importar ativos de design. O fluxo de trabalho começa lendo o estado do projeto (a partir de um `BRIEF.md`, `hyperframes.json` ou storyboard), interpreta a forma de execução (quem dirige, se há revisão visual) e executa as etapas de planejamento, construção de cenas, animação, revisão e renderização final. Para cenas múltiplas, utiliza blueprints e regras de animação pré-definidas, garantindo consistência e evitando improvisos. É ideal para desenvolvedores e criadores que desejam automatizar ou colaborar na produção de vídeos com qualidade profissional, mantendo controle sobre cada etapa criativa.

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

Perguntar na sua IA favorita

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

Documentação

General video

Antes de confiar neste workflow, execute:

npx hyperframes skills update general-video

Um no-op bem-sucedido indica que o skill está atualizado. Informe uma falha de atualização em vez de continuar a partir da memória.

1. Aplicar adaptadores de fonte transversais

  • Mídia: Para qualquer necessidade de áudio, imagem, ícone, logotipo, voz, nota, 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 filmagens e estilos nomeados usam ../media-use/references/media-treatments.md antes de editar; 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 transmita sua saída literalmente. Se estiver desconectado, aplique a proteção em ../hyperframes-core/references/brief-contract.md: colaborativo aguarda login ou uma escolha explícita offline; autônomo informa o status e continua através de um provedor offline disponível. Informe um bloqueio quando nenhum provedor offline puder atender a uma capacidade necessária. A adoção local por si só não exige proteção 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, pois elas ignoram a sanitização SVG, a proveniência de mídia e a vinculação de token de marca.

Esses adaptadores não alteram o workflow selecionado por /hyperframes.

2. Começar 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 e, em seguida, reexecute as verificações afetadas. Não reabra a descoberta.
BRIEF.md existeLeia-o. Se workflow nomear outro workflow e flow não for companion, repasse. Não faça perguntas sobre o brief.
Sem brief, mas hyperframes.json ou STORYBOARD.md existeRetome a partir dos arquivos e preferências registradas. Preencha BRIEF.md apenas a partir de 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-core/references/brief-format.md. Em um projeto existente, a raiz é o diretório que contém hyperframes.json. Registre apenas os campos confirmados baseados em preferências 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 do skill /media-use instalado 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 de execução

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

CampoSignificadoEfeito
flowQuem dirigeautomation: escolha e execute a rota. companion: cocrie em conversa.
storyboardSe o quadro é uma superfície de revisãoyes: execute revisão de plano e esboço. no: construa sem o quadro.
mode derivadoComo os portões de checkpoint 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 brusco, corte, emenda ou reordenação 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 e, em seguida, defina o posicionamento/ordem criado com data-start. O áudio criado separadamente segue os intervalos de clipe e temporização idênticos nos elementos <audio> correspondentes. /hyperframes-core possui esta edição temporal; use /hyperframes-keyframes apenas para animação de propriedade visual, como zoom, soco, 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 Companheiro

Quando flow: companion:

  • Leia BRIEF.md e reconcilie ## 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 contratante. Um usuário que escolheu companheiro 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 emprestado 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 de plano), as transições, a identidade de áudio — marcas musicais e 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, faturamento) 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 ofício sobe ao teto; o conteúdo nunca cresce além do que foi solicitado (§ 6).
  • Entre checkpoints, ../hyperframes/references/capability-menu.md funciona de duas maneiras. Como a lista de gatilhos: ofereça uma capacidade relevante quando o usuário mencionar sua entrada ou a construção atingir sua necessidade. Como o canal de atualização de cada passagem: um checkpoint de plano, esboço ou construção pode carregar uma ou duas ofertas rastreadas apontadas para o material que o usuário está olhando ("a estatística da cena 3 quer o tratamento de contagem regressiva"). Leia antes de oferecer; nunca despeje o catálogo completo.
  • Depois que o usuário aceitar uma capacidade, produza seu artefato e registre a decisão na seção correspondente do corpo BRIEF.md imediatamente. Reescreva um campo do 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. Companheiro 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 não trivial ou tratamento visual/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-core/references/storyboard-format.md e ../hyperframes-core/references/review-loop.md
Qualquer ativo ou operação de mídia, incluindo narração, BGM, SFX, legendas, correção de cor ou transformações/media-use; para reprodução e posicionamento do framework, leia também /hyperframes-core → references/variables-and-media.md
Montagem de várias cenas../hyperframes-core/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 recuperado
Uma oferta de capacidade companheira, captura, grade de batida, vídeo generativo, mapa, publicação ou capacidade entre workflows../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 essas leituras por recordação. 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 direcionador de duração. Use um arquivo para uma única cena 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 várias cenas aberto, expanda o prompt através de /hyperframes-creative → references/prompt-expansion.md. Um plano de várias 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. Um plano de várias cenas também é registrado como artefato de despacho: um bloco ## Frame N por cena em STORYBOARD.md — status: outline, uma src: declarada, a citação de blueprint/regras e o texto da batida — mesmo quando storyboard: no. O bloco é a unidade de despacho; o quadro é apenas a superfície de revisão.

  2. Revisar o plano quando solicitado. Para storyboard: yes, execute o loop de revisão compartilhado sobre esses blocos. Para storyboard: no, continue sem abrir o quadro. Quando uma pausa de plano acontecer de qualquer maneira, dobre a concessão de delegação do 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 de registro antes do trabalho paralelo. Prepare os ativos do usuário, adote mídia existente e resolva apenas o que o brief exige. Inicie o áudio cedo quando suas temporizações direcionarem a duração.

  4. Construir cenas. Para uma peça de cena única curta, implemente a cena em seu momento mais visível antes de adicionar movimento (o wireframe confirmado, quando presente, é esse estado final e não deve ser redesenhado), depois anime a partir de seu blueprint ou regras citadas — leia o corpo completo da receita (/hyperframes-animation → blueprints/<id>.md, rules/<id>.md) antes de escrever o movimento.

    Despachar só se paga na escala. Autorizar pacotes e aquecer contextos de worker fresco custa minutos e tokens reais: um filme de até ~6 cenas curtas CONSTRÓI MAIS RÁPIDO inline, neste contexto, uma cena após a outra (medido: 5 cenas curtas ≈ 9...

...

[truncado para tradução]

Individual skills in this repo

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

embedded-captions

>

faceless-explainer

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.

figma

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.

hyperframes

>

hyperframes-animation

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition

hyperframes-audio

>

hyperframes-cli

>

hyperframes-core

The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class=

hyperframes-creative

Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.

hyperframes-keyframes

>

hyperframes-registry

Install, discover, and wire registry blocks and components into HyperFrames compositions. Use when running hyperframes add or hyperframes catalog, installing one item or every block matching a tag, wiring an installed item into index.html, or working with hyperframes.json. Covers discovery, install locations, block sub-composition wiring, component snippet merging, and authoring a new block or component to contribute upstream (idea → scaffold → validate → PR).

jasonfast123/hyperframes-skills

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.

media-use

Agent Media OS, the single skill for every media need in a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-ready block + ledger record (one verb, `resolve`); generate via TTS / music / image models when the catalog misses; produce voiceover, transcription, captions, and background removal through one shared audio engine; operate on media (cut / reframe / transform); and reuse assets across projects. Also use for vague feedback that real footage looks dark, flat, boring, should feel retro/camcorder/print/ASCII, needs privacy, or needs a media reveal.

motion-graphics

>

music-to-video

Turn a music track (an audio file, a video to pull audio from, or a track generated from a mood brief) into a beat-synced video — lyric video, slideshow, or kinetic promo. The music drives all pacing; any user-supplied images/videos are cut onto the same beat grid, and a complete video needs zero assets. Narrated pieces → the input-matched workflow (see /hyperframes). Unclear → /hyperframes.

pr-to-video

Turn a GitHub pull request (a PR URL, owner/repo#N, or

remotion-to-hyperframes

Port an existing Remotion (React) composition

slideshow

>

talking-head-recut

Package an existing talking-head / interview / podcast video with timed, designed GRAPHIC OVERLAY cards — kinetic titles, lower-thirds, data callouts, quotes, side panels, picture-in-picture — synced to the transcript, on a 16:9 / 9:16 / 4:5 canvas of your choice; the clip plays untouched underneath. Trigger on

Habilidades Relacionadas