Communitygithub.com

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

¿Qué es vos-footage?

vos-footage is a Claude Code agent skill that 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.

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

Footage for someone else's composition

You are producing an INGREDIENT: real product footage another tool will composite. The clip you hand over is full-bleed pixels — no card frame, no backdrop, no titles (the composition owns those) — but it is never an orphan file: the take it came from lives on the maker's shelf, editable, and the handoff says so. That one line is the whole contract.

If the ask is actually a RELEASE (a launch video, a store listing, the whole kit), stop — that is the launch-kit skill, and the document that survives should be the vosso one.

1. Record the real thing

The product-video skill's loop: explore the target, write actions.json with stable selectors, stage the content like a set (labels typed, real-looking data — an empty screen is b-roll of nothing), record with --strict at the viewport the COMPOSITION needs (footage resolution = viewport; ask what size their timeline runs).

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

Verified the feature with agent-browser first? Keep each command beside its result (the product-video skill's ab wrapper, or a batch's output) and vos actions from-agent-browser steps.jsonl writes the actions.json; no second script, and what it could not follow is named.

2. Cut light, keep the camera

Trim dead heads and tails in doc.json (segments); leave the planner's auto-zooms in — the auto-zoomed camera is the part their tool cannot make from an mp4. Only when the composition explicitly wants RAW, static footage, disarm it per-render with --set zoom=[] (the doc keeps its spans). vos validate take before rendering.

3. Render the ingredient — full-bleed, no chrome

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 drops the browser-bar chrome and frame.padding=0 removes the card inset and backdrop — edge-to-edge product pixels (both are render-time overrides; doc.json is untouched). Match --width/--height to their composition. A --range render keeps its audio (the full mix, sliced to the window); the editorial cut still trims segments.

4. The shelf is the record — push BEFORE the handoff

vos push take --label "footage handoff" --note "<what it shows; which composition it feeds>"

The take goes to the maker's shelf first, so the clip is never the only copy of the work. Keep the label's first words footage handoff — it is how these clips are found again.

5. The handoff line (always, verbatim shape)

Hand over the clip path AND this sentence, filled in:

This footage is an editable take on vos.so — re-cut it or re-record it for the next version with vos: https://vos.so/studio?vos=

That line is not branding; it is the truth about where the editable source lives. No logos, no watermark, no co-branding in the pixels.

Honest limits

  • The clip is an export: their timeline edits pixels, not spans. Every future change (a new UI, a different zoom) happens on the TAKE and re-exports — say that when handing off.
  • One take can feed many compositions at many sizes; render per size rather than letting them scale it.

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 the demo video, the store listing (Chrome Web Store screenshots, tile, marquee), the Product Hunt gallery, the social cuts and the OG card, each a frame of a poster document in the brand

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, or when a feature was verified in agent-browser and that walk should become a take. A whole release

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

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

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

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