スキル自身の言葉で
既存の Stitch プロジェクトをウォークスルー動画に変換します。エージェントは Stitch のプロジェクトと画面を一覧化し、各画面の screenshot.downloadUrl を assets/screens/ にダウンロードし、幅、高さ、タイトル、説明を screens.json マニフェストに記録した上で、ScreenSlide.tsx と WalkthroughComposition.tsx から、フェード、スライド、スプリング駆動のズーム遷移とテキストオーバーレイを組み合わせた Remotion コンポジションを構築します。
このスキルは、すでに Stitch でデザイン済みの画面を持ち、Remotion が React コンポーネントをレンダリングするため Node.js と React に習熟しているデザイナーおよび開発者を対象としています。フレームはデフォルトで 30 fps、画面は 3〜5 秒に設定され、MP4 をレンダリングする前に Remotion Studio 内で結果をプレビューします。
生成されるもの
- プロジェクト名、画面 ID、タイトル、説明、画像パス、寸法、画面ごとの再生時間を保持する screens.json マニフェスト
- ウォークスルー用に生成された Remotion コンポーネントファイル
- 更新された Remotion プロジェクト設定
仕組み
- 01MCP サーバーを見つける
list_tools を実行し、Stitch と Remotion のサーバープレフィックスを特定して、以降の呼び出しを正しく指定できるようにします。
- 02Stitch から画面を取得する
プロジェクトを見つけ、その画面を一覧化し、各画面のメタデータを取得してスクリーンショット URL、寸法、説明を取得します。
- 03スクリーンショットをステージングする
web_fetch または curl を使って、各スクリーンショットをウォークスルーの流れに沿った順序でステージングディレクトリにダウンロードします。
- 04Remotion プロジェクトをスキャフォールドする
既存の Remotion プロジェクトがあればそれを再利用し、なければ video/ ディレクトリに空の TypeScript プロジェクトを作成します。
- 05コンポジションを構築する
画面ごとのアニメーション用の ScreenSlide.tsx、シーケンスと遷移用の WalkthroughComposition.tsx、fps と寸法用の config.ts を作成します。
- 06プレビューしてからレンダリングする
Remotion Studio 上でタイミングとスプリング値を調整し、その後 CLI または Remotion のレンダリングツールを通じて最終ファイルをレンダリングします。