機能を徹底解説
Claude Code サブエージェント：UI レビュアーを作る
サブエージェントは、専用のコンテキスト・ツール・システムプロンプトを持つ小さな専門家です。セットアップの全工程を 1 ステップ 1 スクリーンショットで。
全 14 ステップの図解チュートリアル。読了時間は約 5 分。各ステップから元動画の該当シーンにジャンプできます。
要点
/agents と入力し、プロジェクトスコープで新しいエージェントを作成。「expert UI/UX engineer who reviews React components in a browser using Playwright」のような説明文から Claude に草案を書かせます。ツールを削り（レビュアーに編集権は不要）、モデルと色を選べば markdown ファイルが完成。カスタムスラッシュコマンドに組み込めば、すべてのコンポーネントが自動でレビューされます。それでも、コードは自分で読むこと。
元動画について
このページは Net Ninja の Claude Code 講座でサブエージェントを扱ったレッスンに沿い、UI レビュアーエージェントを段階的に再構築します。
スクリーンショットは動画のフレームで、クリエイターをクレジット表記しています。文章は当サイトのオリジナルです。手順は 2026 年 9 月に動画と照合して確認済み。
サブエージェントを作成する
コマンド 1 つ、画面 5 枚で専門家が誕生します。
- 1
/agents でエージェントメニューを開く
Claude Code のセッション内で /agents と入力します。プロンプト下のヒントには agent 構成を管理すると表示されます。サブエージェントの作成・確認・編集はすべてこのメニューで行います。
スラッシュコマンド 1 つでサブエージェントの作業場が開きます。動画 2:30 付近 - 2
空の名簿から始める
初回は no agents found と Create new agent の選択肢、そして常に使える内蔵エージェント（general-purpose、statusline-setup、output-style-setup）が表示されます。作ったサブエージェントはこの一覧に並びます。
内蔵はグローバル。あなたのエージェントも同じリストに加わります。動画 2:34 付近 - 3
Claude に草案を書かせる
経路は 2 つ：Claude に生成させる（推奨）か、markdown を手書きするか。草案がおすすめです。仕事を説明すれば Claude がファイルを作り、納得できない部分だけ後から直せます。
まず生成、後に編集。ファイルはただの markdown です。動画 2:58 付近 - 4
仕事内容を正確に説明する
動画で使われた説明文：「Expert UI & UX engineer who reviews the UI & UX of React components in a browser using Playwright, takes screenshots, then offers feedback...」役割・道具・アウトプットの形式を 1 文で伝えます。
役割 + ツール + 出力スタイルを、1 文の説明に込めます。動画 3:10 付近 - 5
ツールセットは意図的に削る
Claude はエージェントに渡すツールを尋ねてきます：all tools、read-only、edit、execution、MCP。レビュアーには編集ツールを外しましょう。欲しいのはフィードバックであって、勝手な書き直しではありません。ここが「助言者」と「黙ってコンポーネントをリファクタする代理人」の分かれ目です。
編集権を持つレビュアーは、信頼できるレビュアーではありません。動画 3:38 付近 - 6
確認して、エージェントの顔合わせ
確認が表示されます：ui-ux-reviewer が Sonnet を使うプロジェクトエージェントとして作成され、内蔵エージェントの隣に並びました。以降、説明文に一致するタスクがあれば Claude Code は委譲できます。
作成済み、スコープ確定、いつでも委譲可能です。動画 4:18 付近
ワークフローに組み込む
エージェントの実体は markdown ファイル。呼び出すのはカスタムコマンドです。
- 7
生成された markdown を読む
エージェントは 1 ファイルです：.claude/agents/ui-ux-reviewer.md に名前、説明、ツール一覧（依頼した Playwright MCP ツール込み）、完全なシステムプロンプトが入ります。全部編集可。中身はファイルに入ったプロンプトにすぎません。
上部はフロントマター、下部は長めのシステムプロンプトです。動画 5:22 付近 - 8
カスタムスラッシュコマンドに組み込む
講座の /ui-component コマンドは、名前と要約からコンポーネントを作るものです。このレッスンでは決定的な指示を末尾に追加します：構築後に ui-ux-reviewer エージェントを呼び出し、そのフィードバックを実装し、満足いくまで繰り返す。
コマンドのタスク節が、レビューループで締めくくられました。動画 5:38 付近 - 9
セッションを再起動する
Claude Code は新規・変更されたコマンドをセッション開始時に読み込みます。いったん抜けて再起動しましょう。/agents の記録が作成済みエージェントを確認してくれます。
新しいエージェントとコマンドは次のセッションで有効になります。動画 6:10 付近 - 10
カスタムコマンドを実行する
/ui-component Modal ——半透明の backdrop 付きのクリーンでモダンなモーダルを作成、と入力します。Claude が作る todo リストの最後には「Review with ui-ux-reviewer agent」が並びます。委譲はもう予定済みです。
名前と要約があれば、コマンドは十分です。動画 6:18 付近
自動レビューループ
構築し、ブラウザでレビューし、修正し、繰り返す——そのうえで diff も自分で読む。
- 11
プランにレビューが組み込まれるのを見る
todo リスト：backdrop 付き Modal の作成、バリアントとサイズの追加、テストファイル、プレビューページへの登録、テスト実行——そして最後の項目が ui-ux-reviewer エージェントによるレビュー。メインスレッドが委譲を準備しています。
7 つの todo。最後の 1 つは専門家の担当です。動画 6:50 付近 - 12
レビュアーがブラウザを要求する
ui-ux-reviewer エージェントが引き継ぎます：コンポーネントを読み、ページを開くために npm run dev の実行を求めます。承認はあなたを経由します。委譲が権限をバイパスすることはありません。
作業するのはサブエージェント、承認ゲートを握るのはあなたです。動画 7:14 付近 - 13
評決を読む
レビュアーは構造化された結果を返します：スクリーンショット取得、小画面向けのビューポート縮小、そして評決——評価は満点の 5/5、判定は production ready、作成ファイルの一覧付き。メインスレッドが指摘部分を修正します。
スクリーンショット、アクセシビリティの指摘、そして星付きの評決。動画 9:04 付近 - 14
自分の目でブラウザで確かめる
証拠です：生成されたモーダルは半透明の backdrop で開き、Escape・×ボタン・外側クリックで閉じられ、primary/secondary/success/warning/danger の 5 バリアント × 3 サイズで提供されます。自分で試して、それからコードを読みましょう。
キーボード、外側クリック、ボタンのすべての閉鎖方法が動作します。動画 9:22 付近