はじめに
この記事は、以下の記事でも扱っていた「Agent Skills」に関する話です。
●Remotion公式の Agent Skills を Google Antigravity で少しだけ試す（＋ 公式の Hello World のお試し） - Qiita
https://qiita.com/youtoy/items/92a142c4aff8ad1998bb
●「OpenCode のデスクトップ版アプリ」＋「Kimi K2.5」を少し試してみる（p5.js でのパーティクル描画のコード、シンプルな Agent Skills） - Qiita
https://qiita.com/youtoy/items/cc8ca1a8fa83e7fdf8e3
それを、直近でリリースされたばかりの「デスクトップ版 Codexアプリ」および「GPT-5.3-Codex」を使って少し試します（※ それら 2つは、以下のポストをしたタイミングくらいでのリリースされたもの）。
公式情報をいくつか掲載
まずは今回扱う内容に関連した、公式情報のいくつかを見てみます。
Codex ＋ Agent Skills について
以下は、Codex ＋ Agent Skills に関する公式情報のページです。
●Agent Skills
https://developers.openai.com/codex/skills/
本文の最初のほうに「Skills are available in the Codex CLI, IDE extension, and Codex app.」という記載もありますが、これらで Agent Skills を使うという話の情報（今回の Codexアプリに限らない話）が書いてあるページになります。
スキルを置く場所
例えばその中で、あるプロジェクト内でのみ扱うスキル・ユーザー用に扱うスキルなどのファイル配置に付いての情報が記載されています。
記事執筆時点では、他の特定の AIエージェントなどでも共通で使える「.agents/skills」に置いたスキルを扱えるようになっています。
以下は、それに関するポストの 1つで、以前の仕様から置きかえをしていくような話が書かれているようです。
記事執筆時点では以前の仕様も利用できるようですが、今回は、「.agents/skills」に配置する形のほうで進めます。
デスクトップ版 Codexアプリについて
以下は、Codexアプリに関する公式ページです。
●Codex app
https://developers.openai.com/codex/app
コマンド関連
その中には、コマンド関連のページもあり、記事執筆時点では以下が使えるようです。
●Codex app commands
https://developers.openai.com/codex/app/commands
GPT-5.3-Codex について
以下は GPT-5.3-Codex のページです。
●GPT-5.3-Codex のご紹介 | OpenAI
https://openai.com/ja-JP/index/introducing-gpt-5-3-codex/
以前のモデルとの違いや、特定のプロンプトで Webページを作成した場合の GPT-5.2-Codex との違いなどが書かれています。
ちなみに余談になってしまいますが、Webサイト作成の比較の部分では、以下のようなプロンプトで試した事例が掲載されていました（これも後で少し試してみたいところ）。
プロンプト：Quiet KPI（創業者向けの週次メトリクスダイジェスト）のランディングページを作成して。デザインは、ソフトな SaaS スタイル。ガラス調のカード、ラベンダーからブルーへのグラデーション、控えめなブラー。各セクション、メール取得付きヒーロー、サンプルレポートカードのグリッド、インテグレーション一覧、「お客様の声」カルーセル、料金切替（月額／年額）、FAQ、フッター。
- 書体は Satoshi または同様の幾何学的サンセリフ体。
- ボタンは角丸（半径14px）。フォーカス状態を明確にする。
- 上品なスクロールベースのリビールを1つ追加。
デスクトップ版 Codexアプリ と Agent Skills
次に Codexアプリ と Agent Skills の話について少し書きます。
デスクトップ版 Codexアプリでの Agent Skills に関するメニュー
Codexアプリには、標準で以下の Agent Skills に関するメニューがあります。
そのメニューを開くと、以下のようにデフォルトでインストール済みのスキルが出ていたり、スキルの一覧から特定のスキルを選んで追加できる部分があったりするようです。
右上の「＋ New skill」ボタンを押すと、以下のように「Skill Creator」スキルが指定された状態でチャットができる画面が出てきます（「Skill Creator」スキルを使った、独自スキル作成の指示ができる状態の画面になります）。
このようなアプリ上からスキルを扱う仕組みもありますが、今回は冒頭に掲載した過去記事で書いていたような、プロジェクト用のスキルをコマンドで導入するやり方で試してみます。
デスクトップ版 Codexアプリで Remotion用のスキルを試す
それでは、Codexアプリで Remotion用のスキルを試していきます。
今回の内容を試すための適当なフォルダを作り（今回のプロジェクトのルートになるフォルダ）、その中でこの後の作業を進めていきます。
コマンドでスキルをセット
Remotion用のスキルについて、スキル作成用のコマンド（ npx skills add remotion-dev/skills というコマンド）ではなく、Remotion のセットアップをする以下のコマンドで試してみます。
npx create-video@latest my-project
コマンド実行後の選択肢で、テンプレートはブランクとし、Agent Skills は Claude Code用を選びました（※ 「.agents/skills」が作られるものの、「.codex/skills」自体やそれに関する symlink などは作成されない状態にしました）。
コマンド実行完了後のファイル・フォルダ構成と、スキル用のフォルダの構成は以下となりました。
今回、Codexアプリでは、プロジェクト用に設置された「.agents/skills」フォルダ以下のスキルが利用される形です。
デスクトップ版 Codexアプリでスキルを使ってみる
デスクトップ版 Codexアプリでプロエジェクト用フォルダを開く
Codexアプリで、先ほど作成した「my-project」フォルダを開きます。
試しに、新規スレッドで「/（スラッシュ）」を入力すると、そこで出てくる一覧に「Remotion用のスキル」がプロジェクト用のスキルとして表示されているのが確認できました。
プロンプトの検討
あとは、プロンプトで動画作成の指示を出してみます。
その際、過去記事で紹介だけしていた以下を見てみつつ、今回のお試し用のプロンプトを考えました。
●Claude Codeで5分でずんだもん解説動画を作る！｜Naoki |電電猫猫
https://note.com/electrical_cat/n/n9be53194cb5c
●Remotion | Prompt Gallery
https://www.remotion.dev/prompts
最終的に Remotion公式の「Prompt Gallery」の中で、以下の「Audio Spectrum Visualizer」をもとにした内容で試してみることにしました。
●Remotion | Prompt
https://www.remotion.dev/prompts/show?prompt=audio-spectrum-visualizer
ここで紹介されていたプロンプトは、以下のとおりです。
Create a 1920x1080 dark-themed composition called 'AudioSpectrum' featuring an audio spectrum visualizer synced to funk.mp3 from the public folder, displaying 32 vertical frequency bars that bounce and pulse reactively to the bass, mids, and highs, with a vibrant gradient from magenta to cyan across the bars, each bar having a subtle glow effect and smooth rounded tops, the bars reflecting faintly on a glossy dark surface below, centered horizontally with gentle horizontal padding, the whole visualization fading in smoothly at the start, duration matching the full audio length at 30fps — allow changing the bar count, gradient colors, bar width, and glow intensity — use remotion-best-practices skill."
このプロンプトの内容について、機械翻訳で日本語にしたところ、以下のような内容のようです。
パブリックフォルダ内の funk.mp3 に同期したオーディオスペクトラム・ビジュアライザーを特徴とする、1920x1080 のダークテーマ構成「AudioSpectrum」を作成してください。低音・中音・高音に反応して跳ねたり脈動したりする 32 本の縦方向の周波数バーを表示し、バー全体にはマゼンタからシアンへの鮮やかなグラデーションを適用します。各バーは控えめなグロー効果と滑らかな丸みのあるトップを持ち、下部の光沢のある暗い表面に淡く反射します。水平方向に中央配置し、やさしい水平パディングを設け、ビジュアライゼーション全体は開始時にスムーズにフェードインします。再生時間は 30fps でオーディオ全体の長さに一致させてください。バー数、グラデーションカラー、バー幅、グロー強度を変更可能にしてください — remotion-best-practices skill を使用してください。
今回用いるプロンプト
上記の内容は「funk.mp3」というファイルにもとづいた表示をする、というものでしたが、今回は以下のように MP3ファイルを使わない形で試してみました。具体的には、仮想的な何かの音源を想定してもらうこととし、なおかつオーディオファイルの長さに合わせるという指定だった時間を 20秒に変更しました。
それと「use remotion-best-practices skill」にあたる部分を削り、スキルの利用をするという指定はプロンプトから除いて Codexアプリ上での指定をすることにしました。
【今回試すプロンプト】：
仮の何らかの音声ファイル（様々な音が混じり音の変化が激しいものとする）を想定して、それと同期したオーディオスペクトラム・ビジュアライザーを特徴とする、1920x1080 のダークテーマ構成「AudioSpectrum」を作成してください。低音・中音・高音に反応して跳ねたり脈動したりする 32 本の縦方向の周波数バーを表示し、バー全体にはマゼンタからシアンへの鮮やかなグラデーションを適用します。各バーは控えめなグロー効果と滑らかな丸みのあるトップを持ち、下部の光沢のある暗い表面に淡く反射します。水平方向に中央配置し、やさしい水平パディングを設け、ビジュアライゼーション全体は開始時にスムーズにフェードインします。再生時間は 30fps で長さは20秒としてください。バー数、グラデーションカラー、バー幅、グロー強度を変更可能にしてください。
Codexアプリのスレッドで「/（スラッシュ）」を押して出てくる一覧から、Remotion用のスキルを選び、その後に上記のプロンプトを入力します。具体的には、以下の状態にしました。
これを実行していきます。
スキルを用いた処理
実行直後は、以下のような内容になりました。
その後、いったん以下の実装方針が決まり、引き続き処理が進んでいきました。
そして、動画生成用のコードが準備できた状態になったようで、こちらの入力待ちの状態になりました。
動画の生成と内容の確認
その後、ひとまずの処理が終わったようだったので「動画を生成して」という依頼を出しました。
そうすると、以下のように依存関係のインストールが行われ、動画生成の処理が進んでいきました。
最終的に、以下のようにファイルができあがりました。
生成された動画の内容は、以下のとおりです。仮の音源で、という指定だったので適当なビジュアライズになった感じはしますが、「プロンプトで特定の内容を作る」という処理が行えたことは確認できたかと思います。
【追記】 VOICEVOX動画テンプレートを用いたずんだもん解説動画の作成
その後、本文中で別途試したいと書いていた VOICEVOX動画テンプレートを用いたずんだもん解説動画の作成を試し、そして以下の記事を書きました。
●「VOICEVOX動画テンプレートと Remotion公式スキル（Agent Skills）」＋「デスクトップ版 Codexアプリ ＋ GPT-5.3-Codex」で解説動画生成 - Qiita
https://qiita.com/youtoy/items/701ec7a4c8092813c532