Communitygithub.com

vosjs/vos-footage

Entrega a Remotion, HyperFrames o cualquier composición de video un clip limpio y capturado del producto real — grabado y auto-zoom con la CLI de vos, como metraje a sangre sin cromo, respaldado siempre por una toma editable en el estante del creador. Úsalo cuando una composición necesite metraje real del producto, b-roll de una app o sitio, o un segmento de grabación de pantalla para insertar en la línea de tiempo de otra herramienta.

¿Qué es vos-footage?

El skill `vos-footage` permite generar metraje de producto listo para composición, entregado como píxeles a sangre (sin bordes, fondos ni títulos) para que otra herramienta lo integre. La toma original queda almacenada en el estante del creador y es editable. El proceso incluye grabar la interfaz real con la CLI de vos, recortar cabezas y colas, renderizar sin cromo, y entregar el clip con una línea de handoff que vincula a la fuente editable en vos.so. Es compatible con cualquier flujo que necesite b-roll de aplicación web o sitio, y funciona con la CLI de vos (no con Cursor, Codex o Claude Code). La habilidad se apoya en el skill `product-video` para la grabación, acciones desde agent-browser y control de sesiones; el resultado es un archivo de video (webm o mp4) que puede regenerarse cambiando la toma.

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

Preguntar en tu IA favorita

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

Documentación

Metraje para la composición de otra persona

Estás produciendo un INGREDIENTE: metraje real de producto que otra herramienta compondrá. El clip que entregas son píxeles a sangre — sin marco de tarjeta, sin fondo, sin títulos (la composición es dueña de esos) — pero nunca es un archivo huérfano: la toma de la que proviene vive en el estante del creador, editable, y el handoff lo dice. Esa única línea es todo el contrato.

Si la solicitud es en realidad un LANZAMIENTO (un video de lanzamiento, un listado en tienda, el kit completo), detente — esa es la habilidad launch-kit, y el documento que perdura debe ser el de vosso.

1. Graba lo real

El bucle de la habilidad product-video: explora el objetivo, escribe actions.json con selectores estables, prepara el contenido como un set (etiquetas escritas, datos con aspecto real — una pantalla vacía es b-roll de nada), graba con --strict en el viewport que la COMPOSICIÓN necesita (resolución del metraje = viewport; pregunta a qué tamaño corre su línea de tiempo).

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

¿El producto está detrás de un inicio de sesión? Resuelve la sesión ANTES del script, mediante la escalera de la habilidad product-video (completa en https://vos.so/llms-full.txt, "Sessions"): crea una desde la autenticación de prueba que el proyecto ya tiene, si no programa el formulario fuera de cámara, si no el humano inicia sesión una vez (vos session open <url> --name <app>, luego --session <app> al grabar), si no lo graban con la extensión desde la lista de tomas que imprime vos actions script actions.json, y lo cortas. Luego vos record … --storage-state <file>. Nunca escribas ni aceptes una contraseña de producción, mantén el archivo de estado fuera de la toma y fuera de git, y graba desde una cuenta de demostración: el metraje va al video de otra persona, y lo que muestre la cuenta va con él.

¿Verificaste la función primero con agent-browser? Mantén cada comando junto a su resultado (el wrapper ab de la habilidad product-video, o la salida de un batch) y vos actions from-agent-browser steps.jsonl escribe el actions.json; no hay segundo script, y lo que no pudo seguir está nombrado.

2. Corta ligero, mantén la cámara

Recorta cabezas y colas muertas en doc.json (segments); deja los zoom automáticos del planificador — el zoom automático de la cámara es la parte que su herramienta no puede hacer desde un mp4. Solo cuando la composición pida explícitamente metraje RAW y estático, desactívalo por renderizado con --set zoom=[] (el documento conserva sus intervalos). vos validate take antes de renderizar.

3. Renderiza el ingrediente — a sangre, sin 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 elimina el cromo de la barra del navegador y frame.padding=0 quita el recuadro de la tarjeta y el fondo — píxeles de producto de borde a borde (ambos son anulaciones en tiempo de renderizado; doc.json no se toca). Ajusta --width/--height a su composición. Un renderizado con --range conserva su audio (la mezcla completa, cortada a la ventana); el corte editorial aún recorta los segments.

4. El estante es el registro — empuja ANTES del handoff

vos push take --label "footage handoff" --note "<qué muestra; qué composición alimenta>"

La toma va primero al estante del creador, para que el clip nunca sea la única copia del trabajo. Dos casos en los que PREGUNTAS antes de empujar: no hay credencial de vos.so (vos login necesita al humano), o el metraje muestra una pantalla con sesión iniciada, de staging o interna. Un push sube la grabación a un tercero, y si eso es aceptable para esta pantalla es decisión del creador, no tuya. Entrega el clip, di que la toma está local y ofrece el push. Mantén las primeras palabras de la etiqueta footage handoff — así se vuelven a encontrar estos clips.

5. La línea de handoff (siempre, con la forma exacta)

Entrega la ruta del clip Y esta oración, completada:

Este metraje es una toma editable en vos.so — recórtalo o grábala de nuevo para la siguiente versión con vos: https://vos.so/studio?vos=

Esa línea no es una marca; es la verdad sobre dónde vive la fuente editable. Sin logotipos, marcas de agua ni co-branding en los píxeles.

Límites honestos

  • El clip es una exportación: su línea de tiempo edita píxeles, no intervalos. Cada cambio futuro (una nueva interfaz, un zoom diferente) ocurre en la TOMA y se reexporta — dilo al entregar.
  • Una toma puede alimentar muchas composiciones en muchos tamaños; renderiza por tamaño en lugar de dejar que lo escalen.

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.

Skills relacionados