ChatGPT Plus以上のプランではCodex Agentが追加課金なしで使えます。今回はCodexの公式の curated skill のひとつである develop-web-game を使って簡単なWebゲームを作ってみました。
CodexのSkill（スキル）とは？
Codexはプロンプトで指示して“それっぽく”コードを生成すること自体は比較的簡単にできます。一方で、少し複雑な作業になると「どの順番で進めるべきか」「どこまで確認したらOKなのか」が曖昧になりやすく、結果として品質が安定しないことがあります。そのため、あらかじめ作業の進め方のベストプラクティスをAIが理解してくれていると話が早くて助かります。
そこでCodexには Skill（スキル） という仕組みが用意されており、公式のSkill（代表的なタスクの進め方をまとめたもの）がOpenAIから配布されています。
参考：openai/skills（curated skills の一覧）
https://github.com/openai/skills/tree/main/skills/.curated
Skill（スキル）とは何か
Skillは、ひとことで言うと「AIエージェントに渡す作業手順（作業レシピ）をパッケージ化したもの」です。
チャットで都度指示するのではなく、あらかじめ
・何を目的としているか
・どういう順番で進めるか
・どのツール（スクリプト等）を使うか
・何を成果物として残すか（スクショ、ログ、状態データなど）
・失敗時にどこを確認するか
といった“型”をまとめておき、それをCodexが参照しながら作業します。
Skillの中核になるのは SKILL.md というファイルです。ここにワークフローやルール、必要な前提（依存関係）、検証の方法が書かれています。つまりSkillは「うまくプロンプトを書ける人」だけのものではなく、作業を安定させるための共通手順（標準化）として役立つ仕組みです。
Skillを使うと何が良いのか
Skillのメリットは大きく3つあります。
1) 作業の進め方が標準化される
AIに依頼した作業は、同じことを頼んでも手順が変わったり、確認が抜けたりしがちです。Skillを使うと「まずこれをやる」「次にこれを確認する」という型が固定されるため、結果が安定します。
2) “動いた”を証拠として残せる
UIやWebアプリは、コードの見た目だけでは判断できません。Skillの中には、スクリーンショット・ログ・状態データなど、第三者が確認できる形で証拠を残すことを強制するものがあります。これは非開発者がレビューに参加する上でも重要です。
3) 非開発者が「検品」に参加しやすい
コードの正しさを読むのは難しくても、スクショや画面の挙動、エラーログの有無は比較的簡単に確認できます。Skillが検証の型を用意してくれると、非開発者でも「どこを見てOK判断するか」が明確になります。
develop-web-game の概要
今回利用する develop-web-game は、名前の通りWebゲーム開発用のSkillです。
ただし、単にゲームを作るためというよりも、「ブラウザ上で動くインタラクティブなものを、小さく作って確実に検証しながら改良する」ための型として設計されています。
対象のスキルはこちら：
フォルダ構成は概ね以下の通りです。
・SKILL.md：スキル本体（ルール・手順・検証方法）
・scripts/：Playwrightを使ってブラウザを自動操作するクライアント
・references/：操作シナリオ（入力ステップ）のテンプレ
・agents/：Codex上での表示名やデフォルト説明など
・assets/：アイコンなど
※このスキルを使うにはPlaywrightが必要です。
develop-web-game のポイント：実装→自動操作→観察→修正の反復
SKILL.md には明確に「この順番で進める」というワークフローが書かれています。
重要なのは、実装そのものより“検証の反復”を中心に据えている点です。
このスキルでは、次のようなループを前提にしています。
1.小さく実装する（変更を小さくする）
2.Playwrightでブラウザを自動操作する
3.スクリーンショットや状態データを取得する
4.エラーがあれば最優先で解決を目指す
1〜4を繰り返す
ここで「自動操作」が重要になります。手動操作だと、毎回微妙に条件が変わって再現が難しくなるためです。
そこでdevelop-web-game は、Playwrightによる自動操作と、スクリーンショット・状態JSON・エラーログという“証拠”を軸にして、実装→検証→修正のループを回す設計になっています。ゲーム開発に限らず、ブラウザ上で動くUIデモや小さなプロトタイプの作成にも応用しやすいスキルだと思います。
実際にやってみる
今回はVSCodeにCodex IDE拡張を入れてやってみます。
Codexの設定からSkillsの設定を開きます。
Skillの一覧が表示されるので、Develop Web Gameの「＋」をクリックしてスキルを追加。
AIモデルは最新の5.3を使ってみます。
プロンプトを入れます。ここではどんなゲームにしたいかを説明。
Webブラウザで遊べるレーシングゲームを作りたい。周回コースを3回まわってタイムを競う。他車に接触したりコースアウトするとタイムロス。
ユーザーは自車をカーソルの左右キーでハンドルを切り、スペースキーで加減速（スペースキーを押していると加速、離すと減速）
他車は20台程度存在しコンピュータが自動運転。他車にはカテゴリ1,2の2種類があり1のほうが高速。自車はカテゴリ2なので、カテゴリ1の他車にうまく抜かされつつ、カテゴリ2の他車と競争しないといけない。
最終的にカテゴリ2の中で最速だったら優勝。
画面は2次元で上面視とする。
するとSkillの手順を参照して開発をスタートしてくれます。
途中は省略しますが、Playwrightを利用して動作検証も全部やってくれます。
動作検証した結果はpng（スクリーンショット）とjsonに残されています。
また、実装結果レポートをprogress.mdというファイルに残してくれます。
実際にブラウザで動かしてみると、、、うーん、ちょっと違いますね。
そこで修正を依頼。
自車が他車と同じ方向に走行するように変更。
コースは自車の周囲だけ見せるようにして順次スクロール。
コース形状は実際のサーキットのコースのようにS字や複合コーナーを持つように変更。
他車と接触したら自動ブレーキがかかりタイムロスするように変更。
コース外にも出られるようにする。コース外を走ると自動減速してタイムロスするように変更。
まぁまぁ良い感じになってきました。
さらに調整を繰り返して完成。
完成したゲームは青が自車でカーソルで左右にハンドルを切れます。スペースキーで加速（離すと減速）します。
カテゴリ2（黄色）の中で最速ラップになれば優勝ですが、カテゴリ1（赤色）のほうがスピードが速く、うまくカテゴリ1をやり過ごしながらカテゴリ2の妨害をくぐって走り抜けるのがポイントです。
難易度は低めですが、展開によっては難しくなります。
小話
ちなみに、このゲームのレギュレーションはSuper GTという本物のレースを参考にしてます。スピードの異なる2つのクラスが混在することで、駆け引きが生まれるレースです。