argent-react-native-optimization

ルール

• 闇雲に最適化しないでください。まず測定し、「十分に良い」状態の基準（目標指標＋しきい値）を定め、最も問題の大きい箇所を修正してから、正直に再測定してください。
• クイックスキャン：ライブのレンダー数テーブルには react-profiler-renders を使用します。問題のあるコンポーネントをすぐに特定できます。
• 詳細な測定：argent-react-native-profiler スキルを読み込みます。react-profiler-start → 操作 → react-profiler-stop → react-profiler-analyze の順に実行します。
• 調査：各検出項目について react-profiler-component-source を使用します。コンポーネントの祖先関係とレンダーコストを追跡するには、react-profiler-fiber-tree を使用します。
• 正確性を確認 - 修正する前に、上記の手順から情報を再収集し、そのアプローチに取り組む価値があるか論理的に判断してください。
• 修正：修正を1つ適用します。コミットする前に debugger-evaluate で検証してください。
• 再測定：目標指標が改善したか、悪化したか、横ばいだったかを報告します。他の領域でのリグレッションも確認してください。全体的なメリットがない場合や、許容できないトレードオフがある場合は、元に戻してください。
• 検証だけでなく、問題の発見にもプロファイラーを使用してください。 修正の確認だけでなく、静的解析で見逃された問題を見つけるためにもプロファイラーを使用します。
• アーキテクチャの変更は、1サイクルにつき修正を1つにします。 インラインスタイルやインデックスキーなどの機械的な修正はまとめて適用し、まとめて適用した後に一度再プロファイリングします。測定にデバイス操作が含まれる場合は、最初の実行前に argent-create-e2e スキルで E2E テストとして記録し、それ以降のすべてのサイクルで同じ手順を再現できるようにします。
• React Compiler：react-profiler-analyze が reactCompilerEnabled: true を報告した場合、react-profiler-fiber-tree でコンパイラのバイパスを確認していない限り（useMemoCache がないこと）、useCallback／useMemo／React.memo を提案しないでください。
• サブエージェント：フェーズ1～2ではサブエージェントを割り当てます。リント結果にはファイルごとに1つ、セマンティックチェックにはチェック項目ごとに1つ割り当てます。サブエージェントはデバイスを操作できません。プロファイリングとE2E検証はすべてメインエージェントが実施する必要があります。

パイプライン

リントとセマンティックチェックで、確定的な問題を低コストで検出できます。プロファイリングでは、静的解析で見逃される実行時のボトルネックを特定できます。両方実施してください。

このチェックリストをTODOリストにコピーしてください。

Optimization Progress:
- [ ] Phase 1: Lint sweep (deterministic: catch mechanical issues without a running app)
- [ ] Phase 2: Semantic sweep (judgment: memoization, lists, animations, etc.)
- [ ] Phase 3: Baseline profile (find real bottlenecks, fix top offenders)
- [ ] Phase 4: Verify no regressions (crashes, errors, red screens)

フェーズ1：リントチェック

プロジェクトのルートで、包括的なRNパフォーマンスルールセットを使ってESLintを1回実行します。サブエージェントを割り当てて、結果を修正します（ファイルごとに1つ）。 ルールセットと手順については、references/lint-rules.md を参照してください。

フェーズ2：セマンティックチェック

判断が必要な各領域を確認します。メモ化、リストのレンダリング、アニメーション、非同期処理のパターン、エフェクトのクリーンアップ、状態の整理、コンテキストのアーキテクチャが対象です。チェック項目ごとにサブエージェントを1つ割り当てます。 チェックリスト全体については、references/semantic-checklist.md を参照してください。

フェーズ3：ビジュアルプロファイリング

1. argent-react-native-profiler スキルを読み込み、デュアルプロファイリングを開始します
2. 主要なユーザーフローを実行します（ユーザーが指定した画面に移動するか、主要なフローをすべて実行します）
3. react-profiler-analyze ＋ native-profiler-analyze ＋ profiler-combined-report で分析します
4. プロファイリング結果をフェーズ1～2の検出項目と照合します
5. 影響の大きい問題から修正します。アーキテクチャの変更後は再プロファイリングし、機械的な修正はまとめて適用します。修正後に記録済みのE2Eテストが失敗した場合（たとえば、UIレイアウトが変更された場合）は、黙って破棄するのではなく、argent-create-e2e スキルに従ってE2Eテストを修復してください。

フェーズ4：リグレッションがないことを確認

対象範囲内のすべての画面とUIフローに移動し、それぞれがエラーなくレンダリングされることを確認します。対象範囲が指定されていない場合は、argent-device-interact を使って到達可能なすべての画面を網羅し、アプリ全体を検証してください。debugger-log-registry を使って実行時エラーを確認します（status: "not_connected" が返された場合はログファイルがありません。まず guidance に従って再接続してください）。スクリーンショットを撮影し、赤や黄色のエラー画面がないか確認します。修正によるリグレッション（たとえば、再レンダーが減った一方でCPU使用率が上がった場合や、別の画面で新たなカクつきが発生した場合）も確認してください。メインエージェントのみで実施します。

アプリ全体の最適化

1. フェーズ 1：lint を一元的に実行し（1 つのコマンド）、サブエージェントに各ファイルの修正を並行して割り当てます
2. フェーズ 2：チェックリスト項目ごとに 1 つのサブエージェントを割り当て、セマンティックな見直しを行います
3. フェーズ 3：メインエージェントが問題の多い画面を上位からプロファイリングし、アーキテクチャ上の問題を上から順に修正します
4. フェーズ 4：メインエージェントがすべての画面を操作し、クラッシュしないことを確認します

実行全体が完了したら、変更によって新たな問題が生じていないことを確認するため、再度 lint を実行します。 これにより、修正できたはずの問題を見落としていないかどうかも確認できます。