remotion

Stitch で設計したアプリの画面を、紹介動画にしたいときに効きます。Google の Stitch（画面を設計する道具）から画面の画像を取ってきて、Remotion（React で動画を組む道具）の上で、切り替え・拡大・文字の重ねを付けた画面紹介の動画に仕上げる流れです。

SKILL.md の大きさ（2026-10-23 時点）

12,942 バイト

同梱ファイル（2026-10-23 時点）。部品の雛形・例・点検表・取得用のスクリプト

6 件

動画の型（スライド・機能の強調・利用者の流れ）

3 つ

同じ公開元には Stitch の画面を React の部品にするスキルなどがあり、これはその中の「動画にする」担当です。design-md で取り出したデザインの決まりは、動画の見た目をそろえるのに使えると README が書いています。

流れは 4 段

1. 画面を集めるStitch の MCP でプロジェクトと画面を探し、画面ごとに画像と大きさを取ってくる
2. 部品を作る画面 1 枚を映す ScreenSlide.tsx と、それを並べる WalkthroughComposition.tsx
3. 見て直すRemotion Studio で秒数・切り替え・文字の出るタイミングを整える
4. 描き出すnpx remotion render で MP4 にする。Remotion の MCP があればそちらでもよい

画面の集め方が具体的

最初に list_tools で、Stitch と Remotion の MCP サーバーがどの名前の頭で入っているかを確かめさせます。stitch: か mcp_stitch: のように、環境で頭の付き方が違うからです。

プロジェクトの ID が分からなければ、自分のプロジェクトを一覧にして題名で探します。次に画面を一覧にし、画面ごとに詳細を取って、画像の取得先・HTML の取得先（任意）・幅と高さ・題名と説明を集めます。画像は assets/screens/<画面の名前>.png に、動画で見せる順に保存します。

画面の一覧表を 1 枚のファイルにする

集めた画面は screens.json という一覧表にまとめます。1 画面ごとに題名・説明・画像の場所・幅と高さ・表示する秒数を持たせ、動画の部品はこの表を読んで組みます。

本文は「値を部品に書き込まず、一覧表と設定に置け」としています。画面が増えたり順番が変わったりしても、表を直すだけで済む作りです。

動画の型が 3 つ用意されている

• スライド1 画面 3〜5 秒、切り替えはふわっと重ねる。下に画面の題名、上に進み具合の帯
• 機能の強調画面の一部へ寄る。丸や矢印の動きで機能を指し、前後の比較を並べる
• 利用者の流れ画面を順に横へ送る。手順の番号を重ね、押す・触る動きを強調する

ほかに、押せる場所を脈打つ輪で示す、ナレーションを付ける、Stitch の HTML から見出しやボタンの文字を拾って注釈にする、という発展の使い方も書かれています。

同梱の雛形と点検表

同梱は 6 件です（2026-10-23 時点）。画面 1 枚の部品の雛形（resources/screen-slide-template.tsx）は、0.95 倍から等倍へ寄る動きと、15 コマ遅れて出る文字が入っています。

点検表（resources/composition-checklist.md）は 13 の区分に分かれ、準備・素材・部品・設定・動き・見た目・時間・確認・描き出し・仕上がりまでを並べます。動きの目安として、ばねの減衰は 8〜15、硬さは 60〜100 が普通、としています。

Stitch を使っていないとき

• Stitch を使わず Remotion で動画を作る作り始めは Remotion の公開元のスキルに任せる
• 動画の React の書き方を知りたい動き・時間・配置の決まりがまとまっている
• HTML で動画を組みたいRemotion とは別の系統

このスキルは Stitch の MCP から画面を取るところが出発点です。Stitch の画面が無いなら、ほとんどの段が使えません。

Remotion で一般の動画を作るなら、Remotion の公開元が出している remotion-best-practices が入口です。本文自身も、高度な技は Remotion の公式スキル（npx skills add remotion-dev/skills）を見よ、と案内しています。

Remotion の公開元のスキルとの使い分け

役割がはっきり違います。このスキルは「Stitch の画面 → 画面紹介の動画」という 1 本の流れの手順書で、Remotion の書き方そのものは浅くしか扱いません。

remotion-dev の側は、プロジェクトの作り方・React の書き方・Studio・描き出しの決まりを、Remotion 本体の版に合わせて持っています。両方を入れて、流れはこのスキル、書き方の細部は remotion-dev の側、と分けるのが無難です。

操作できるデモが欲しいとき

動画ではなく、触って動かせる見本が欲しいなら別の担当です。README は、その場合は Stitch の画面を React の部品にするスキル（react-components）を挙げています。

外へ取りに行き、シェルを動かし、描き出す

本文には、Stitch の MCP の呼び出し、web_fetch か curl での画像の取得、npm でのプロジェクト作成とパッケージの導入、npx remotion render での描き出しが書かれています。同梱の scripts/download-stitch-asset.sh は、保存先のフォルダを作り、curl で画像を取り、失敗したら書きかけのファイルを消します。

frontmatter の allowed-tools には、Stitch と Remotion の MCP の道具・Bash・Read・Write・web_fetch が並んでいます。これは道具を絞る設定ではなく、確認なしで使ってよい道具の宣言です。ほかの道具が使えなくなるわけではありません（スキルを入れる前に確認すること）。

描き出しまで進む

描き出しは時間と計算資源を使います。並列の数（--concurrency）や画質（--quality）、圧縮の方式（--codec h264 か h265）を変える案内もあります。

雛形の例は、Remotion の資料と書き方が違うところがある

同梱の例 examples/WalkthroughComposition.tsx は、切り替え（TransitionSeries.Transition）を画面の区切り（TransitionSeries.Sequence）の中に入れています。Remotion の公開元の資料（remotion-markup の transitions.md）では、切り替えは区切りと区切りの間に並べる書き方です。

全体の長さの計算も、画面ごとの秒数を足しただけです。同じ資料は、切り替えの間は前後の場面が重なるので全体が短くなる、と書いています。zoom と指定した画面も、例では fade() に置き換えられています。

本文の押せる場所の例は spring() を使っていますが、読み込んでいるのは interpolate と useCurrentFrame だけです。例はそのまま写すより、remotion-dev の資料と照らして直させるのが無難です。

設定ファイルの役割がずれている

手順の 2 段目は、remotion.config.ts で動画の ID・大きさ・コマ数を設定せよと書いています。一方で同梱の例は、動画の登録（<Composition>）を RemotionRoot の部品で行い、そこで幅・高さ・コマ数を渡しています。

Remotion の公開元の資料も、幅・高さ・コマ数・長さを決めるのは <Composition> だとしています。このずれに迷ったら、例の側に合わせてください。

画像の置き場所が 2 通りある

画面を集める段では assets/screens/ に保存せよと書き、ファイル構成の図では video/public/assets/screens/ に置いています。点検表は「素材の場所は public/ からの相対」としています。最初から Remotion のプロジェクトの public/ の下に保存させると、手戻りがありません。

文字の大きさは小さめ

雛形の文字は、題名 48px・説明 24px です。例の一覧表の動画は幅 1920px なので、remotion-dev の remotion-create が同梱する目安（幅 1080px で見出し 84px 以上）と比べると、かなり小さい値です。読みやすさが要る動画なら、大きくさせてください。

名前が「remotion」だけ

スキルの名前が remotion の一語です。説明文は Stitch の画面から動画を作ると書いていますが、Stitch と関係の無い Remotion の依頼でも候補に挙がりうる名前です。Remotion の公開元のスキルと並べるなら、どちらを使うかを依頼文で名指しすると確実です。

ライセンスと費用

ライセンス: Apache-2.0（リポジトリの LICENSE）。README は、Google の公式に支援された製品ではないと書いています。

Remotion 本体には、組織の規模で費用がかかる利用規約があります。中身は remotion-best-practices の解説の注意点にまとめています。

Remotion を使ったことがなくても使えますか

使えます。プロジェクトの作り方から描き出しまで、手順が 1 本にまとまっています。ただし本文が前提に勧めているのは、Remotion の動画の作り方と React の部品の理解です。分からないところは、Remotion の公開元のスキル（remotion-best-practices など）を一緒に入れて補うのが近道です。

Remotion の MCP サーバーは必須ですか

必須ではありません。前提には「Remotion の MCP サーバーか Remotion の CLI」と書かれています。描き出しは CLI の npx remotion render でもでき、MCP があればそちらを使ってもよい、という書き方です。必須なのは Stitch の MCP サーバーのほうです。

動画の秒数や順番はどこで変えますか

画面の一覧表 screens.json です。画面ごとに表示する秒数と順番を持たせ、部品はこの表を読んで組みます。同梱の例では、画面ごとに切り替えの種類（fade や slide）も表に書いています。

出来上がるのは MP4 ですか

既定の流れでは MP4 です。描き出しのコマンドの例が output.mp4 に書き出します。Remotion の MCP を使う場合は、MP4 や WebM などの形式を指定できる、と本文にあります。先に Studio で確かめたいなら、依頼文で描き出しを止めておいてください。

対応しているエージェントはどれですか

Claude Code と Codex です。公開元の README が Codex・Claude Code などで使えると書き、それぞれの導入方法を載せています。Codex 向けのプラグインの定義（.codex-plugin/plugin.json）も同梱しています（2026-10-23 確認）。当サイトは公開元が明記しているものだけを対応として表示しています（指標の意味と限界）。