Communitygithub.com

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.

What is 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'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.

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

Ask in your favorite AI

Open a new chat with this agent skill pre-loaded.

Documentation

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

The product is behind a login? Settle the session BEFORE the script, by the product-video skill's ladder (in full at https://vos.so/llms-full.txt, "Sessions"): mint one from the test auth the project already has, else script the form off camera, else the human signs in once (vos session open <url> --name <app>, then --session <app> on record), else they record it with the extension from the shot list vos actions script actions.json prints, and you cut it. Then vos record … --storage-state <file>. Never type or accept a production password, keep the state file out of the take and out of git, and record from a demo account: the footage goes into someone else's video, and whatever the account shows goes with it.

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. Two cases where you ASK before pushing instead: there is no vos.so credential (vos login needs the human), or the footage shows a signed-in, staging or internal screen. A push uploads the recording to a third party, and whether that is acceptable for this screen is the maker's call, not yours. Hand over the clip, say the take is local, and offer the push. 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 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.

Related Skills