ai-engineer-teams: Skill for Kiro

Bulletproof React — Feature-Based Colocation

featureごとにコード（コンポーネント、hooks、API、型、テスト）をコロケーションし、変更の影響範囲を局所化するフロントエンドアーキテクチャ。

使うべき時（使わないべき時）

使うべき時	スキップすべき時
5画面以上のSPA/SSRアプリ	LP1枚、静的サイト
複数人での並行開発	ソロ開発の小規模アプリ
featureが独立して成長する	全画面が密結合
長期運用（半年以上）	プロトタイプ、PoC

コア原則

1. featureによるコロケーション — 技術種別（components/, hooks/）ではなくfeature単位でグループ化
2. 明示的な公開API — 各featureは index.ts で公開するものだけをexport
3. 一方向の依存 — feature間の直接importは禁止。共有は shared/ 経由
4. レイヤーの分離 — UI / ロジック / データアクセスを分離

ディレクトリ構成

src/
├── app/                       # アプリケーションのエントリポイント
│   ├── routes/                # ルーティング定義
│   ├── provider.tsx           # 全体のProvider（QueryClient, Theme等）
│   └── main.tsx               # エントリポイント
├── features/                  # featureベースのモジュール
│   └── {feature-name}/
│       ├── api/               # API呼び出し（hooks + fetch関数）
│       ├── components/        # feature固有のUIコンポーネント
│       ├── hooks/             # feature固有のカスタムhooks
│       ├── stores/            # feature固有の状態管理
│       ├── types/             # feature固有の型定義
│       ├── utils/             # feature固有のユーティリティ
│       ├── __tests__/         # feature固有のテスト
│       └── index.ts           # 公開API（これだけが外部からimport可能）
├── shared/                    # feature横断の共有コード
│   ├── components/            # 汎用UIコンポーネント（Button, Modal等）
│   ├── hooks/                 # 汎用hooks（useDebounce等）
│   ├── lib/                   # 外部ライブラリのラッパー（axios, dayjs等）
│   ├── types/                 # 共有型定義
│   └── utils/                 # 共有ユーティリティ
└── test/                      # テストユーティリティ、モック、セットアップ

クイック判断ツリー

「このコードはどこに置く？」

どこに置く？
├─ 1つのfeatureでしか使わない        → features/{name}/ 内
├─ 2つ以上のfeatureで使う            → shared/ に移動
├─ ルーティング定義                   → app/routes/
├─ 全体Provider                      → app/provider.tsx
└─ テストヘルパー・モック             → test/

「featureを分割すべきか？」

分割すべき？
├─ 独立してデプロイ/テストできる      → 別feature
├─ 別チームが担当する                → 別feature
├─ 常に一緒に変更される              → 同じfeature
└─ 共有状態が多すぎる                → 共有部分をshared/に抽出