Communitygithub.com

vosjs/vos-migrate

Convierte una demo grabada existente (Loom, Screen Studio, Cap o mp4/webm) en un 'take' editable de vosso — re-codifica el archivo, sintetiza los metadatos, planifica y publica, transformando la demo antigua en un documento vivo que puedes re-editar en lugar de un archivo que debes regrabar.

¿Qué es vos-migrate?

Este skill permite migrar archivos de video ya finalizados (provenientes de Loom, Screen Studio, Cap o simplemente mp4/webm) al formato de 'take' de vosso, convirtiéndolos en documentos editables con historial de versiones, zooms, recortes, velocidad y capas. Utiliza `ffprobe` para extraer metadatos del video original, `ffmpeg` para re-codificarlo a VP9/Opus, construye la estructura de directorio y metadatos requerida, y luego ejecuta el pipeline estándar de vosso (`plan`, `frames`, `digest`) para generar el plan de edición. Finalmente, con `vos push` se publica el take en un proyecto, con una nota que indica su origen. El skill también detalla limitaciones importantes: la ausencia de pista de cursor impide el auto-zoom y el análisis automático es limitado, por lo que todos los zooms y recortes deben ser colocados manualmente tras revisar las imágenes clave. Está diseñado para agentes de IA como Claude Code, Cursor o Codex, y ofrece una alternativa a la carga manual en vos.so/studio.

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

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

Migrar una demo grabada a un take editable

Estás convirtiendo un archivo de video TERMINADO en un take de vosso: un documento cuyos zooms, recortes, velocidad y capas son datos, alojados con historial de versiones y editables en el estudio. Lo que el archivo pierde por ser foráneo es honestidad que debes asumir: NO tiene pista de cursor, por lo que nada puede auto-zoom y el digest ve poco — tus ojos son la hoja de contactos, y cada zoom se coloca a ojo.

Dos puertas:

  • La puerta humana: arrastra el archivo a https://vos.so/studio — entra con la forma del grabador de navegador y se abre directamente en el editor de takes. Cuando un humano está presente, este es el camino más corto; entrégale el enlace.
  • La puerta del agente (este skill): construye tú mismo el directorio del take y ejecuta el pipeline normal. Probado de principio a fin abajo.

1. Sondear la fuente

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

Conserva: ancho, alto, duración, fps, si existe un flujo de audio. Una exportación de Loom/Screen Studio suele ser 1080p H.264 con la burbuja de cámara y cualquier edición ya HORNEADA — migran como píxeles, no como capas. Dilo en la entrega: la migración hace que el archivo sea editable de ahora en adelante, no deshornea ediciones antiguas.

2. Construir el directorio del 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     # omite -c:a si no hay flujo de audio

Luego escribe take/meta.json a partir del sondeo (todos los campos requeridos; tiempos en ms; producer: "migrated" marca la procedencia):

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

t0 puede ser cualquier ms de época; width/height son los píxeles del video (no había viewport de navegador). Pon hasAudio a true solo cuando el webm realmente lleve la pista.

3. Planificar, y verlo honestamente

vos plan take --fresh       # construye doc.json; cursorKept false, zoomAuto 0
vos frames take --times 0,10%,25%,50%,75%,90%,100%   # la hoja de contactos SON tus ojos
vos digest take             # se ejecuta, pero espera poco: cabeza/cola y solo
                            # cortes duros de escena - sin clics, sin tecleo, sin pausas

No es posible el auto-zoom y no se debe falsear ninguno. Lee las imágenes fijas, encuentra los 2–4 momentos que importan, y escribe intervalos manuales a ojo:

# doc.json - cada intervalo que añades lleva "source": "manual"
# zoom: [{ "id": "m1", "in": 10.5, "out": 14.0, "level": 1.6,
#          "cx": 0.52, "cy": 0.35, "source": "manual" }]
# segments: recorta cabezas/colas muertos; speed: solo donde el metraje realmente está inactivo

Ajusta export.resolution para que COINCIDA con el metraje (una fuente 1080p es 1080p — migrar no añade píxeles). vos validate take debe pasar; verifica con vos render take check.webm --range a..b --draft.

4. Publicar — la demo antigua se convierte en un documento vivo

vos push take --folder <proyecto> --label "migrated from <fuente>" \
    --note "<qué muestra; que las ediciones antiguas están horneadas; qué has re-cortado>"

Termina en el bucle: la página de visualización lo reproduce, el estudio edita cada intervalo que escribiste más todo lo que el archivo nunca tuvo (fondos, capas de texto, velocidad), y vos pull trae de vuelta las ediciones humanas. El argumento pertenece a la entrega, en una línea: esta es la última demo que editas a ciegas — graba la siguiente con vos record y la cámara se planifica sola.

Límites honestos (dilos, nunca los disimules)

  • Sin pista de cursor ⇒ sin auto-zoom, sin efectos de clic, sin zooms de tecleo y sin revisión de encuadre — cada zoom es tuyo, a ojo, y lo dices.
  • Las ediciones antiguas, burbujas de cámara y subtítulos son píxeles horneados.
  • La migración re-codifica una vez (VP9); una fuente mal comprimida se queda mal comprimida — migrar no restaura calidad.
  • Una escalera de entregables de tamaño de especificación (almacenar fotogramas, carteles) funciona desde el take migrado exactamente igual que desde uno nativo — el skill launch-kit toma el control cuando la petición es un lanzamiento.

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.

Skills relacionados