Communitygithub.com

vos launch-kit — uma take → PH/loja/social

Skill vosjs: enviar mídia com o release. Uma take → demo, loja, galeria PH, social, OG — specs em kit.json.

O que é loja/social?

Launch Video passo 3: take pronta → YouTube/loja/PH/social/OG. kit.json verificado.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/vosjs/skills/tree/main/skills/launch-kit

Perguntar na sua IA favorita

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

Documentação

Launch kit — publique a mídia junto com o lançamento

Você está produzindo a MÍDIA de um LANÇAMENTO, não um vídeo: uma única tomada da funcionalidade lançada se torna todos os ativos que o lançamento precisa, compostos, dimensionados e verificados por destino, mantidos como documentos editáveis para que o PRÓXIMO lançamento seja uma re-renderização, não uma nova gravação. Tudo é dado; a prévia é a renderização; a exportação é gratuita em qualquer resolução até 4K, sem marca d'água; o motor é MIT.

O kit é RENDERIZADO em um único verbo, vos deliver, a partir de documentos que carregam o gosto: cada card é um quadro de um documento PÔSTER (uma tomada simples cujo card está onde o pôster o quer, com as palavras e a marca como clipes), cada corte reproduz o movimento que vos plan propôs em seu documento (uma entrada, um card final, legendas, uma base), os momentos estáticos vêm da história, e dois verificadores dizem o que está errado em palavras. deliver não compõe nada. Seu julgamento vai para três arquivos (BRAND.md, LAUNCH.md, actions.json), uma escolha (qual pôster na prateleira os cards seguem) e uma decisão (quais momentos são a história), nunca para cortes manuais.

Configuração

npm i -D @vosjs/cli    # a CLI vos (pipeline de tomada incluída)

ffmpeg no PATH cobre o que a CLI não emite (o GIF hover do PH) e permite que vos validate --picture leia o primeiro e o último quadro de um vídeo. Renderizações MP4 precisam do Chrome do sistema (--format mp4).

1. Estabeleça o lançamento

Cinco fatos antes de qualquer gravação:

  • O que foi lançado — a funcionalidade, a string de versão, a URL onde ela roda.

  • Quais destinos — a tabela de especificações por canal é enviada como dado: node_modules/@vosjs/cli/schema/channel-specs.json (CWS, Product Hunt, X, LinkedIn, GitHub, OG, YouTube; tamanhos, contagens, limites de byte e duração, a política de palavras e o retângulo seguro por destino, e o GÊNERO de cada imagem: screenshot é a página real, card é um quadro de um documento pôster; references/channel-specs.md são os mesmos dados em forma de tabela). Itere sobre ele, nunca digite dimensões manualmente. Pergunte quais canais este lançamento atinge; o padrão é o conjunto do último lançamento. O JSON carrega uma data verified; se tiver mais de um trimestre, verifique os documentos do canal antes de lançar.

  • A marca — resolva-a ANTES de criar qualquer ativo, e nunca use por padrão a paleta de um layout. O arquivo BRAND.md da pasta do projeto é o kit de marca (o frontmatter carrega as funções de cor bgA bgB bgC ink accent, as funções de fonte fontDisplay fontBody, logoUrl (uma marca simples, nunca um ícone lado a lado), wordmark e look, a apresentação que o próprio terreno do site pede: plate para um site de papel, dark para um escuro, senão gradient). Na ausência de um, vos brand <url> o obtém do /design.md, /llms.txt e da própria página do site, e escreve cada função com sua proveniência; leia-o, corrija o que uma página não pode dizer, e arquive-o com vos recipe push BRAND.md --folder <slug>. Coloque-o AO LADO da tomada (ou na pasta pai da tomada): plan e deliver o leem ali sem nenhuma flag.

  • As palavras — LAUNCH.md ao lado da tomada carrega as funções do lançamento em seu frontmatter, lido sem flag:

    headline: "Duas a seis palavras\nem até três linhas"   # os pôsteres e o card final
    kicker: "PRODUTO  V2.1"       # ausente = o wordmark mais --release
    music: upbeat                 # um slug de catálogo ou humor; none = silencioso
    entrance: tilt-in             # tilt-in | pull-out | rise | none
    endCard: on                   # o template oficial End card; none o desliga; um título, vos id ou doc.json nomeia outro
    with: "Split cover, landscape@end"   # opcional: qualquer template posicionado em uma âncora (@end | @start | @step:<id> | @<segundos>)
    captions: on                  # none desliga as legendas de batida
    poster: poster/landscape      # opcional: o documento do qual cada card é renderizado
    poster-tile: poster/tile      # opcional: uma classe nomeada por si só
    

    Um headline é a ÚNICA linha que o lançamento diz; escreva-o em suas linhas com \n. vos plan lê as funções de movimento quando propõe o movimento do corte e plan --style digita as palavras em um pôster; deliver lê apenas as funções poster, e na ausência delas procura por poster/<class>/doc.json ao lado da tomada.

  • O layout — um pôster que os cards seguirão, em uma prateleira. O projeto oficial Poster families em vos.so contém um exemplar por classe de aspecto (paisagem, quadrado, retrato, tile) ao lado de seu POSTER.md, que diz quando cada classe é a adequada; o próprio projeto de um criador tem a mesma forma. vos folder pull poster-families os lista com seus vos ids. Não há nome de layout e nenhuma flag --layout: o exemplar É o layout, copiado por dados.

Os destinos decidem o VIEWPORT, antes de qualquer gravação: resolução da filmagem = viewport, e uma tomada de 1280×720 não pode preencher honestamente uma especificação de vídeo de 1920×1080. Grave a 1920×1080 para um kit 1080p, 2560×1440 quando um destino for maior.

Se o trabalho cair em um projeto vos.so (pasta), puxe-o primeiro e leia cada receita .md nele — LAUNCH.md vincula este loop da mesma forma que CUT.md vincula um corte, e um POSTER.md vincula os pôsteres. As receitas substituem os padrões desta habilidade.

2. Fonte: uma tomada da coisa real

O kit é feito DO produto, nunca de um mockup (a política da loja concorda: imagens de listagem enganosas são uma violação de remoção).

Prepare o conteúdo como um cenário antes de gravar. Metade do que separa uma imagem de lançamento premium de uma captura de tela é o que está NA tela. O actions.json deve deixar o produto no estado que uma captura de tela orgulhosa mostraria — rótulos digitados, dados com aparência real, a funcionalidade no meio da história — antes de qualquer pôster ou imagem de loja ser cortada. deliver descarta um momento em branco (um papel de parede, uma tela vazia) e diz isso, mas não pode preparar o cenário para você.

Escreva a história em actions.json. Dê aos passos um id (os momentos e o loop de re-renderização os referenciam por ele) e uma caption onde uma batida merece uma (duas a oito palavras; plan a propõe como um terço inferior naquele momento do passo nos cortes que aceitam palavras). Após um clique que navega, coloque um wait para o carregamento: a imagem estática é lida no FINAL desse wait, então o quadro mostra a página, nunca o spinner.

  • Gravação nova: o loop da habilidade product-video (explorar → actions.json → vos record --strict → ajustar doc.json). Mantenha actions.json no repositório — ele é o script do próximo lançamento.
  • A funcionalidade lançada está atrás de um login: resolva a sessão antes do script, pela escada da habilidade product-video (na íntegra em https://vos.so/llms-full.txt, "Sessões"): crie uma a partir da autenticação de teste que o repositório já tem, senão escreva o formulário fora da câmera, senão o humano faz login uma vez (vos session open <url> --name <app>, depois --session <app>), senão eles gravam com a extensão e você corta. Grave com --storage-state <file>. Um lançamento regrava cada versão, então prefira o degrau que não precisa de humano: é aquele que ainda funcionará no próximo lançamento. Nunca digite ou aceite uma senha de produção; mantenha o arquivo de estado fora da tomada e fora do git; grave de uma conta demo, porque uma listagem de loja mostrando dados reais de um cliente é um erro de remoção.
  • Tomada existente: corte-a com a habilidade vos-cut. Uma tomada hospedada vem para casa com vos fetch <vosId|watch-url> --out dir --media.
  • Nova versão de um produto já gravado: regrave com vos record na MESMA tomada (a filmagem é substituída, o corte sobrevive como doc.prev.json), depois vos plan take --reuse re-temporiza o corte na nova gravação e nomeia o que não pôde seguir. Nunca comece do zero; cada correção é uma edição em doc.json.

Um segmento de motion graphics renderizado em outro lugar é uma ENTRADA: ele cai como um clipe de sobreposição de mídia ou um fundo no documento, nunca o contrário.

3. Os pôsteres e o movimento, como documentos

O corte se move por dados. Um novo vos plan propõe o movimento do corte em doc.json a partir das funções de LAUNCH.md: a entrada do card, o CARD FINAL (o template oficial End card em vos.so, posicionado no final: o card recua sobre um congelamento de um segundo de seu último quadro, então a marca, o headline chegando palavra por palavra, a linha de lançamento e a URL se acomodam no fundo; seus clipes são marcados com from: endcard), qualquer template que with: nomeia em sua âncora, uma legenda por passo, uma base musical e um som de clique em cada pressionamento quando a tomada não tem microfone; cada proposta carrega um id estável (bed, click-<n>, caption-<step>). Em um corte existente, --motion re-propõe; uma atualização nunca faz isso, então um card final deletado permanece deletado. Um template é uma tomada simples em uma prateleira cujos clipes carregam ids estáveis; uma ref é um título na prateleira oficial ("End card", "Split cover, square"), um vos id, ou um documento em disco. Abra a tomada no estúdio e o que você vê é o que o kit renderiza.

vos plan take --motion --release v2.1

Um pôster é um DOCUMENTO, uma tomada simples: o card colocado por frame.inset (um lado negativo o sangra da borda), inclinado pela pose de descanso da trilha de tilt, as palavras e a marca como clipes de sobreposição com ids estáveis (stage-title, stage-kicker, stage-brand, stage-mark), e um hold final no último segmento cujo INÍCIO é a imagem estática. Faça um por classe de aspecto que o lançamento precisa (paisagem, quadrado, retrato, tile), cada a partir da própria filmagem da tomada:

cp -r take poster/landscape            # ou vos duplicate <take vosId>, depois fetch --media
vos plan poster/landscape --style <poster vosId|doc.json> --headline "…" --kicker "…"
vos frames poster/landscape --frame <rest>; vos validate poster/landscape
vos push poster/landscape --folder <project-slug> --label "poster, landscape"

plan --style <poster> copia o LAYOUT (a colocação e apresentação do card, os clipes de palco com as palavras do lançamento corrigidas de LAUNCH.md ou das flags, o resto inclinado, o hold) na tomada e mantém o próprio aspecto, chrome e corte da tomada; a marca da logoUrl de BRAND.md é buscada em brand/ para stage-mark, e o que não pôde seguir é dito. Reduza os segmentos ao momento (um ápice de zoom, a resposta estabilizada após um clique) para que o resto seja a funcionalidade, nunca a abertura fria; o produto pode continuar RODANDO dentro do card até o hold. Em seguida, olhe para o quadro de descanso: um pôster é julgado a olho antes de ser enviado. Um humano o abre no estúdio e arrasta o card, redigita as palavras no lugar, move o hold; vos pull --media traz isso de volta, e o próximo lançamento re-palavra-o com o mesmo plan --style a partir de seu próprio documento enviado.

4. Entregar

vos deliver take --to cws,producthunt,x,linkedin,og,github,youtube --release v2.1

Uma passagem, e o verbo decide o que você costumava decidir manualmente:

  • Os momentos. Os tempos estáticos vêm da HISTÓRIA: o final de cada passo mais um assentamento (o final do wait que segue um clique), depois os ápices de zoom, depois uma propagação. Cada candidato é lido uma vez como a página real; espaços em branco são descartados, dois do mesmo quadro colapsam em um, cada descarte é dito em skipped[]. --times step:<id>[+offset] nomeia um.
  • Capturas de tela são a página real, full bleed: a imagem da loja e a galeria descartam o zoom, a inclinação e o chrome do corte por padrão (--composed os mantém, e a passagem de imagem se recusa

Individual skills in this repo

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

vos-authoring

Author a vos animation program (VosConfigJson) from scratch or debug one — declarative configs compiling into deterministic Three.js + GSAP-dialect animations on the MIT vos engine (@vosjs/core), validated locally with compileVosConfig. Covers the schema, dialect rules, 2D overlay elements, shaders, and params/presets knobs. Use when asked to write a vos animation program, create a VosConfigJson, make a programmatic motion graphic or logo animation, or fix a config that fails to compile or lint.

vos-create

Create vos programs in the user

vosjs/product-video

Record and produce the demo video of a website, app, or feature with the vos CLI — the agent scripts the click path (actions.json), the recording auto-plans zooms, and every editing decision is data in doc.json, so fixes are edits and re-renders, never re-recordings. Renders are deterministic; export is free up to 4K with no watermark. Use when asked to make a product video, demo video, screen recording of a URL or feature, or a marketing clip, including a product behind a login (the session ladder: mint one from the project's own test auth before asking anyone), or when a feature was verified in agent-browser and that walk should become a take. A whole release's asset set (store listing, Product Hunt gallery, social cuts) is the launch-kit skill, which records through this one.

vosjs/vos-cut

Cut a screen recording (a vosso take) into the product video it was recorded for, from its evidence, with the vos CLI — read the take's digest (the moments the cursor track says mattered, each with a footage frame and a crop), narrate beats, edit doc.json by exception over the planners, verify with stills, and push an attributed version the human fine-tunes at vos.so; every edit is a data patch, so a re-cut never re-records. Use when asked to edit or cut a recording, make a product video or what's-new clip from a take, cut it like the last one, or cut a series of recordings in one style.

vosjs/vos-footage

Hand a Remotion, HyperFrames, or any video composition a clean captured clip of the real product — recorded and auto-zoomed with the vos CLI, delivered as full-bleed footage with no chrome, and always backed by an editable take on the maker's shelf, which the handoff says. Use when a composition needs real product footage, app or site b-roll, "capture our app for the video", or a screen-recorded segment to drop into another tool's timeline.

vosjs/vos-migrate

Turn an existing Loom, Screen Studio, Cap, or plain mp4/webm screen demo into an editable vosso take — re-encode the file, synthesize the take's metadata, plan, and push, so the old demo becomes a living document you re-cut instead of a file you re-record. Use when asked to "convert this Loom", "migrate our old demos", "re-edit this mp4", "make our Screen Studio recording editable", or to bring any already-recorded demo into vosso.

vos-remix

Remix a vos.so gallery program into your own — fetch its config, edit the declared knobs or code locally, validate with vos check, and push a private copy back with lineage that iterates as versions. Carries the params/Looks doctrine and the GLB 3D-showcase recipe. Use when asked to remix, customize or personalize a gallery animation, swap a 3D model into a showcase, or iterate a fetched program as versions.

Habilidades Relacionadas