mcpField
F
feature-arch

feature-arch

github.com/pymodel開発40488 回インストール4 週間前に更新
リポジトリ

feature-arch について

機能単位で React アプリを構成するためのリファレンススキルです。ディレクトリ構成やインポート境界から、データ取得、状態管理、テスト、命名まで8分野の42ルールを扱います。

主な機能

  1. 018カテゴリ、42のルール
  2. 02機能単位のディレクトリ構成
  3. 03インポート境界と公開 API
  4. 04機能の分離と契約
  5. 05データ取得と状態管理の指針
  6. 06コンポーネント、テスト、命名の実践

活用シーン

  1. 01新しい React 機能の構成
  2. 02インポート規則とモジュール境界の設定
  3. 03アーキテクチャ違反のレビュー
  4. 04機能単位のデータ取得とテストの計画

インストール

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

$npx skills add https://github.com/pymodel/react-frontend-skills --skill feature-arch

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

同梱ファイル

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

references/
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
import-path-aliases.md
import-public-api.md
import-type-only.md
import-unidirectional-flow.md
name-descriptive-exports.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 - 内容がわかりやすいエクスポート名を使用します

使用方法

上記のルールのうち、タスクに該当するものについて、references/<rule-id>.md を読みます。重要な理由と、誤ったコードと正しいコードが記載されています。

レイヤー化と境界に関するルールは、最も広く採用されている React アーキテクチャ標準である Feature-Sliced Design（FSD）に準拠しています。手法の全容については、feature-sliced.design をご覧ください。

関連スキル

  • データフェッチについては、tanstack-query スキルをご覧ください
  • React コンポーネントのパターンについては、react スキルをご覧ください

コメント

Markdown 対応