Communitygithub.com

AntlersSam/saas-launch-video-kit

Crie ou edite uma composição HyperFrames personalizada quando nenhum workflow especializado se encaixa, ou quando o BRIEF.md define flow: companion. Use para peças longas ou com múltiplas cenas, vídeos de marca e sizzle, montagens, loops estáticos, cartões de título estáticos, remixes de filmagens e construções livres. Em vez disso, use motion-graphics para uma unidade curta e sem narração, priorizando movimento, incluindo um título animado. Roteie a criação nova através de hyperframes antes de usar esta skill.

O que é saas-launch-video-kit?

Esta skill, AntlersSam/saas-launch-video-kit, é um workflow generalista para o ambiente HyperFrames, projetado para cenários onde workflows especializados não se aplicam. Seu principal propósito é permitir a criação e edição de composições de vídeo complexas, como vídeos de lançamento de SaaS, reels de marca, montagens e peças com múltiplas cenas. Ela atua como um 'canivete suíço' para vídeo, lidando com desde loops estáticos até remixes de filmagens, e é acionada principalmente quando o arquivo BRIEF.md especifica `flow: companion`, indicando um processo colaborativo entre o usuário e a IA. A skill impõe um fluxo de trabalho rigoroso, começando pela verificação de atualizações, aplicação de adaptadores de fonte (como para mídia e Figma), e interpretação do estado do projeto para agir de forma precisa (editando, continuando ou iniciando um projeto do zero). Ela utiliza um sistema de briefings e storyboards para planejamento, seguido pela execução da composição baseada em uma ordem de dependências, carregando conhecimentos específicos de skills especializadas (como hyperframes-core para layout, hyperframes-creative para design e hyperframes-animation para animações) conforme necessário. A skill é especialmente útil por seu processo colaborativo 'companion', onde a IA atua como um diretor criativo, propondo um tratamento 'teto' (a melhor versão possível) que o usuário pode refinar, garantindo qualidade e alinhamento com a visão do projeto.

Funciona com~Claude Code✓Codex CLI~Cursor
npx skills add https://github.com/AntlersSam/saas-launch-video-kit/tree/HEAD/skills/general-video

Perguntar na sua IA favorita

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

Documentação

Instalação de plugins: Antes de comandos de configuração ou frescor, siga regras de execução de plugins quando esta skill estiver dentro de um plugin HyperFrames. Instalações independentes mantêm as instruções de atualização abaixo.

Vídeo geral

Antes de confiar neste workflow, execute:

npx hyperframes skills update general-video

Um no-op bem-sucedido significa que a skill está atualizada. Exiba 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, voz, 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 (fornecedores, 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 fornecedor, execute npx hyperframes auth status e retransmita sua saída literalmente. Se desconectado, aplique a comporta em ../hyperframes/references/brief-contract.md: colaborativo aguarda login ou uma escolha explícita de offline; autônomo informa o status e continua através de um fornecedor offline disponível. Sinalize um bloqueador quando nenhum fornecedor offline puder satisfazer uma capacidade necessária. A adoção local por si só não requer uma comporta 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 de 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, depois execute novamente as verificações afetadas. Não reabra a descoberta.
BRIEF.md existeLeia-o. Se workflow nomear outro workflow e flow não for companion, passe adiante. Não faça perguntas sobre o brief.
Sem brief, mas hyperframes.json ou STORYBOARD.md existeRetome 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/references/brief-format.md. Em um projeto existente, a raiz é o diretório que contém hyperframes.json. Registre apenas os campos confirmados e baseados em preferência 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 de 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 checkpoint se comportamSiga o contrato do brief. Nunca peça ao usuário para nomear um modo.

Não invente sinônimos para estes 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 filmagens existentes, 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, em seguida, defina o posicionamento/ordem de autoria com data-start. O áudio criado separadamente segue os intervalos e tempos de clipe idênticos em elementos <audio> correspondentes. O /hyperframes-core é o proprietário desta edição temporal; use /hyperframes-keyframes apenas para animação de propriedade visual, como zoom, impacto, panorâmica, corte, máscara ou clip-path em um wrapper interno. Copie os contratos completos de ../hyperframes-core/references/creator-editing-recipes.md.

Fluxo de companheiro

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 o modo 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 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 de 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, 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 trabalho artesanal sobe ao teto; o conteúdo nunca cresce além do que foi solicitado (§ 6).
  • Entre os checkpoints, ../hyperframes/references/capability-menu.md funciona de duas maneiras. Como a lista de gatilho: 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 ("o número da cena 3 quer o tratamento de contagem crescente"). Leia-o 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 do 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. O modo 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/references/storyboard-format.md e ../hyperframes/references/review-loop.md
Qualquer ativo ou operação de mídia, incluindo narração, MDF, EFE, 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 deles, não lembrado
Uma oferta de capacidade de companheiro, captura, grade de batida, vídeo generativo, mapa, publicação ou capacidade de workflow 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 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 sub-composiçõ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 no catálogo ativo antes de planejar construir qualquer visual nomeado você mesmo: para cada visual, efeito, tratamento ou transição que o brief nomeia — "linhas de varredura CRT", "glitch", "grão de filme", "varredura de brilho", "explosão de confete" — execute npx hyperframes catalog --query "<o visual, em inglê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 compartilhado sobre esses blocos. Para storyboard: no, continue sem uma pausa no plano ou folha de esboço. Quando uma pausa no plano acontece...

Individual skills in this repo

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

AntlersSam/saas-launch-video-kit

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's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

AntlersSam/saas-launch-video-kit

Use when audio already placed in a HyperFrames composition needs to be mixed: fade-in/fade-out, crossfade, track gain or volume, volume automation, ducking, a music bed that fights a voiceover (voiceover carve), effects on a track (EQ, compressor, limiter, gate, saturation, delay, reverb, chorus, phaser, bitcrush), automation envelopes drawn on a track's volume or any effect parameter, or one submix bus carrying a chain, a fader and an automation clock for several tracks at once (`<hf-audio-group>`). Don't use for sourcing or generating audio — finding BGM, SFX, or making a voiceover is `/media-use`. Don't use for clip timing or track layout, which is `/hyperframes-core`.

AntlersSam/saas-launch-video-kit

Use the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes, single or batch render, publish, cloud, cloudrun, feedback, lambda, doctor, browser, info, upgrade, skills, compositions, timeline, history, clean, docs, benchmark, telemetry, transcribe, auth, tts, and remove-background. Also use when diagnosing build or render failures. validate, inspect, and layout are deprecated aliases; use check. Covers local, HeyGen-hosted cloud, AWS Lambda, and Google Cloud Run rendering.

AntlersSam/saas-launch-video-kit

The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class="clip"`, tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Habilidades Relacionadas