video

remocn で動画を作成する

概要：$ARGUMENTS

何よりも先に remocn スキルを読み込んでください。このワークフローで必要となる規約（2 つのコンポーネント階層、Canvas とタイミング、デザインのデフォルト）と、references/archetypes/ にあるレシピが記載されています。このスキルは作業の順序を示し、もう一方は知識を提供します。

手順に沿って進めてください。ストーリーボードの確認は省略しないでください。方向性を変更するコストが最も低い段階です。

1. 概要とプロジェクトを確認する

• 質問する前に、概要とリポジトリから内容を取得してください。README、ランディングページのコピー、package.json、最近のリリースを確認します。まだ不足している情報だけを、1 回のメッセージで質問し、作業を止めるのではなく、正直なプレースホルダーで補ってください。
• remocn スキルの references/archetypes/index.md からアーキタイプを選び、該当するレシピを読んでください。レシピのコンテンツ仕様には収集する情報が記載され、尺のバリエーションは概要に指定がない場合の目標尺を定めます。

2. ストーリーボードを作成する

references/storyboard.md の形式で計画してください。

• remocn:video-director エージェントが利用できる場合は、概要、収集した内容、アーキタイプ、目標尺を渡し、ストーリーボードを受け取ってください。
• 利用できない場合は、自分で計画してください。https://remocn.dev/llms-components.txt から候補を絞り込み、選んだ各コンポーネントの .md ページを読み、形式に従って各ビートの尺を配分します。

ストーリーボードは、その形式のままユーザーに提示してください。ヘッダー行、すべての列を含む表、インストール行、不足しているコンテンツの一覧を含めます。文章で言い換えたり、表の形式を変えたりしないでください。選択理由を数行添えても構いません。その後、承認または変更の指示を待ち、コードではなく表に変更を反映してください。

3. プロジェクトをセットアップする

該当するケースを確認してください。

• Remotion プロジェクトがまだない場合（package.json に remotion 依存関係がない場合）：npx create-video@latest --yes --blank <folder> で作成し、その中で作業します。Remocn の前提条件である Remotion を作成するのは、この場合だけです。
• 既存の Remotion プロジェクトがある場合：ユーザーのコードを再構成せず、そのままプロジェクト内で作業します。

どちらの場合も、次の作業を行います。

1. プロジェクトで shadcn add が動作するようにします。

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

   （Claude Code 以外の場合：このファイルの隣にある scripts/setup.mjs を使用します。）shadcn init は Remotion プロジェクトでは実行できず、Remotion のバンドラーは tsconfig のパスを無視します。そのため、このスクリプトは @remocn レジストリを含む components.json を書き込み、tsconfig.json に @/* パスを追加し、remotion.config.ts で同じエイリアスを解決します。プロジェクトにすでに設定されている手順はスキップされます。結果に warning があれば、その内容を伝えてください。

2. studio スキルの Prepare 手順に従い、プロジェクトをそのまま Remocn Studio で開けるようにします。

既存のプロジェクトの場合は、この 2 つの手順で変更するファイルを伝え、実行前に確認を求めてください。

4. インストールして構成する

1. ストーリーボードのインストール行を実行します：npx shadcn add @remocn/<a> @remocn/<b> ...。依存関係は推移的にインストールされます。

2. 動画は src/videos/<slug>/index.tsx に作成します。このレイアウトは Remocn Studio のスキャン対象であり、<slug> という ID の Remotion コンポジションとして登録されます。

   export const meta = {
     durationInFrames: 1356, // Planned total from the storyboard
     fps: 30,
     height: 720,
     width: 1280,
   };
   
   export default function LaunchVideo() {
     return (/* the <TransitionSeries> from the storyboard */);
   }
   

   画面に収まらない長さのシーンは、同じフォルダー内の隣接する場所に配置します（src/videos/<slug>/scenes/hook.tsx）。動画フォルダーの隣には配置しないでください。追加でエクスポートできるもの：defaultProps と zod の schema。どちらもコンポジションに引き継がれます。

3. 各コンポーネントのドキュメントページに記載されている props をそのまま使います。シーケンスの長さは推測せず、ストーリーボードに従ってください。

4. 型チェック（npx tsc --noEmit）を行い、コンポジションを一覧表示します（npx remotion compositions）。一覧に slug が含まれている必要があります。先に進む前に、すべてのエラーを修正してください。コンポーネントの依存関係に宣言ファイルがない場合は、any ではなく npm i -D @types/<package> で修正します。

5. レンダリングを確認する

コードを書くエージェントはフレームを確認できないため、自分で確認してください。

• remocn:scene-reviewer エージェントが利用できる場合は、コンポジション ID、ストーリーボード、プロジェクトのパスを渡します。返された修正を適用してから、もう一度確認するよう依頼します。レビューは2回で終了し、未対応の項目があればユーザーに伝えます。
• それ以外の場合は、各ビートの開始時、動きの中間、ホールドの終了時に、自分で静止画をレンダリングします（npx remotion still <slug> out/review/<beat>-<frame>.png --frame=<n>）。画像を開き、remocn スキルの品質基準（references/anatomy.md §3）に照らして確認します。

6. 引き渡す

1. プレビュー方法（npx remotion studio）とレンダリング方法（npx remotion render <slug> out/<slug>.mp4）をユーザーに伝えます。
2. **「Remocn Studioで開いて調整し、エクスポートしますか？」と提案し、ユーザーが「はい」と答えたら、studio スキルの「開く」**手順に従います。Remocn Studioは、要素を視覚的に調整してmp4をエクスポートできるデスクトップアプリです。Windowsでは利用できないため、この提案は省略します。