はじめに
以下の記事にも書いていた「Remotion公式の Agent Skills」に関するお試し（＋ Hello World のお試し）の話です。まずは今回、動作確認的な内容になります。
●ここ数日タイムラインなどで見かけた生成AI系の内容の簡易メモ（Remotion公式の Agent Skills、Pencil、Qwen3-TTS、Clawdbot） - Qiita
https://qiita.com/youtoy/items/48bff1760408354544de
Remotion公式の Agent Skills
Remotion公式の Agent Skills は、以下の公式のポストで見かけました。
今回試す環境
Agent Skills は、当初は Claude Code でのみ使える状況でしたが、その後 Codex や Antigravity などでも使えるようになっています（自分は直近では [OpenCode で少し試した話を記事に書いたりもしました])(https://qiita.com/youtoy/items/cc8ca1a8fa83e7fdf8e3）。
●Introducing Agent Skills | Claude
https://claude.com/blog/skills
今回は、Antigravity との組み合わせで使ってみます。
手順など
Remotion公式の情報
Agent Skills の利用手順と Remotion自体の情報を、Remotion公式のドキュメントなどで確認します。
以下は Agent Skills のページです。
●Agent Skills | Remotion | Make videos programmatically
https://www.remotion.dev/docs/ai/skills
また、以下は Remotion を直接利用する場合の説明などが書かれた公式ドキュメントのページです。
●Creating a new project | Remotion | Make videos programmatically
https://www.remotion.dev/docs/
通常の新規プロジェクト作成の流れで Agent Skills を追加する
上記の公式情報を見つつ少し試してみていたところ、以下の通常の新規プロジェクト作成の流れの中でも Agent Skills を追加できるようになっていました。
●Creating a new project | Remotion | Make videos programmatically
https://www.remotion.dev/docs/
今回、このやり方を試してみました。
新規プロジェクト作成の流れを進める
以下のパッケージをインストールしつつ、新規でプロジェクトを作成するコマンドを実行します。
●remotion - npm
https://www.npmjs.com/package/remotion
その際、テンプレートをオプションで指定するようにしてみています。具体的なコマンドは以下です。
npx create-video@latest my-project --hello-world
このコマンドを実行した後に、選んでいった選択肢を以下で示します。最初の 2つは、デフォルトで選ばれていた Yes を選択しました。
次の選択肢は、Antigravity を含む 3つを適当に選んでみました。
以下はおすすめされているデフォルトを選択しました。
以下は、試しに No のほうでやってみることにしました。
上記を進めた後に作られた構成は、以下となりました。
最初に自動で作成されたコード
とりあえず、コマンドのオプションで Hello World的なテンプレートで作成するようにしましたが、それにより srcフォルダ内に以下が作られていました。
ここから、Antigravity を使った作業を進めてみます。
プロンプト
とりあえず 「プロジェクト内のRemotionスキル・テンプレートを使って、Remotionを紹介する動画を作って」 という内容で依頼をしてみました。
その際、「Planning」＋「Gemini 3 Pro（High）」で実行してみました。以下のように、最初は実装プランの作成が始まります。
そして、以下の実行プランが提示されました。「@remotion/transitions」や「@remotion/shapes」をインストールして利用することや、新しくファイルを作るという内容が書かれていました。
そして、上記の計画に従った作業を進め、手直しなどはなしに出来上がったものが以下となります。今回、シンプルな「公式の Hello Worldテンプレートを元にする」という指示があったので、できあがりもシンプルなものになりました。
とりあえず、計画作成と実行の流れの簡単な動作確認としては十分かと思います。
さらに試してみたいこと
この後は、別途、以下などを見つつ、さらに複雑な内容の処理を試していければと思います。
●Remotion | Prompt Gallery
https://www.remotion.dev/prompts
●Claude Codeで5分でずんだもん解説動画を作る！｜Naoki |電電猫猫
https://note.com/electrical_cat/n/n9be53194cb5c
Hello World のお試しのみ
上記のお試しの中で、動画作成の元になるものとして公式の Hello Worldテンプレートを指定しました。そのテンプレートの内容をそのまま出力するとどうなるかを、少し確かめてみました。
手順について、先ほどと同様にテンプレートを指定したコマンドでも良いのですが、テンプレート指定を外した以下を試してみることにしました。
npx create-video@latest my-project
そうすると、テンプレートは以下から選べるようでした。
一覧の中に、Hello World の JavaScript版があったので、TypeScript版ではなくそちらにして進めてみました（内容は変わらないと思われるのと、内容の違いを少し自分で見てみられればと思い）。そして、以下のような出力が得られて、ファイル一式が準備されました。
その後は、上記の内容にも出ていた、以下の 1つ目のほう（3つのコマンドのほう）でエディタを立ち上げてみました。さらに、2つ目のほうのコマンドで動画データの作成も試しました。
cd my-project
npm i
npm run dev
npx remotion render
そして、以下の動画が生成されたのを確認できました。
なお、コマンド実行後の出力で表示されていた「remotion.dev/docs」「remotion.dev/prompts」のリンクは、以下のページが示されていました。以下の 2つ目は、この記事の中でも少しふれたプロンプト集のようです。
●Creating a new project | Remotion | Make videos programmatically
https://www.remotion.dev/docs
●Remotion | Prompt Gallery
https://www.remotion.dev/prompts
その他
【追記】 VOICEVOX動画テンプレートを用いたずんだもん解説動画の作成
その後、本文中で別途試したいと書いていた VOICEVOX動画テンプレートを用いたずんだもん解説動画の作成を試し、そして以下の記事を書きました。
●「VOICEVOX動画テンプレートと Remotion公式スキル（Agent Skills）」＋「デスクトップ版 Codexアプリ ＋ GPT-5.3-Codex」で解説動画生成 - Qiita
https://qiita.com/youtoy/items/701ec7a4c8092813c532
余談： 当初試していたこと
今回の記事の内容を試す前のお試しの中で、当初、「Claude Code、Codex、Cursor」などの AIエージェント用の手順、ということで書かれていた、以下のインストール用コマンドを用いて試していました。
npx skills add remotion-dev/skills
最終的に、Remotion の新規プロジェクト作成から Agent Skills を使う流れを記事に書いたのですが、Remotion公式の以下のポストを見かけた時点で試したこの内容も、記録として以下に残しておきます。
以下は、この記事公開時点よりもけっこう前に試した流れになるので、最新の内容とは違いがあるかもしれませんのでご注意ください。
Antigravity でのセットアップ準備
Antigravity は以前導入済みなので、今回のお試し用のフォルダを Antigravity で開きます。
そして、このフォルダ直下で上記のコマンド npx skills add remotion-dev/skills を実行します。
セットアップで選んだ選択肢
そうすると、どんな内容でセットアップするかを問われる選択肢が出てきます。それらについて、自分は以下の内容で進めました。
【Antigravity用のみ】
【スコープはプロジェクトのみ】
【Symlink（推奨されているほう）】
上記を選んだあとは、インストール処理の実行を確認されました。
そして、以下のインストール完了の画面や参照先URL が表示されました。
●Skill for remotion-dev/skills
https://skills.sh/remotion-dev/skills
Antigravity上で、今回のお試し用フォルダ内を見てみると、以下のような状態になっていました。
この後、少し動画作成を試してみていたのですが、さらに上で書いたテンプレートを元にした内容を試したりもしたという流れでした。