Communitygithub.com

vosjs/vos-migrate

既存のLoom、Screen Studio、Cap、またはプレーンなmp4/webm画面デモを編集可能なvossoテイクに変換します。ファイルを再エンコードし、テイクのメタデータ、計画、プッシュを合成することで、古いデモを再録画ではなく再編集可能な生きたドキュメントに変えます。「このLoomを変換して」「古いデモを移行して」「このmp4を再編集して」「Screen Studioの録画を編集可能にして」と依頼されたときや、録画済みのデモをvossoに取り込むときに使用します。

vos-migrate とは?

このスキルは、Loom、Screen Studio、Cap、または一般的なmp4/webm形式で録画された既存の画面デモを、vossoプラットフォームで完全に編集可能なテイクに移行するためのものです。移行プロセスは、ffmpegを使用してビデオをVP9/opus形式に再エンコードし、ffprobeから取得した幅、高さ、fps、オーディオ有無などのメタデータを含むテイクディレクトリを構築します。'vos plan'、'vos frames'、'vos digest'コマンドを使用してテイクを計画・検証し、マニュアルズームとセグメントを追加してから、'vos push'でプロジェクトに公開します。このスキルは、もともとカーソルトラックがないため自動ズームが不可能であること、古い編集やカメラバブルはピクセルとしてベイクされていること、再エンコードによる品質低下の可能性など、移行の限界を正直に伝えます。主なユースケースは、既存の録画をvossoのバージョン管理とスタジオ編集機能を活用できる形に変換することです。

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

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

録画済みデモを編集可能なテイクに移行する

あなたは完成したビデオファイルをvossoテイクに変換しています。これは、ズーム、トリム、速度、レイヤーがデータとして保存され、バージョン履歴で管理され、スタジオで編集可能なドキュメントです。このファイルが外部から来たことで失われるものは、あなたが責任を持たなければならない正直さです。カーソルトラックがないため、自動ズームはできず、ダイジェストはほとんど情報を得られません。あなたの目がコンタクトシートであり、すべてのズームは目視で配置されます。

2つの方法があります:

  • 人間向けの方法: https://vos.so/studio にファイルをドロップすると、ブラウザレコーダー形式で取り込まれ、テイクエディタで直接開きます。人間がいる場合、これが最短ルートです。リンクを渡してください。
  • エージェント向けの方法(このスキル): テイクディレクトリを自分で構築し、通常のパイプラインを実行します。以下にエンドツーエンドの実績のある手順を示します。

1. ソースを調査する

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

幅、高さ、長さ、fps、オーディオストリームの有無を保持します。Loom/Screen Studioのエクスポートは通常、1080p H.264で、カメラバブルと編集がベイクインされています。これらはピクセルとして移行され、レイヤーとしては移行されません。引き継ぎ時にその旨を伝えてください。移行によりファイルはここから編集可能になりますが、古い編集が元に戻るわけではありません。

2. テイクディレクトリを構築する

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 を削除

次に、プローブ結果から take/meta.json を記述します(すべてのフィールド必須、時間はミリ秒、producer: "migrated" で起源を示します):

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

t0 は任意のエポックミリ秒で構いません。width/height はビデオのピクセル値です(ブラウザのビューポートはありません)。hasAudio は、webmが実際にオーディオトラックを含む場合にのみ true に設定します。

3. 計画を立て、正直に確認する

vos plan take --fresh       # doc.jsonを構築; cursorKeptはfalse、zoomAutoは0
vos frames take --times 0,10%,25%,50%,75%,90%,100%   # コンタクトシートがあなたの目です
vos digest take             # 実行しますが、ほとんど期待しないでください: 頭と尻尾、そして
                            # ハードシーンカットのみ - クリック、タイピング、滞留はありません

自動ズームは不可能であり、偽装してはいけません。静止画を読み取り、重要な2〜4の瞬間を見つけ、目視で手動スパンを記述します:

# doc.json - 追加するすべてのスパンには "source": "manual" が付きます
# zoom: [{ "id": "m1", "in": 10.5, "out": 14.0, "level": 1.6,
#          "cx": 0.52, "cy": 0.35, "source": "manual" }]
# segments: 無駄な頭と尻尾をトリム; speed: 実際に映像がアイドル状態のときのみ

export.resolution を映像に合わせて設定します(1080pソースは 1080p — 移行でピクセルが増えることはありません)。vos validate take がパスする必要があります。vos render take check.webm --range a..b --draft でスポットチェックします。

4. プッシュ — 古いデモが生きたドキュメントになる

vos push take --folder <project> --label "migrated from <source>" \
    --note "<何を示しているか; 古い編集がベイクインされていること; 何を再カットしたか>"

ループで締めくくります:ウォッチページで再生され、スタジオであなたが書いたすべてのスパンと、ファイルに元々なかったすべての要素(背景、テキストレイヤー、速度)を編集でき、vos pull で人間の編集を取り戻せます。この提案は引き継ぎの一言に集約されます:これが最後のブラインド編集デモです — 次回は vos record で録画すれば、カメラが自動で計画します。

正直な限界(それを伝え、決してごまかさないこと)

  • カーソルトラックがない ⇒ 自動ズーム、クリック効果、タイピングズーム、フレーミングのlintは不可能。すべてのズームはあなたの目視で行われ、そう伝えます。
  • 古い編集、カメラバブル、キャプションはベイクされたピクセルです。
  • 移行は1回再エンコードします(VP9)。圧縮が悪いソースはそのまま悪いままです — 移行で画質が回復することはありません。
  • スペックサイズの配布物(静止画、ポスターの保存)は、ネイティブのテイクとまったく同様に移行テイクから機能します。リリースが要求された場合は、launch-kit スキルが引き継ぎます。

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.

関連スキル