mcpField
S
solid-nextjs

solid-nextjs

github.com/fusengine開発3448 回インストール2 週間前に更新
リポジトリ

solid-nextjs について

solid-nextjsは、Next.js 16プロジェクトでSOLIDとDRYの設計を適用するコーディングスキルです。実装ルール、原則別ガイド、再利用可能なテンプレートを備え、着手前のドキュメント調査と既存コードの確認を求めます。

主な機能

  1. 01SOLIDとDRYの設計ルール
  2. 02実装前のドキュメント調査
  3. 03既存パターンとツールの確認
  4. 045つのSOLID原則のガイド
  5. 05一般的なNext.jsコードのテンプレート

活用シーン

  1. 01Next.js 16のコード構成
  2. 02責務に応じたファイル分割
  3. 03型付きモジュールとインターフェースの作成
  4. 04依存性注入とコンポジションの適用

インストール

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

$npx skills add https://github.com/fusengine/claude-plugins --skill solid-nextjs

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

詳細

Next.js 16 プロジェクトで SOLID と DRY に基づくアーキテクチャを徹底します。ソースファイルを `FUSE_SOLID_MAX_LINES` 以下に保ち、凝集度が低下したら責務ごとに分割します。型は `interfaces/` ディレクトリに分離し（components/pages 内には置かないでください）、エクスポートには必ず JSDoc を付け、module/`modules/cores/` のディレクトリ構造を使用します。コードを書く前に、現在の年を使って Context7/Exa 経由で最新の Next.js/React/Prisma ドキュメントを調査すること、また新しいユーティリティを作成する前に既存のものを grep で検索することを必須とします。

SOLID の各原則に対応した専用のリファレンスガイド（SRP のファイル分割、OCP のコンポジション／プラグインパターン、LSP の契約遵守、ISP の役割ベースのインターフェース、DIP のコンストラクターインジェクション／ファクトリー）に加え、コンポーネント、フック、サービス、ストア、Server Actions、API ルート、バリデーター、Prisma シングルトン、i18n、クエリを網羅した、そのままコピーして使えるテンプレートを 23 個提供します。これは横断的なコード品質スキルであり、機能スキルではありません。フレームワーク API 自体については、nextjs-16 とその関連スキルを参照してください。

SOLID Next.js - モジュラーアーキテクチャ

現在の日付（重要）

今日は 2026 年 1 月です — 検索には必ず現在の年を使用してください。 「2025」または「2026」で検索し、過去の年は決して使用しないでください。

必須：コーディング前の調査

重要：コードを書く前に、まず今日の日付を確認し、ドキュメントとウェブを検索してください。

  1. Context7 を使用して、Next.js/React の公式ドキュメントを調べます
  2. Exa のウェブ検索を使用し、現在の年を指定して最新の動向を調べます
  3. 現在の年の Vercel Blog を確認して、新機能を調べます
  4. Next.js 16 との互換性について、パッケージのバージョンを確認します

検索クエリ（YYYY を現在の年に置き換えてください）：

  • Next.js [feature] YYYY best practices
  • React 19 [component] YYYY
  • TypeScript [pattern] YYYY
  • Prisma 7 [feature] YYYY

コードベース分析（必須）

実装を始める前に必ず行うこと：

  1. プロジェクトの構造を調べ、アーキテクチャを把握します
  2. 関連する既存ファイルを読み、確立されたパターンに従います
  3. 命名規則、コーディングスタイル、使用されているパターンを特定します
  4. データフローと依存関係を把握します

DRY - 再利用するか、共有機能を作成する（必須）

新しいコードを書く前に必ず行うこと：

  1. コードベースを grep で検索し、類似した関数名、パターン、ロジックがないか確認します
  2. 共有配置場所を確認します：modules/cores/lib/、modules/cores/components/、modules/cores/hooks/
  3. 類似コードが存在する場合 → 重複させず、拡張または再利用します
  4. 2 つ以上の機能で使用するコードの場合 → 直接 modules/cores/ に作成します
  5. 3 回以上繰り返されているロジックは、共有ヘルパーに抽出します
  6. 新しいファイルを作成した後、npx jscpd ./src --threshold 3 を実行します

エージェントワークフロー（必須）

実装を始める前に、並行して 3 つのエージェントを起動します。それぞれの Agent 呼び出しには name を 1 つ指定します。

  1. fuse-ai-pilot:explore-codebase - プロジェクト構造と既存パターンを分析します
  2. fuse-ai-pilot:research-expert - スタック内のすべてのテクノロジーについて最新のドキュメントを確認します
  3. mcp__context7__query-docs - 連携の互換性を確認します

実装後、検証のために fuse-ai-pilot:sniper を実行します。

絶対ルール（必須）

1. ソースファイルの行数上限
  • ソースファイルは FUSE_SOLID_MAX_LINES を超えてはいけません。上限の基準となるのはフックのみです
  • 凝集度が低下したら、責務ごとに分割します（ページはモジュールに委譲し、コンポーネントはコンポジションで分割し、Server Action は関心事ごとに 1 つにします）
2. モジュラーアーキテクチャ

機能モジュールと cores ディレクトリを含む完全な構造については、references/architecture-patterns.md を参照してください。

3. JSDoc 必須
/**
 * Fetch user by ID from database.
 *
 * @param id - User unique identifier
 * @returns User object or null if not found
 * @throws DatabaseError on connection failure
 */
export async function getUserById(id: string): Promise<User | null>
4. インターフェースの分離
modules/auth/src/
├── interfaces/          # Types ONLY
│   ├── user.interface.ts
│   └── session.interface.ts
├── services/            # NO types here
└── components/          # NO types here

SOLID 原則（詳細ガイド）

SOLID の各原則には、専用のリファレンスガイドがあります。

  1. references/single-responsibility.md - 1 つのクラス／関数に、変更する理由は 1 つだけ

    • FUSE_SOLID_MAX_LINES の範囲内で責務に基づいて分割する
    • コンポーネントの合成パターン
    • Next.js のページとサーバーアクションの例

  2. references/open-closed.md - 変更ではなく合成によって拡張する

    • プラグインアーキテクチャのパターン
    • 複数の実装に対応するプロバイダーパターン
    • アダプターパターンとストラテジーパターン
    • 既存のコードを変更せずに機能を追加する

  3. references/liskov-substitution.md - 契約の遵守と動作上のサブタイピング

    • サブタイプは基底型と置き換え可能でなければなりません
    • 例外と戻り値の型に関する契約
    • LSP への準拠をテストする

  4. references/interface-segregation.md - 1 つの肥大化したインターフェースより、焦点を絞った複数のインターフェースを優先する

    • 役割ベースのインターフェース
    • 肥大化した契約を避ける
    • クライアント固有のインターフェース

  5. references/dependency-inversion.md - 実装ではなく抽象に依存する

    • コンストラクターインジェクションのパターン
    • 作成のためのファクトリーパターン
    • IoC コンテナー
    • テストで簡単にモックできる

概要とクイックリファレンスについては、references/solid-principles.md を参照してください。

コードテンプレート

references/templates/ にすぐにコピーして使えるコードがあります。

テンプレート用途
server-component.mdデータ取得を行うサーバーコンポーネント
client-component.mdフックを使用するクライアントコンポーネント
service.md依存性注入を使用するサービス
hook.md状態を扱う React フック
interface.mdTypeScript インターフェース
store.md永続化機能を備えた Zustand ストア
action.mdバリデーションを行うサーバーアクション
api-route.mdAPI ルートハンドラー
validator.mdZod バリデーションスキーマ
factory.mdファクトリーパターン
adapter.mdアダプターパターン
error.mdカスタムエラークラス
test.mdテストテンプレート
middleware.md認証ミドルウェア
prisma.mdPrisma シングルトン
i18n.md機能別／グローバル翻訳
query.mdデータベースクエリ（Prisma 7）

応答ガイドライン

  1. まず調査する - 必須：コードを書く前に必ず Context7 と Exa を検索する
  2. 完全なコードを提示する - 断片ではなく、動作する例を示す
  3. 判断の理由を説明する - 他の選択肢よりこのパターンを選ぶ理由を説明する
  4. テストを含める - 常にテストケースを提案する
  5. エラーに対処する - 決して無視せず、エラーバウンダリーを使用する
  6. すべてに型を付ける - 完全な TypeScript を使用し、any は使わない
  7. コードをドキュメント化する - 複雑な関数には JSDoc を記述する

禁止事項

  • ❌ 事前にドキュメントを調査せずにコーディングする（必ず調査する）
  • ❌ 現行年度のドキュメントを確認せずに古い API を使用する
  • ❌ FUSE_SOLID_MAX_LINES を超えるソースファイル
  • ❌ コンポーネントファイル内にインターフェースを記述する
  • ❌ app/ ページにビジネスロジックを記述する
  • ❌ コンポーネント内でデータベースを直接呼び出す
  • ❌ コアを除き、モジュール間でインポートする
  • ❌ デフォルトで 'use client' を使用する
  • ❌ データ取得に useEffect を使用する
  • ❌ エクスポートに JSDoc がない
  • ❌ any 型
  • ❌ バレルエクスポート
  • ❌ 事前に Grep で検索せず、既存のユーティリティ／ヘルパーを重複して作成する
  • ❌ ロジックのブロックをコピーして貼り付け、共通関数として切り出さない

コメント

Markdown 対応