Communitygithub.com

vosjs/vos-footage – Produktaufnahmen für Videokompositionen

Übergebe einer Remotion-, HyperFrames- oder anderen Videokomposition ein sauber aufgezeichnetes, automatisch gezoomtes Clip des echten Produkts – aufgenommen mit der vos-CLI, ausgeliefert als randloser Footage ohne Chrom, und stets hinterlegt mit einem bearbeitbaren Take auf dem Maker-Regal, wie die Übergabe bestätigt. Verwende dies, wenn eine Komposition echte Produktaufnahmen, App- oder Webseiten-B-Roll, „nimm unsere App für das Video auf“ oder einen Bildschirmmitschnitt für eine andere Timeline benötigt.

Was ist vos-footage – Produktaufnahmen für Videokompositionen?

Dieses Skill (vosjs/vos-footage) beschreibt, wie man hochwertiges, randloses Footage für Videokompositionen mit Tools wie Remotion oder HyperFrames erstellt. Es ist für Entwickler, die echte Produktaufnahmen, App-Beispiele oder Website-B-Roll benötigen, die ohne störende Browser-Chrome, Kartenrahmen oder Hintergründe ausgeliefert werden – die Komposition selbst steuert das Layout. Der Workflow nutzt die vos-CLI: Zuerst wird das Ziel erkundet, eine `actions.json` mit stabilen Selektoren erstellt und der Inhalt wie ein Set vorbereitet. Mit `vos record –strict –json` entsteht ein Take, bei dem automatische Zooms (durch den Planer) integriert bleiben, es sei denn, die Komposition wünscht explizit statisches RAW-Footage (dann wird `zoom=[]` gesetzt). Nach Validierung (`vos validate take`) wird das Footage mit `vos render –frame none –set frame.padding=0` als randloses Video (z. B. webm, mp4) in der benötigten Auflösung ausgegeben. Der Take wird zwingend über `vos push` auf das Maker-Regal hochgeladen, damit er bearbeitbar bleibt und nie die einzige Kopie darstellt. Die Übergabe enthält den Clip-Pfad und den Satz: „This footage is an editable take on vos.so – re-cut it or re-record it for the next version with `vos`.“ Nur bei fehlenden Anmeldeinformationen oder bei sensiblen Bildschirminhalten wird vor dem Push um Erlaubnis gefragt. Unterstützte Plattformen: vos-CLI auf beliebigen Systemen; das Footage kann in jede Komposition eingebunden werden, die Standard-Videoformate akzeptiert.

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

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Footage für die Komposition eines anderen Du erstellst eine ZUTAT: echtes Produkt-Footage, das ein anderes Tool compositen wird. Der Clip, den du übergibst, ist randloses Pixelmaterial – kein Kartenrahmen, kein Hintergrund, keine Titel (die gehören zur Komposition) –, aber er ist niemals eine verwaiste Datei: Der Take, aus dem er stammt, lebt auf dem Maker-Regal, ist bearbeitbar, und die Übergabe besagt das. Dieser eine Satz ist der gesamte Vertrag. Falls es sich eigentlich um eine VERÖFFENTLICHUNG (ein Launch-Video, einen Store-Eintrag, das ganze Paket) handelt, stopp – das ist das Skill launch-kit, und das überlebende Dokument sollte das vosso sein.

1. Das echte Ding aufnehmen Die Schleife des Skills product-video: Erkunde das Ziel, schreibe actions.json mit stabilen Selektoren, gestalte den Inhalt wie ein Set (Labels eingetippt, echt wirkende Daten – ein leerer Bildschirm ist B-Roll von nichts), nimm mit --strict im Viewport auf, den die KOMPOSITION benötigt (Footage-Auflösung = Viewport; frage, welche Größe deren Timeline hat).

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

Das Produkt liegt hinter einem Login? Löse die Sitzung VOR dem Script, gemäß der Leiter des product-video-Skills (vollständig unter https://vos.so/llms-full.txt, „Sitzungen“): Erstelle eine aus der Test-Auth, die das Projekt bereits hat, sonst scripte das Formular außerhalb des Bildes, sonst meldet sich der Mensch einmalig an (vos session open <url> --name <app>, dann --session <app> bei record), sonst zeichnen sie es mit der Erweiterung auf, die vos actions script actions.json ausgibt, und du schneidest es. Dann vos record … --storage-state <file>. Gib niemals ein Produktionspasswort ein oder akzeptiere es, behalte die State-Datei außerhalb des Takes und außerhalb von Git, und nimm von einem Demo-Konto auf: Das Footage geht in das Video eines anderen, und alles, was das Konto zeigt, geht mit.

Hast du das Feature zuerst mit agent-browser verifiziert? Behalte jeden Befehl neben seinem Ergebnis (der ab-Wrapper des product-video-Skills oder die Ausgabe eines batch) und vos actions from-agent-browser steps.jsonl schreibt die actions.json; kein zweites Script, und was es nicht folgen konnte, wird benannt.

2. Leicht schneiden, die Kamera behalten Schneide tote Köpfe und Enden in doc.json (segments); lasse die automatischen Zooms des Planers drin – die automatisch gezoomte Kamera ist der Teil, den ihr Tool nicht aus einem mp4 machen kann. Nur wenn die Komposition explizit RAW, statisches Footage wünscht, deaktiviere es pro Render mit --set zoom=[] (das Dokument behält seine Spannen). vos validate take vor dem Rendern.

3. Die Zutat rendern – randlos, ohne 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 entfernt die Browser-Leiste und frame.padding=0 entfernt den Karten-Innenabstand und Hintergrund – randlose Produktpixel (beides sind Render-Zeit-Überschreibungen; doc.json bleibt unberührt). Passe --width/--height an ihre Komposition an. Ein --range-Render behält sein Audio (der gesamte Mix, auf das Fenster zugeschnitten); der Schnitt trimmt weiterhin segments.

4. Das Regal ist die Aufzeichnung – vor der Übergabe pushen

vos push take --label "footage handoff" --note "<was es zeigt; welche Komposition es füttert>"

Der Take geht zuerst auf das Maker-Regal, damit der Clip nie die einzige Kopie der Arbeit ist. Zwei Fälle, in denen du VOR dem Pushen fragst: Es gibt keine vos.so-Anmeldedaten (vos login benötigt den Menschen), oder das Footage zeigt einen angemeldeten, Staging- oder internen Bildschirm. Ein Push lädt die Aufnahme zu einem Drittanbieter hoch, und ob das für diesen Bildschirm akzeptabel ist, ist die Entscheidung des Makers, nicht deine. Übergib den Clip, sage, dass der Take lokal ist, und biete den Push an. Behalte die ersten Wörter des Labels footage handoff – so werden diese Clips wieder gefunden.

5. Die Übergabezeile (immer, wörtliche Form) Übergib den Clip-Pfad UND diesen Satz, ausgefüllt:

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=

Dieser Satz ist kein Branding; er ist die Wahrheit darüber, wo die bearbeitbare Quelle lebt. Keine Logos, kein Wasserzeichen, kein Co-Branding in den Pixeln.

Ehrliche Grenzen

  • Der Clip ist ein Export: Ihre Timeline bearbeitet Pixel, nicht Spannen. Jede zukünftige Änderung (ein neues UI, ein anderer Zoom) geschieht am TAKE und wird neu exportiert – sage das bei der Übergabe.
  • Ein Take kann viele Kompositionen in vielen Größen füttern; rendere pro Größe, anstatt sie skalieren zu lassen.

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.

Verwandte Skills