Communitygithub.com

vosjs/vos-footage

Remotion、HyperFrames、または任意のビデオ構成に対して、実際のプロダクトのクリーンなキャプチャクリップを提供します。vos CLI で録画・自動ズーム処理され、フルブリードでクロームなしの映像として納品され、常にメーカーのシェルフで編集可能なテイクとしてバックアップされます。

vos-footage とは?

このスキルは、Remotion、HyperFrames、または他のビデオ構成ツールで使用するための「素材クリップ」を生成するものです。実際のプロダクト画面やアプリ、サイトのBロールを録画し、ブラウザのクローム(ツールバーなど)を除いたフルブレッドの映像として出力します。録画したテイクは自動的にメーカーのシェルフ(vos.so)にプッシュされ、編集可能な状態で保存されるため、後からリテイクや編集が容易に行えます。ハンドオフ時には、この編集可能なテイクの存在を伝える決まったフレーズを添えることで、受け取り側が将来の変更に対応できるようにします。このスキルは、プロダクトデモ動画やUIのハイライト動画など、他のツールのタイムラインに組み込むための「素材」を作成する場合に特に有用です。

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

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

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

ドキュメント

他の構成のためのフッテージ

あなたは、別のツールが合成するための「INGREDIENT(材料)」として、実際のプロダクトのフッテージを制作しています。あなたが引き渡すクリップはフルブレッドのピクセルです — カードフレーム、背景、タイトルはありません(それらは構成側が所有します)— しかし、それは決して孤立したファイルではありません。そのテイクの元はメーカーのシェルフに編集可能な状態で存在し、ハンドオフ時にそのことが明示されています。この一文がすべての契約です。

もし依頼が実際に「RELEASE」(ローンチビデオ、ストアリスト、完全なキット)である場合は、停止してください — それは launch-kit スキルの範囲であり、その場合に残すべきドキュメントは vosso のものです。

1. 実際のものを録画する

product-video スキルのループ:ターゲットを探索し、安定したセレクタで actions.json を書き、セットのようにコンテンツをステージングし(ラベルを入力し、実際のデータのように見せる — 空の画面は何もないBロールです)、構成が必要とするビューポートで --strict を使用して録画します(フッテージ解像度=ビューポート;そのタイムラインがどのサイズで動作するか尋ねてください)。

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

プロダクトがログインの背後にありますか?スクリプトの前にセッションを解決してください。product-video スキルのラダーに従って(詳細は https://vos.so/llms-full.txt、「Sessions」を参照):プロジェクトが既に持っているテスト認証から一つ作成するか、カメラ外でフォームをスクリプト化するか、人間が一度サインインするか(`vos session open --name 、その後 --session を record に付ける)、または彼らがショットリストvos actions script actions.jsonが印刷するものを使って拡張機能で録画し、それをカットします。その後vos record … --storage-state ` を実行します。本番パスワードを入力したり受け入れたりせず、状態ファイルをテイクとgitの外に保管し、デモアカウントから録画してください。フッテージは他の誰かのビデオに入るものであり、アカウントに表示されているものはすべて一緒に行きます。

最初に agent-browser でフィーチャーを検証しましたか?各コマンドをその結果の隣に置き(product-video スキルの ab ラッパー、または batch の出力)、vos actions from-agent-browser steps.jsonl が actions.json を書き出します。2つ目のスクリプトは不要で、追跡できなかったものには名前が付けられます。

2. 軽くカットし、カメラを維持する

doc.json で不要な頭と尾をトリミングします(segments)。プランナーの自動ズームはそのままにしておきます — 自動ズームされたカメラは、彼らのツールが mp4 から作れない部分です。構成が明示的に RAW で静的なフッテージを要求する場合のみ、レンダリングごとに --set zoom=[] でそれを無効にします(ドキュメントはスパンを保持します)。レンダリング前に vos validate take を実行します。

3. 材料をレンダリング — フルブレッド、クロームなし

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 はブラウザバーのクロームを削除し、frame.padding=0 はカードのインセットと背景を削除します — 端から端までのプロダクトピクセルになります(どちらもレンダリング時のオーバーライドで、doc.json は変更されません)。--width/--height を彼らの構成に合わせてください。--range レンダリングはオーディオを保持します(フルミックス、ウィンドウにスライスされます)。編集カットは依然として segments をトリミングします。

4. シェルフが記録です — ハンドオフの前にプッシュ

vos push take --label "footage handoff" --note "<何が表示されているか; どの構成に供給するか>"

テイクは最初にメーカーのシェルフに送られ、クリップが作業の唯一のコピーにならないようにします。代わりにプッシュの前に尋ねるべき2つのケース:vos.so の認証情報がない場合(vos login には人間が必要)、またはフッテージがサインイン済み、ステージング、または内部画面を表示している場合。プッシュは録画をサードパーティにアップロードします。この画面に対してそれが許容されるかどうかはメーカーの判断であり、あなたの判断ではありません。クリップを渡し、テイクがローカルであることを伝え、プッシュを提案してください。ラベルの最初の単語を footage handoff に保ってください — これがこれらのクリップが再び見つかる方法です。

5. ハンドオフの一文(常に、正確な形で)

クリップのパスとこの文章を埋めて渡します:

このフッテージは vos.so 上の編集可能なテイクです — 次のバージョンで vos を使って再カットまたは再録画できます:https://vos.so/studio?vos=

この一文はブランディングではなく、編集可能なソースがどこにあるかという真実です。ピクセル内にロゴ、透かし、共同ブランディングは一切ありません。

誠実な制限

  • クリップはエクスポートです:彼らのタイムラインはピクセルを編集し、スパンは編集しません。将来の変更(新しいUI、異なるズームなど)はすべてテイク上で行われ、再エクスポートされます — ハンドオフ時にその旨を伝えてください。
  • 1つのテイクから複数のサイズで多くの構成に供給できます。彼らにスケーリングさせるのではなく、サイズごとにレンダリングしてください。

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.

関連スキル