mcpField
F
feature-arch

feature-arch

github.com/thongdn-it開発5110 回インストール41 週間前に更新
リポジトリ

feature-arch について

feature-archは、Reactアプリを機能単位で構成するためのアーキテクチャガイドです。モジュール境界や構成を設計するチーム向けに、ディレクトリ、依存関係、データ取得、状態管理、テストなどの42項目を優先度別に示します。

主な機能

  1. 01機能単位でのディレクトリ構成
  2. 02インポートとモジュール境界の規則
  3. 03データ取得と状態管理の指針
  4. 04コンポーネント構成とテストの指針
  5. 05優先度付きの42項目のルール

活用シーン

  1. 01Reactプロジェクトのディレクトリ構成を計画する
  2. 02機能モジュール間の依存関係を確認する
  3. 03チームのデータ取得パターンを統一する
  4. 04アーキテクチャ規則を評価しテストを整理する

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/thongdn-it/react-agent-skills --skill feature-arch

インストール後、Claude Code で/feature-archを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

AGENTS.md
metadata.json
README.md
assets/templates/
_template.md
references/
_sections.md
bound-event-based-communication.md
bound-feature-isolation.md
bound-feature-scoped-routing.md
bound-feature-size.md
bound-interface-contracts.md
bound-minimize-shared-state.md
fcomp-colocate-styles.md
fcomp-composition-over-props.md
fcomp-container-presentational.md
fcomp-error-boundaries.md
fcomp-props-as-data-boundary.md
fcomp-single-responsibility.md
fquery-avoid-n-plus-one.md
fquery-colocate-with-feature.md
fquery-feature-scoped-keys.md
fquery-parallel-fetching.md
fquery-server-component-fetching.md
fquery-single-responsibility.md
fstate-context-sparingly.md
fstate-feature-scoped-stores.md
fstate-lift-minimally.md
fstate-reset-on-unmount.md
fstate-server-state-separation.md
import-avoid-barrel-files.md
import-no-cross-feature.md

詳細

機能ベースアーキテクチャのベストプラクティス

機能ごとに React アプリケーションを整理し、チームが独立してスケーラブルに開発できるようにする包括的なアーキテクチャガイドです。8 つのカテゴリにわたる 42 のルールを収録し、重要度に応じて、最重要のディレクトリ構造やインポートから、段階的に適用する命名規則まで優先順位を付けています。

適用する場面

次のような場合に、これらのガイドラインを参照してください。

  • 新しい機能やモジュールを作成するとき
  • プロジェクトのディレクトリ構造を整理するとき
  • インポートルールと境界を設定するとき
  • データ取得パターンを実装するとき
  • 複数の機能からコンポーネントを構成するとき
  • アーキテクチャ違反がないかコードをレビューするとき

優先度別のルールカテゴリ

優先度カテゴリ影響度プレフィックス
1ディレクトリ構造最重要struct-
2インポートと依存関係最重要import-
3モジュール境界高bound-
4データ取得高fquery-
5コンポーネントの整理中〜高fcomp-
6状態管理中fstate-
7テスト戦略中test-
8命名規則低name-

クイックリファレンス

1. ディレクトリ構造（最重要）
  • struct-feature-folders - 技術的な種類ではなく、機能ごとに整理する
  • struct-feature-self-contained - 機能を自己完結させる
  • struct-shared-layer - 本当に汎用的なコードに限り、共有レイヤーを使う
  • struct-flat-hierarchy - ディレクトリ階層を浅く保つ
  • struct-optional-segments - 必要なセグメントのみを含める
  • struct-app-layer - アプリケーションレイヤーと機能を分離する
2. インポートと依存関係（最重要）
  • import-unidirectional-flow - インポートの一方向の流れを徹底する
  • import-no-cross-feature - 機能間のインポートを禁止する
  • import-public-api - 公開 API 経由でのみエクスポートする
  • import-avoid-barrel-files - 深い階層でのバレルファイルからの再エクスポートを避ける
  • import-path-aliases - 一貫したパスエイリアスを使う
  • import-type-only - 型には型専用インポートを使う
3. モジュール境界（高）
  • bound-feature-isolation - 機能の分離を徹底する
  • bound-interface-contracts - 明示的なインターフェース契約を定義する
  • bound-feature-scoped-routing - ルーティングの範囲を機能に関する処理に限定する
  • bound-minimize-shared-state - 機能間の共有状態を最小限にする
  • bound-event-based-communication - 機能間の通信にはイベントを使う
  • bound-feature-size - 機能の規模を適切に保つ
4. データ取得（高）
  • fquery-single-responsibility - クエリ関数の責務を単一に保つ
  • fquery-colocate-with-feature - データ取得処理を機能と同じ場所に配置する
  • fquery-parallel-fetching - 独立したデータは並列に取得する
  • fquery-avoid-n-plus-one - N+1 クエリパターンを避ける
  • fquery-feature-scoped-keys - 機能ごとのクエリキーを使う
  • fquery-server-component-fetching - サーバーコンポーネントのレベルでデータを取得する
5. コンポーネントの整理（中〜高）
  • fcomp-single-responsibility - コンポーネントに単一責任の原則を適用する
  • fcomp-composition-over-props - プロップスのバケツリレーよりコンポジションを優先する
  • fcomp-container-presentational - コンテナーの役割と表示の役割を分離する
  • fcomp-props-as-data-boundary - プロップスを機能の境界として使う
  • fcomp-colocate-styles - スタイルをコンポーネントと同じ場所に配置する
  • fcomp-error-boundaries - 機能レベルのエラーバウンダリーを使う
6. 状態管理（中）
  • fstate-feature-scoped-stores - 状態ストアの範囲を機能に限定する
  • fstate-server-state-separation - サーバー状態とクライアント状態を分離する
  • fstate-lift-minimally - 必要な範囲に限って状態を引き上げる
  • fstate-context-sparingly - 機能の状態にはコンテキストを必要最小限で使う
  • fstate-reset-on-unmount - アンマウント時に機能の状態をリセットする
7. テスト戦略（中）
  • test-colocate-with-feature - テストを機能と同じ場所に配置する
  • test-feature-isolation - 機能を分離してテストする
  • test-shared-utilities - 機能ごとのテストユーティリティを作成する
  • test-integration-at-app-layer - アプリケーションレイヤーで統合テストを書く
8. 命名規則（低）
  • name-feature-naming - ドメイン駆動の機能名を使用します
  • name-file-conventions - 一貫したファイル命名規則を使用します
  • name-descriptive-exports - わかりやすいエクスポート名を使用します

使用方法

詳しい説明とコード例については、個別のリファレンスファイルを参照してください。

関連スキル

  • 機能の計画については、feature-spec スキルを参照してください
  • データのフェッチについては、tanstack-query スキルを参照してください
  • React コンポーネントのパターンについては、react-19 スキルを参照してください

コンパイル済みドキュメント全文

すべてのルールを展開した完全なガイドについては、AGENTS.md を参照してください

コメント

Markdown 対応