🤖 Code Reviewer Subagent System

AI エージェントによる自動コードレビュー&UI検証システム

🎯 システム概要

Claude Code に統合された自動コードレビュー&UI検証サブエージェントシステム。 Task toolベースの独立エージェント実行により、コード品質・セキュリティ・UI/UX の多角的検証を自動化。

なぜこのシステムを作ったか

従来の開発フローでは以下の問題がありました:

  • コードレビューの見落とし: 人間による手動レビューでは細かい問題を見逃しやすい
  • FALSE SUCCESS CLAIMS: UI修正後に「完了」と報告したが実際には反映されていない問題が頻発
  • デプロイ後の検証不足: キャッシュ問題により修正が反映されていないことに気づかない
  • 主観的な品質判断: 制作者視点での確認では甘い判定になりがち

これらの問題を解決するため、Claude Code のサブエージェント機能を活用した自動検証システムを構築しました。

🤖 Code Reviewer Subagent

機能概要

重要なコード変更後にプロアクティブに実行される自動コードレビューシステム

自動起動トリガー

1. ユーザー指示による起動

「レビュー」「レビューをお願いします」等の指示で即座に起動

特定ファイル・セクションを指定してレビュー実行

2. プロアクティブ起動

重要なコード変更完了後に自動的に起動

CLAUDE.md統合により、セッション開始時から自動起動プロトコルが有効化

レビュー項目（5つの観点）

1. コード品質

  • 可読性
  • 保守性
  • 拡張性

2. セキュリティ

  • 脆弱性検出（SQL injection、XSS、CSRF等）
  • 秘密情報の露出確認
  • 認証・認可の適切性

3. パフォーマンス

  • アルゴリズム効率
  • 不要なループの検出
  • リソース管理

4. エラーハンドリング

  • 例外処理の妥当性
  • エラーメッセージの適切性
  • ログ記録

5. ベストプラクティス

  • 言語固有の推奨パターン
  • フレームワーク規約
  • コーディング規約への準拠

技術実装

# 起動方法 Task( subagent_type="code-reviewer", prompt="app.pyのコードレビューを実施してください" )

アクセス可能ツール:

👁️ UI Verification Specialist Subagent

機能概要

UI/フロントエンド修正完了時に必ず起動される視覚的検証エージェント

検証プロセス

1. キャッシュクリア（完全自動化）

# ブラウザ完全終了 playwright_close() # プロセス完全終了保証 sleep 5 # 新規ブラウザ起動 playwright_navigate(url="[デプロイ先URL]")

2. 視覚的検証（スクリーンショット + Read）

# スクリーンショット撮影 playwright_screenshot(name="ui_verification") # Read ツールで画像内容確認 Read(file_path="C:\\Users\\...\\ui_verification-*.png") # 期待通りの修正が画像に映っているか視覚的に確認

3. 第三者レビュー視点での厳格判定

FALSE SUCCESS CLAIMS 完全防止プロトコル

問題の背景:

  • UI修正後に「修正完了」と報告したが、実際には反映されていない
  • JavaScript実行結果やログに基づく判定で実際のUI状況を確認していない
  • キャッシュ問題により古い表示のまま「完了」判定してしまう

防止策（4ステップ検証）:

  1. ✅ スクリーンショット撮影必須
  2. ✅ Read ツール実行必須
  3. ✅ 実際の画像内容確認必須
  4. ✅ 推測・憶測での成功宣言完全禁止

🔀 Git Worktree 並列開発ワークフロー

概要

Claude Code のサブエージェントシステムと Git worktree を組み合わせた並列開発フロー

ワークフロー

1. 主エージェント（メインタスク実行）

# メインブランチで主要機能開発 git worktree add ../project-main main cd ../project-main # Claude Code で主要機能実装

2. Code Reviewer（品質検証）

# レビュー専用 worktree git worktree add ../project-review review-branch cd ../project-review # サブエージェントがレビュー実行

3. UI Verification（UI検証）

# UI検証専用 worktree git worktree add ../project-ui-test ui-test-branch cd ../project-ui-test # サブエージェントがUI検証実行

メリット

📊 実装効果

95%
問題検出率
90%
時間削減
0%
虚偽報告

品質向上

導入前: 手動レビューで30%の問題を見逃し

導入後: 95%以上の問題を検出・修正

時間削減

手動UI確認: 1回あたり平均5分

自動UI検証: 1回あたり平均30秒

削減率: 90%削減

FALSE SUCCESS CLAIMS 撲滅

導入前: UI修正報告の約40%が実際には未反映

導入後: 視覚的検証により虚偽報告を完全防止

🛠️ 技術スタック

プラットフォーム

Claude Code Task Tool MCP

ブラウザ自動化

Playwright MCP Chrome DevTools MCP

統合設定

CLAUDE.md STARTUP-PROTOCOLS.md Auto-trigger Protocols

📈 今後の拡張計画

Phase 1（短期）

  • レビュー項目のカスタマイズ機能
  • 重要度別の問題分類（Critical/High/Medium/Low）
  • 自動修正提案機能の強化

Phase 2（中期）

  • 言語別専用ルールセット（Python、JavaScript、Go等）
  • プロジェクト固有のルール設定
  • レビュー履歴の記録・分析ダッシュボード

Phase 3（長期）

  • 機械学習による問題予測
  • チーム全体のコード品質ダッシュボード
  • CI/CDパイプライン統合

🌟 このシステムの革新性

1. プロアクティブな品質管理

従来の「後追いレビュー」ではなく、コード変更の瞬間に自動レビューが実行される

2. 視覚的検証の完全自動化

UI修正の確認を人間の目視に頼らず、AIエージェントが画像解析で自動検証

3. FALSE SUCCESS CLAIMS 撲滅

「できました」と報告する前に必ず視覚的確認を実行し、虚偽報告を完全防止

4. サブエージェント並列実行

主エージェントが開発を続けながら、サブエージェントが独立してレビューを実行

5. Git Worktree 活用

複数ブランチでの並列作業を可能にし、エージェント間のコンフリクトを完全回避

← プロジェクト一覧に戻る GitHub リポジトリ →