はじめに

こんにちは。競技プログラミングのコンテストに参加しているyunixです。今年もそろそろマスターズ選手権の季節がやってきました。

マスターズ選手権は他のコンテストと異なり、公式のビジュアライザが提供されず、各チームが独自に開発する必要があります。過去2年間、この課題に対応するため、ビジュアライザ開発を簡単にするテンプレートと解説記事を作成してきました。

これまでのアプローチは以下のような構成でした：

Reactを使って公式ビジュアライザのような見た目のUIを用意
Rustで問題固有のビジュアライザ機能を実装
- 公式のテスタやテストケース生成コードを流用
- 見た目部分のみ実装すればOK
Vercelでデプロイし、チームメンバーがBASIC認証でアクセス可能に

この方法は、公式ツールを再利用することで正確性を担保しつつ、実装範囲を限定できるため効率的でした。

しかし、この2年間での生成AIの急速な発展は著しく、今では問題文をコピペして貼り付けるだけで、ほぼ問題なく高機能なビジュアライザを自動生成してくれるようになっています。（正直なところ、この状況なら公式で提供してくれてもいいんじゃないかと思わなくもないですが…）

このテンプレートは一見すると使命を終えた感がありますが、それでも公式ツールのスコア計算を流用できるのでミスが少ない、デプロイの方法をあらかじめ準備しておけるなど、実用的なメリットは残っています。

そこで今年は、これまで以上にAIに任せることをテーマに、Agent Skillsを実装しました。リポジトリに問題文と公式ツールを配置して、たった1コマンドで実行するだけ。Claude CodeやCodexが数分程度でビジュアライザを完成させてくれます。

注意: Agent Skills はローカルでコマンド実行やファイル操作を行うことがあります。第三者が作成した Skills を含め、実行前に SKILL.md とスクリプト内容を確認し、意図しない操作（ファイル削除・外部送信など）がないことを確かめてから使うのを推奨します。

実装したAgent Skills

Agent Skillsとは

Claude CodeやCodexには、Agent Skillsというカスタムコマンドを登録できる機能があります。.agents/skills/ディレクトリにSKILL.mdというファイルを置くだけで定義でき*1、/コマンド名を実行するとAIがそこに書いた手順に従って自動でタスクを進めてくれます。「こういう順番でやってね」という指示書をあらかじめ用意しておけるイメージです。

make-visualizer スキル

このリポジトリに実装した /make-visualizer は、ビジュアライザの実装を丸ごと自動化するスキルです。問題文と公式ツール（テスターコード）さえ配置すれば、AIが以下の流れで進めてくれます：

問題文と公式コードを読んで、ビジュアライザの設計案を提案
承認後、Rustでビジュアライザを実装（状態管理・SVG描画）
Wasmにビルドして、ブラウザで動作確認できる状態に

実装したSKILL.mdはこちら。使用方法の詳細はREADMEを確認してください。

実際にやってみる

AHC061を題材にして、実際にAgent SkillsのコマンドをCodexで実行してビジュアライザを実装してもらいましょう。また、Claude Codeでも同様のやり方で実行できます。ビジュアライザ実装はそこまで難しいタスクではないと思われるので、モデルは速度重視の方がストレスがないかもしれません。