Screenshot Analyzer (Multi-Agent)

UIスクリーンショットから製品フィーチャーを抽出するための、調整された複数エージェント分析パイプライン。

中核原則: 構築する内容（フィーチャー/インタラクション）を説明する。実装方法（テックスタックなど）ではない。

マルチエージェント アーキテクチャ

このスキルは、包括的な分析のために 5 つの専門化エージェントを編成します:

                    ┌─────────────────┐
                    │   Coordinator   │
                    │   (this skill)  │
                    └────────┬────────┘
                             │
         ┌───────────────────┼───────────────────┐
         │                   │                   │
         ▼                   ▼                   ▼
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│  UI Analyzer    │ │  Interaction    │ │   Business      │
│  (parallel)     │ │   Analyzer      │ │    Analyzer     │
│                 │ │  (parallel)     │ │   (parallel)    │
└────────┬────────┘ └────────┬────────┘ └────────┬────────┘
         │                   │                   │
         └───────────────────┼───────────────────┘
                             ▼
                    ┌─────────────────┐
                    │   Synthesizer   │
                    │   (sequential)  │
                    └────────┬────────┘
                             │
                             ▼
                    ┌─────────────────┐
                    │    Reviewer     │
                    │   (sequential)  │
                    └─────────────────┘

プロセス

フェーズ 1: スクリーンショット収集

分析するすべてのスクリーンショットを収集:

1. ユーザーが提供したスクリーンショットファイルを読む
2. 各スクリーンショットについて、ファイルパスと提供されたコンテキストを記録
3. 複数のスクリーンショットがある場合、同じ製品からのものかどうかを判定

フェーズ 2: 並列分析

各スクリーンショットに対して、3 つの Task エージェントを並列で起動:

エージェント 1: screenshot-ui-analyzer

このスクリーンショットを UI コンポーネント、レイアウト構造、デザインパターンについて分析してください。
スクリーンショット: [ファイルパス]
分析結果を JSON として返してください。

エージェント 2: screenshot-interaction-analyzer

このスクリーンショットをユーザーインタラクション、ナビゲーションフロー、状態遷移について分析してください。
スクリーンショット: [ファイルパス]
分析結果を JSON として返してください。

エージェント 3: screenshot-business-analyzer

このスクリーンショットをビジネス機能、データエンティティ、ドメインロジックについて分析してください。
スクリーンショット: [ファイルパス]
分析結果を JSON として返してください。

重要: Task ツールを使用して、1 つのメッセージで 3 つの並列呼び出しを行い、効率を最大化してください。

フェーズ 3: 統合

すべての並列分析が完了した後、シンセサイザーエージェントを起動:

エージェント 4: screenshot-synthesizer

これらの分析結果を統合開発タスクリストに統合してください。

UI分析:
[UI アナライザーの結果を貼り付け]

インタラクション分析:
[インタラクション アナライザーの結果を貼り付け]

ビジネス分析:
[ビジネス アナライザーの結果を貼り付け]

製品名: [製品名]
出力ファイル: docs/plans/YYYY-MM-DD-<product>-features.md

フェーズ 4: レビュー

レビュアーエージェントを起動してアウトプットを検証:

エージェント 5: screenshot-reviewer

このタスクリストの完全性と品質をレビューしてください。

元のスクリーンショット: [ファイルパス]
タスクリスト: [統合されたアウトプット]

問題が見つかった場合は、修正を提供してください。

フェーズ 5: アウトプット

1. 最終タスクリストを docs/plans/YYYY-MM-DD-<product>-features.md に書き込む
2. references/output-format.md の形式を使用
3. 概要をユーザーに提示

重要なガイドライン

• すべてのタスクに - [ ] チェックボックス形式を使用
• フィーチャーを小さな、実行可能なサブタスクに分割
• ユーザーインタラクションに焦点を当て、実装の詳細は対象外
• 複数のスクリーンショットの場合: すべての画面でフィーチャーを重複排除
• 競争分析の場合: ユニークなフィーチャーと欠落をハイライト

マルチエージェント アプローチのメリット

1. 徹底性 - 3 つの専門化された視点により、より多くの詳細を検出
2. 速度 - 並列分析により全体時間を削減
3. 品質 - 統合とレビューにより、一貫性のある完全なアウトプットを保証
4. 専門性 - 各エージェントはその領域専門知識に焦点を当てる