react-architect-skills

React の機能モジュールアーキテクチャ

React の機能モジュールの構成、レイヤーの分離（Data／Domain／Integration／Presentational）、命名規則、モジュール間の境界に関するガイドラインです。

適用する場面

次の場合にこのスキルを使用します。

• React のフォルダー構成やモジュール境界を定義またはレビューする場合
• ファイル、フォルダー、レイヤー（コンポーネント、コンテナー、ページ、フック、ユーティリティ）の名前を決める場合
• コードの配置場所（コロケーション、カプセル化、レイヤー分離）を決める場合
• 純粋なコンポーネントの props（冗長または任意のパラメーターなし）や、モジュール間の通信を設計する場合

ガイド全体を読み込む場合： モジュール境界、レイヤー構成、命名規則、またはモジュール間の通信に関わるタスクでは、作業を始める前に AGENTS.md をすべて読んでください。

AGENTS.md を読み込まないでください： 単一ファイルの名前変更、スタイルのみの変更、誤字や単一コンポーネントのロジックのみを修正する場合。

クイックリファレンス

レイヤー	フォルダー	目的
Data	api/、stores/	API フック、キャッシュキー、コンポーネント間で共有する状態を管理するストア
Domain	hooks/、utils/、types/、contexts/	ビジネスロジック、純粋なユーティリティ、型、DI
Integration	containers/、pages/	データと UI の接続、ルートエントリ、レイアウト
Presentational	components/	純粋な UI、props を下へ／イベントを上へ、任意または冗長な props なし

• 命名：ファイルとフォルダーには kebab-case を使用します。-page、-container、-context、.types、.schema、フックには use-* などの接尾辞を使用します。
• モジュール：ドメインを優先した境界（例：user-profile、order-processing）とフラットな構成を採用します。ソースファイルから直接インポートし、バレルの index.ts は使用しません。ESLint ルールで境界を適用します。
• 純粋なコンポーネント：データ構造全体ではなく、プリミティブな値や特定の値を渡します。props は必須のものに限り、未定義の値は親で検証します。

完全なガイド（原則、モジュール構成、レイヤーのルール、命名、共通モジュール、モジュール間の通信、テスト）：AGENTS.md。