mcpField
S
studio

studio

github.com/remocnクリエイティブ・メディア1.7k189 回インストール1 日前に更新
リポジトリ

studio について

Remotion プロジェクトを Remocn Studio に引き渡すための Claude Code スキルです。プロジェクト情報の初期化と動画の登録を行い、デスクトップアプリで開く手順を案内します。

主な機能

  1. 01Remocn のプロジェクト情報を初期化
  2. 02src/videos 内の動画を登録
  3. 03Remocn Studio でプロジェクトを開く
  4. 04Studio のインストール状況を確認
  5. 05非対応プラットフォームの代替手段を案内

活用シーン

  1. 01Studio 用に Remotion プロジェクトを準備
  2. 02ライブプレビュー用に準備済みプロジェクトを引き渡し
  3. 03Studio のインストール状況を確認
  4. 04Studio 非対応環境で代替手段を案内

インストール

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

$npx skills add https://github.com/remocn/remocn --skill studio

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

同梱ファイルassets/registry.tsxscripts/studio.mjs

詳細

Remocn Studio への引き継ぎ

Remocn Studio（https://remocn.studio）は、macOS と Linux 向けのデスクトップアプリです。Remotion プロジェクトをリアルタイムでプレビューし、ユーザーが手動で要素を調整して、mp4 をエクスポートできます。認識できるフォルダーしか開けないため、プロジェクトは一度 Prepare を実行すれば、その後はいつでも Opened できます。

ヘルパースクリプトは ${CLAUDE_SKILL_DIR}/scripts/studio.mjs です（Claude Code 以外では、このファイルと同じ場所にある scripts/studio.mjs）。Node だけが必要で、コマンドごとに JSON オブジェクトを 1 つ出力します。Remotion プロジェクトのルートから実行するか、最初の引数としてルートを渡してください。

Prepare

node "${CLAUDE_SKILL_DIR}/scripts/studio.mjs" init <project-root> --name "<video or product name>"

処理内容と、ユーザーへの説明：

  • .remocn/project.json（Studio のプロジェクトマニフェスト。新しい projectId、revision: 0、ブランドなし）を書き込みます。ファイルが存在しない場合のみ作成します。既存のマニフェストには一切手を加えません。projectId は Studio におけるプロジェクトの識別情報です。
  • Studio のスキャン用ファイルを、存在しない場合は src/videos/registry.tsx に配置し、エントリーポイントでルートを registerRoot(withVideos(Root)) でラップします。以降、meta をエクスポートするすべての src/videos/<slug>/index.tsx が、Remotion Studio と Remocn Studio の両方で、id が <slug> のコンポジションになります。ユーザー独自の Root.tsx 内のコンポジションも引き続き動作します。

ユーザーがすでに使っていたプロジェクトでは、実行前に確認してください。エントリーポイントを編集し（import を 1 つ追加して、ラップを 1 つ追加）、ファイルを 2 つ追加するためです。

結果にエントリーポイントの理由とともに ok: false と表示された場合、エントリーポイントでは import の後に registerRoot(Root) が正確に 1 回呼び出されていません。手動でラップしてください。結果の specifier（エントリーポイントからの相対パス。たとえば remotion/index.ts の場合は ../src/videos/registry）を使って、import { withVideos } from "<registry.specifier>"; を追加し、呼び出しを registerRoot(withVideos(Root)) に変更します。それができない場合は、その理由をユーザーに説明してください。

次に、npx remotion compositions を実行し、すべての動画の slug が一覧に表示されることを確認してください。

Open

ユーザーが Studio でプロジェクトを開くことに同意してから実行してください。

node "${CLAUDE_SKILL_DIR}/scripts/studio.mjs" open <project-root>

結果の message を伝えてください。action に応じて、次のように対応します。

  • deep-link：Studio がプロジェクトを開き、確認ダイアログを表示しています。ほかに行うことはありません。
  • launched：Studio は起動していますが、開くフォルダーをまだ指定できません。ユーザーに Open Folder（macOS では ⌘O、Linux では Ctrl+O）を選択し、プロジェクトのルートを指定するよう伝え、そのパスを伝えてください。
  • not-installed：ダウンロードリンク（https://remocn.studio）と、インストール後に行う同じ Open Folder の手順を伝えてください。
  • unsupported-platform：この OS では Studio は動作しません。動画は npx remotion studio でプレビューでき、npx remotion render <slug> でレンダリングできます。

結果にマニフェストがないと表示された場合は、まず Prepare を実行してください。

何も開かずに Studio がインストールされているか確認するには、detect コマンドを実行してください。

禁止事項

  • .remocn/project.json を手作業で作成したり、別のプロジェクトからコピーしたりしないでください。2 つのプロジェクトで同じ projectId を使うと Studio で衝突し、後から開いたプロジェクトは拒否されます。
  • 動画を src/videos/<slug>/ の外へ移動しないでください。Studio はフォルダー名で動画を識別します。
  • claude.ai や ChatGPT には引き継ぐ対象となるローカルプロジェクトがありません。このプラグインを使うコーディングエージェント（Claude Code、Codex）か、Remocn Studio 独自のテンプレートをユーザーに案内してください。

コメント

Markdown 対応