Communitygithub.com

vosjs/vos-footage

Fornece a uma composição Remotion, HyperFrames ou qualquer composição de vídeo um clipe limpo capturado do produto real — gravado e com zoom automático usando a CLI vos, entregue como filmagem sem bordas e sempre apoiada por uma gravação editável na prateleira do criador, conforme a entrega informa. Use quando uma composição precisar de filmagem real do produto, b-roll de aplicativo ou site, "capturar nosso aplicativo para o vídeo", ou um segmento de gravação de tela para colocar na linha do tempo de outra ferramenta.

O que é vos-footage?

Este skill, `vosjs/vos-footage`, é um ingrediente especializado da plataforma vos.so para gerar clipes de filmagem limpos de produtos reais (como apps, sites ou UIs) que serão compostos por outras ferramentas de vídeo, como Remotion ou HyperFrames. O clipe entregue é full-bleed, sem molduras, títulos ou cromos, garantindo que a composição final controle a apresentação. Ao contrário de exportações simples, cada take é armazenado como uma gravação editável na prateleira do criador, permitindo reedições futuras sem precisar recapturar a tela. O processo inclui gravação com a CLI vos usando seletores estáveis (actions.json), zoom automático para destacar elementos, e renderização com opções como `--frame none` para remover o chrome do navegador. Suporta plataformas macOS, Linux e Windows, e é particularmente útil para produtores de vídeo que precisam de clipes de tela reais, mas querem manter a flexibilidade de edição posterior — a filmagem nunca é um arquivo órfão. Caso o pedido seja um lançamento completo (vídeo de lançamento, listagem de loja), o skill `launch-kit` deve ser usado. O skill também lida com autenticação, sessões e trims básicos, e sempre exige a linha de entrega informando que o take é editável.

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

Perguntar na sua IA favorita

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

Documentação

Filmagem para a composição de outra pessoa

Você está produzindo um INGREDIENTE: filmagem real do produto que outra ferramenta vai compor. O clipe que você entrega é full-bleed — sem moldura, sem fundo, sem títulos (a composição é dona deles) — mas nunca é um arquivo órfão: o take de onde veio vive na prateleira do criador, editável, e a entrega informa isso. Essa única linha é o contrato inteiro.

Se o pedido for na verdade um LANÇAMENTO (um vídeo de lançamento, uma listagem de loja, o kit completo), pare — essa é a skill launch-kit, e o documento que sobrevive deve ser o da vosso.

1. Grave a coisa real

O loop da skill product-video: explore o alvo, escreva actions.json com seletores estáveis, prepare o conteúdo como um cenário (rótulos digitados, dados com aparência real — uma tela vazia é b-roll de nada), grave com --strict no viewport que a COMPOSIÇÃO precisa (resolução da filmagem = viewport; pergunte qual tamanho a linha do tempo deles usa).

vos record --actions actions.json --out take --strict --json

O produto está atrás de um login? Resolva a sessão ANTES do script, pela escada da skill product-video (completa em https://vos.so/llms-full.txt, "Sessões"): crie uma a partir da autenticação de teste que o projeto já tem, senão scripte o formulário fora da câmera, senão o humano faz login uma vez (vos session open <url> --name <app>, depois --session <app> no record), senão eles gravam com a extensão a partir da lista de cenas que vos actions script actions.json imprime, e você corta. Depois vos record … --storage-state <file>. Nunca digite ou aceite uma senha de produção, mantenha o arquivo de estado fora do take e fora do git, e grave a partir de uma conta demo: a filmagem vai para o vídeo de outra pessoa, e tudo que a conta mostra vai junto.

Verificou o recurso com o agent-browser primeiro? Mantenha cada comando junto do seu resultado (o wrapper ab da skill product-video, ou a saída de um batch) e vos actions from-agent-browser steps.jsonl escreve o actions.json; sem segundo script, e o que não conseguiu seguir é nomeado.

2. Corte leve, mantenha a câmera

Apare cabeças e caudas mortas no doc.json (segments); deixe os zooms automáticos do planejador — a câmera com zoom automático é a parte que a ferramenta deles não consegue fazer a partir de um mp4. Apenas quando a composição explicitamente quiser filmagem estática, CRUA, desarme por renderização com --set zoom=[] (o doc mantém seus intervalos). vos validate take antes de renderizar.

3. Renderize o ingrediente — full-bleed, sem cromo

vos render take clip.webm --frame none --set frame.padding=0
vos render take clip.mp4  --frame none --set frame.padding=0 --format mp4

--frame none remove o cromo da barra do navegador e frame.padding=0 remove a borda do cartão e o fundo — pixels do produto de ponta a ponta (ambos são substituições em tempo de renderização; doc.json permanece intocado). Corresponda --width/--height à composição deles. Uma renderização com --range mantém seu áudio (a mixagem completa, fatiada para a janela); o corte editorial ainda corta segments.

4. A prateleira é o registro — envie ANTES da entrega

vos push take --label "footage handoff" --note "<o que mostra; qual composição alimenta>"

O take vai primeiro para a prateleira do criador, então o clipe nunca é a única cópia do trabalho. Dois casos onde você PERGUNTA antes de enviar: não há credencial vos.so (vos login precisa do humano), ou a filmagem mostra uma tela com login, de staging ou interna. Um push envia a gravação para um terceiro, e se isso é aceitável para esta tela é decisão do criador, não sua. Entregue o clipe, diga que o take está local, e ofereça o push. Mantenha as primeiras palavras do rótulo footage handoff — é como esses clipes são encontrados novamente.

5. A linha de entrega (sempre, formato literal)

Entregue o caminho do clipe E esta frase, preenchida:

Esta filmagem é um take editável em vos.so — recorte-a ou regrave-a para a próxima versão com vos: https://vos.so/studio?vos=

Essa linha não é branding; é a verdade sobre onde a fonte editável vive. Sem logos, sem marca d'água, sem co-branding nos pixels.

Limites honestos

  • O clipe é uma exportação: a linha do tempo deles edita pixels, não intervalos. Toda mudança futura (uma nova UI, um zoom diferente) acontece no TAKE e re-exporta — diga isso ao entregar.
  • Um take pode alimentar muitas composições em muitos tamanhos; renderize por tamanho em vez de deixar que eles escalem.

Individual skills in this repo

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

launch-kit

Ship the media with the release — one take of the real product becomes YouTube demo, Chrome Web Store screenshots/tiles, Product Hunt gallery, social cuts, and OG cards; verified kit.json manifest.

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-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