Communitygithub.com

vosjs/vos-migrate

Verwandle eine vorhandene Loom-, Screen Studio-, Cap- oder einfache MP4/WebM-Bildschirmdemo in einen bearbeitbaren vosso Take – kodiere die Datei neu, generiere die Metadaten des Takes, plane und pushe, sodass die alte Demo zu einem lebendigen Dokument wird, das du neu schneidest, anstatt eine Datei neu aufzunehmen.

Was ist vos-migrate?

Dieses Skill wandelt bereits aufgenommene Videodemos (Loom, Screen Studio, Cap, MP4/WebM) in bearbeitbare vosso Takes um. Es extrahiert Metadaten mittels ffprobe, kodiert das Video in VP9 mit Opus-Audio um und erstellt das vollständige Take-Verzeichnis. Im Gegensatz zu nativen Takes fehlen Cursor-Tracking-Daten, sodass kein automatischer Zoom möglich ist – alle Zooms müssen manuell gesetzt werden. Der Push-Befehl überführt das migrierte Video in ein vosso Projekt, wo es als lebendiges Dokument mit Versionshistorie, Ebenen und manuellen Schnitten weiterbearbeitet werden kann.

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

In Ihrer bevorzugten KI fragen

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

Dokumentation

Eine aufgezeichnete Demo in einen bearbeitbaren Take migrieren

Du verwandelst eine FERTIGE Videodatei in einen vosso Take: ein Dokument, dessen Zooms, Trims, Geschwindigkeit und Ebenen Daten sind, mit Versionshistorie gehostet und im Studio bearbeitbar. Was die Datei durch ihre Fremdheit verliert, ist eine Ehrlichkeit, die du tragen musst: Sie hat KEINE Cursor-Spur, also kann nichts automatisch gezoomt werden, und der Digest sieht wenig – deine Augen sind das Kontaktblatt, und jeder Zoom wird per Auge gesetzt.

Zwei Wege:

  • Der menschliche Weg: Ziehe die Datei auf https://vos.so/studio – sie wird als Browser-Recorder-Form abgelegt und öffnet sich direkt im Take-Editor. Wenn ein Mensch anwesend ist, ist dies der kürzeste Weg; gib ihm den Link.
  • Der Agenten-Weg (dieses Skill): Baue das Take-Verzeichnis selbst und führe die normale Pipeline aus. Unten ist der vollständige Ablauf bewiesen.

1. Die Quelle untersuchen

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

Merke: Breite, Höhe, Dauer, fps, ob ein Audiostream existiert. Ein Loom/Screen Studio-Export ist typischerweise 1080p H.264 mit der Kamera-Blase und allen Edits EINGEBRANNT – sie migrieren als Pixel, nicht als Ebenen. Sage das bei der Übergabe: Die Migration macht die Datei ab hier bearbeitbar, sie entfernt keine alten Edits.

2. Das Take-Verzeichnis erstellen

mkdir take
ffmpeg -i demo.mp4 -c:v libvpx-vp9 -crf 34 -b:v 0 -row-mt 1 \
       -c:a libopus take/recording.webm     # -c:a weglassen, wenn kein Audiostream

Dann schreibe take/meta.json aus der Untersuchung (jedes Feld erforderlich; Zeiten in ms; producer: "migrated" kennzeichnet die Herkunft):

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

t0 kann jede beliebige Epoche in ms sein; width/height sind die Videopixel (es gab keinen Browser-Viewport). Setze hasAudio nur auf true, wenn das Webm tatsächlich die Tonspur enthält.

3. Planen – und ehrlich sehen

vos plan take --fresh       # baut doc.json; cursorKept false, zoomAuto 0
vos frames take --times 0,10%,25%,50%,75%,90%,100%   # das Kontaktblatt IST deine Augen
vos digest take             # läuft, aber erwarte wenig: Kopf/Schwanz und nur
                            # harte Szenenschnitte – keine Klicks, keine Tippen, keine Verweildauern

Kein Auto-Zoom ist möglich und keiner sollte vorgetäuscht werden. Lies die Standbilder, finde die 2–4 wichtigen Momente und schreibe manuelle Spans per Auge:

# doc.json - jeder Span, den du hinzufügst, trägt "source": "manual"
# zoom: [{ "id": "m1", "in": 10.5, "out": 14.0, "level": 1.6,
#          "cx": 0.52, "cy": 0.35, "source": "manual" }]
# segments: schneide tote Anfänge/Enden ab; speed: nur wo das Material wirklich stillsteht

Setze export.resolution auf DAS MATERIAL (eine 1080p-Quelle ist 1080p – Migration fügt keine Pixel hinzu). vos validate take muss bestehen; Stichprobe mit vos render take check.webm --range a..b --draft.

4. Pushen – die alte Demo wird ein lebendiges Dokument

vos push take --folder <projekt> --label "migriert von <quelle>" \
    --note "<was es zeigt; dass alte Edits eingebrannt sind; was du neu geschnitten hast>"

Ende in der Schleife: Die Watch-Seite spielt es ab, das Studio bearbeitet jeden geschriebenen Span plus alles, was die Datei nie hatte (Hintergründe, Textebenen, Geschwindigkeit), und vos pull holt menschliche Edits zurück. Die Botschaft gehört in die Übergabe, in einem Satz: Dies ist die letzte Demo, die du blind schneidest – nimm die nächste mit vos record auf, und die Kamera plant sich selbst.

Ehrliche Grenzen (sprich sie aus, übermale sie nie)

  • Keine Cursor-Spur ⇒ kein Auto-Zoom, keine Klick-Effekte, keine Tipp-Zooms und kein Framing-Lint – jeder Zoom ist deiner, per Auge, und du sagst es.
  • Alte Edits, Kamerabläufe und Untertitel sind eingebrannte Pixel.
  • Die Migration kodiert einmalig neu (VP9); eine schlecht komprimierte Quelle bleibt schlecht komprimiert – Migration stellt keine Qualität wieder her.
  • Eine spezifikationsgemäße Lieferleiter (Store-Stills, Poster) funktioniert mit dem migrierten Take genauso wie mit einem nativen – das launch-kit-Skill übernimmt, wenn die Anfrage eine Veröffentlichung ist.

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.

Verwandte Skills