mcpField
V
visual-mode

visual-mode

github.com/remotion-dev開発68.6k812 回インストール今日更新
リポジトリ

visual-mode について

Remotion Studio の Visual Mode における Sequence の識別と追跡の仕組みを説明し、Studio API ルート追加時に Browser Studio の対応チェックリストを更新するよう案内します。

主な機能

  1. 01Sequence 識別フィールドの説明
  2. 02ホットリロード時の追跡動作
  3. 03ノードパスとスタックの対応指針
  4. 04Browser Studio ルート確認の注意

活用シーン

  1. 01ホットリロード中の Sequence 状態の把握
  2. 02Sequence のノードパスと識別子の対応付け
  3. 03Browser Studio API ルートの追加

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/remotion-dev/remotion --skill visual-mode

インストール後、Claude Code で/visual-modeを入力して読み込まれたか確認します。

詳細

ビジュアルモードは、Remotion Studio でシーケンスを視覚的に編集できる機能です。

以下の点を確認しました。

フィールド

  • overrideId -> ファイル／行／列が変わっても、シーケンスの同一性は保たれます
  • シーケンスの stack -> ホットリロード時に変わります。異なる overrideIds を持つ複数のシーケンスで共有されます
  • シーケンスのファイル、行、列（シンボリケートされたスタック）-> 変わりませんが、非同期で計算する必要があります
  • nodePath -> 行、スタック、overrideId が変わっても、同一性は保たれます。非同期です

展開状態を追跡するには、nodePath + index が理想的です。最終的な目標はこれです。

nodePath が overrideId にマッピングされた後は、変わりません。変わるとコンポーネントが再マウントされ、overrideId が変わってしまうためです。

同じ stack がすでに別のシーケンスで使われている場合は、その overrideId を再利用します。

nodePath からシンボリケートされたスタックへの対応は、理論上、ファイルが変更されるたびに変わる可能性があります。ただし、複数のシーケンスが同じスタックを共有する場合、それらはすべて同じ nodePath を持ちます。

各スタックについて nodepath を取得するのは一度だけにする必要があります

シンボリケートされていない異なるスタックが、同じシンボリケートされたスタックになることがあります。これは高速リフレッシュが原因です

シンボリケートされていないスタックからシンボリケートされたスタックへの対応が変わることはありません。変わる場合は、高速リフレッシュによって別のスタックになっているためです

Browser Studio のルート追跡

新しい Studio API ルートを追加する際は、issue #9807 の Browser Studio 対応チェックリストにも追加してください。ルートが意図的にサーバー専用である場合も含め、同じ変更内で行ってください。必須の Browser Studio 操作、または明示的に未対応のルートのいずれかに記載してください。

コメント

Markdown 対応