Communitygithub.com

vosjs/vos-migrate

Converta demos existentes do Loom, Screen Studio, Cap ou MP4/WebM simples em takes editáveis ​​do vosso — recodifique o arquivo, sintetize os metadados do take, planeje e envie, transformando o demo antigo em um documento vivo que você pode reeditar em vez de regravar. Use quando solicitado a "converter este Loom", "migrar nossos demos antigos", "reeditar este MP4", "tornar nossa gravação do Screen Studio editável" ou trazer qualquer demo já gravado para o vosso.

O que é vos-migrate?

O skill `vosjs/vos-migrate` permite converter gravações de tela finalizadas (como do Loom, Screen Studio, Cap ou arquivos MP4/WebM simples) em takes do vosso que são totalmente editáveis. Em vez de tratar o vídeo como um arquivo estático, a migração gera um diretório de take com metadados e um plano (`doc.json`), permitindo que zooms, cortes, velocidade e camadas sejam ajustados como dados versionados, e não como pixels queimados. O skill é ideal para fluxos onde um agente (como Claude Code) precisa transformar um demo gravado em um documento vivo, mas reconhece limitações importantes: sem trilha de cursor, não há zoom automático; todas as edições antigas, bolhas de câmera e legendas são incorporadas como pixels; e a qualidade do vídeo não é restaurada (apenas recodificado em VP9). A saída final é enviada via `vos push` para um projeto no vosso, onde pode ser visualizada e reeditada no estúdio, e o arquivo original se torna obsoleto.

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

Perguntar na sua IA favorita

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

Documentação

Migrar um demo gravado para um take editável

Você está transformando um ARQUIVO DE VÍDEO FINALIZADO em um take do vosso: um documento cujos zooms, cortes, velocidade e camadas são dados, hospedados com histórico de versões e editáveis no estúdio. O que o arquivo perde por ser estrangeiro é uma honestidade que você deve carregar: ele NÃO tem trilha de cursor, então nada pode ser ampliado automaticamente e o resumo vê pouco — seus olhos são a folha de contato, e cada zoom é colocado manualmente.

Duas portas:

  • A porta humana: solte o arquivo em https://vos.so/studio — ele entra na forma do gravador do navegador e abre diretamente no editor de takes. Quando um humano está presente, este é o caminho mais curto; entregue o link a ele.
  • A porta do agente (este skill): construa o diretório do take você mesmo e execute o pipeline normal. Comprovado do início ao fim abaixo.

1. Sondar a origem

ffprobe -v quiet -print_format json -show_streams -show_format demo.mp4

Mantenha: largura, altura, duração, fps, se existe um fluxo de áudio. Uma exportação do Loom/Screen Studio normalmente é 1080p H.264 com a bolha da câmera e quaisquer edições INCORPORADAS — elas migram como pixels, não como camadas. Diga isso no handoff: a migração torna o arquivo editável daqui em diante, ela não desfaz edições antigas.

2. Construir o diretório do take

mkdir take
ffmpeg -i demo.mp4 -c:v libvpx-vp9 -crf 34 -b:v 0 -row-mt 1 \
       -c:a libopus take/recording.webm     # remova -c:a se não houver fluxo de áudio

Em seguida, escreva take/meta.json a partir da sonda (todos os campos necessários; tempos em ms; producer: "migrated" marca a proveniência):

{
  "producer": "migrated",
  "dpr": 1, "zoom": 1,
  "t0": 0,
  "durationMs": 36766,
  "width": 1920, "height": 1080,
  "fps": 30,
  "hasAudio": false
}

t0 pode ser qualquer ms de época; width/height são os pixels do vídeo (não havia janela do navegador). Defina hasAudio como true somente quando o webm realmente carregar a trilha.

3. Planejar e ver com honestidade

vos plan take --fresh       # constrói doc.json; cursorKept false, zoomAuto 0
vos frames take --times 0,10%,25%,50%,75%,90%,100%   # a folha de contato SÃO seus olhos
vos digest take             # executa, mas espere pouco: cabeça/cauda e apenas
                            # cortes duros de cena - sem cliques, sem digitação, sem pausas

Nenhum zoom automático é possível e nenhum deve ser falsificado. Leia as imagens, encontre os 2–4 momentos que importam e escreva intervalos manuais manualmente:

# doc.json - cada intervalo que você adiciona carrega "source": "manual"
# zoom: [{ "id": "m1", "in": 10.5, "out": 14.0, "level": 1.6,
#          "cx": 0.52, "cy": 0.35, "source": "manual" }]
# segments: corte cabeças/caudas mortos; speed: apenas onde a filmagem realmente ociosa

Defina export.resolution para CORRESPONDER à filmagem (uma fonte 1080p é 1080p — migrar não adiciona pixels). vos validate take deve passar; verifique com vos render take check.webm --range a..b --draft.

4. Enviar — o demo antigo se torna um documento vivo

vos push take --folder <projeto> --label "migrado de <origem>" \
    --note "<o que mostra; que edições antigas estão incorporadas; o que você recortou>"

Termine no ciclo: a página de visualização o reproduz, o estúdio edita cada intervalo que você escreveu mais tudo o que o arquivo nunca teve (fundos, camadas de texto, velocidade), e vos pull traz as edições humanas de volta. A proposta pertence ao handoff, em uma linha: este é o último demo que você edita às cegas — grave o próximo com vos record e a câmera se planeja sozinha.

Limites honestos (diga-os, nunca os encubra)

  • Sem trilha de cursor ⇒ sem zoom automático, sem efeitos de clique, sem zooms de digitação e sem lint de enquadramento — cada zoom é seu, manualmente, e você diz isso.
  • Edições antigas, bolhas de câmera e legendas são pixels incorporados.
  • A migração recodifica uma vez (VP9); uma fonte mal comprimida permanece mal comprimida — migrar não restaura a qualidade.
  • Uma escada de entregáveis de tamanho de especificação (armazenar imagens, pôsteres) funciona a partir do take migrado exatamente como de um nativo — o skill launch-kit assume quando a solicitação é um lançamento.

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

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