Claude Codeを「自分専用の開発環境」に改造した男──11のAIエージェントと14のカスタムコマンドの全貌

お知らせ

Claude Codeを2ヶ月間かけてカスタマイズし、11の専門AIエージェントと14のスラッシュコマンド、リアルタイム使用量トラッカーを構築した開発者の実践レポートです。「汎用ツール」から「自分のスタックを熟知した専用開発環境」への変貌を遂げたその手法を詳しく紹介します。

この記事のポイント

  • Claude Codeに11の専門エージェント(設計・セキュリティ・パフォーマンスなど)を構築し、毎回のコンテキスト説明を不要にした
  • 14のカスタムスラッシュコマンドで、タスク計画からAPI生成、コードクリーンアップまでを効率化
  • リアルタイム使用量トラッカーにより、レート制限やコスト、コンテキストウィンドウの使用状況を常時把握可能に

問題提起:汎用AIは時間を浪費する

Claude Codeはそのままでも強力なツールですが、素の状態では「汎用的」すぎるという問題がありました。著者のNazar Fedishin氏は、毎回のセッション開始時に「Next.js 15とReact 19とSupabaseを使っています。TypeScript strictモードで…」と延々とコンテキストをコピペする作業に疲弊していました。

さらに厄介なのが、リファクタリングの真っ最中に突然レート制限に引っかかること。「3時間後に再試行してください」──事前の警告もなく、進行中の作業が突然中断されるストレスは計り知れません。

この2つの問題を解決するため、著者は2ヶ月・42,000メッセージ・151セッションを費やして、Claude Codeを自分専用の開発環境に作り替えました。

11の専門AIエージェント

著者が構築した11のエージェントは、それぞれ特定の領域に特化した知識とコンテキストを持っています。

requirements-analyst(要件アナリスト) ── 曖昧なアイデアを具体的な仕様書に変換します。「ダッシュボードを作りたい」という漠然とした要望から、データモデル、API設計、UI要件まで体系的に整理してくれます。

backend-architect / frontend-architect(アーキテクト) ── バックエンド(Supabase + PostgreSQL + RLS)とフロントエンド(Next.js 15 App Router + React 19 Server Components)それぞれの設計判断を、著者のスタックに最適化された形で提案します。

security-engineer(セキュリティエンジニア) ── RLS(Row Level Security)ポリシーの設計、認証フローの検証など、セキュリティ面を専門的にレビューします。

performance-engineer(パフォーマンスエンジニア) ── クエリ最適化やレンダリングパフォーマンスの改善を担当。著者のスタック固有のベストプラクティスに基づいて提案を行います。

deep-research-agent(調査エージェント) ── 技術的な深掘り調査を行い、ドキュメントやベストプラクティスを調べた上で回答を返します。

これらのエージェントは、あらかじめ著者の技術スタック、コーディング規約、プロジェクト構造を「知っている」状態で起動するため、毎回コンテキストを説明する必要がありません。

14のカスタムスラッシュコマンド

頻繁に行う操作をスラッシュコマンドとして定義することで、複雑なワークフローをワンコマンドで実行できるようにしました。

  • /new-task ── 新しいタスクの計画と構造化を自動化
  • /api-new ── APIエンドポイントのスキャフォールディングを生成
  • /code-cleanup ── リファクタリングとコード整理を実行

これらのコマンドは単なるショートカットではなく、著者のプロジェクト固有のパターンや規約に沿った出力を生成するよう設計されています。

リアルタイム使用量トラッカー

Claude Codeの最大の落とし穴の一つであるレート制限を可視化するため、ターミナルのステータスラインにリアルタイムトラッカーを実装しました。

表示される情報は以下の通りです:
コンテキストウィンドウ使用率 ── プログレスバーで視覚的に表示
セッションコスト ── 累計コストをリアルタイムで追跡
レート制限 ── 3時間あたり・3日あたりの制限に対する使用率を表示

これにより、制限に到達する前に作業ペースを調整したり、重要な作業を優先的に処理したりすることが可能になりました。

ターミナル環境:Ghostty + tmux

著者のターミナル環境は、GPU高速化ターミナルエミュレーターのGhosttytmuxの組み合わせで構築されています。tmuxを使うことで、複数のエージェントセッションを同時に実行し、並行してタスクを進めることが可能です。tmuxのステータスバーには、アクティブなセッション数とレート制限の使用率がリアルタイムで表示されます。

CLAUDE.mdによるAIオンボーディング

著者のアプローチの核心にあるのがCLAUDE.mdファイルです。これはClaude Codeが各セッション開始時に自動的に読み込むドキュメントで、以下の情報が含まれています:

  • プロジェクト構造とディレクトリ配置
  • 技術スタックの詳細(Next.js 15、React 19、Supabase、TypeScript strict)
  • コーディング規約とパターン
  • UI構成(Tailwind CSS + shadcn/ui)

このファイルがあることで、AIは最初のメッセージからプロジェクトのコンテキストを完全に理解した状態で応答できるようになります。

知っておくと便利なTips

  • CLAUDE.mdはプロジェクトルートに配置するだけでClaude Codeが自動読み込みする。自分のスタックや規約を記述しておくと、毎回の説明が不要になる
  • エージェントは「何でもできる汎用型」より「特定領域に特化した専門型」の方が、出力の精度が格段に高い
  • レート制限は「3時間ローリング」と「3日ローリング」の2種類があるため、長時間作業する場合は使用ペースの管理が重要
  • tmuxで複数セッションを並行実行すると、あるセッションがレート制限待ちの間も別セッションで作業を続けられる

まとめ

著者の平均セッションコストはわずか0.04ドル、最長セッションは24.5時間で1,326メッセージという驚異的な数字を記録しています。この事例が示しているのは、Claude Codeを「単なるCLIツール」として使うか、「カスタマイズ可能なプラットフォーム」として活用するかで、開発体験が根本的に変わるということです。CLAUDE.md、スラッシュコマンド、専門エージェントの3つを軸に、自分のワークフローに最適化された開発環境を構築することは、今すぐ始められる投資です。


📎 元記事: https://dev.to/nazarf/how-i-built-11-ai-agents-and-14-custom-commands-for-claude-code-5km

コメント

タイトルとURLをコピーしました