mcpField
N
nextjs-stack

nextjs-stack

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

nextjs-stack について

Next.js 16 アプリを構築するチーム向けに、データ、認証、UI、フォーム、状態管理、スタイル、国際化を含む技術スタックを整理したスキルです。各技術の専用スキルへ案内し、選定理由や連携、構成、初期設定の資料を提供します。

主な機能

  1. 018 層にわたる推奨スタック
  2. 02技術別スキルへのリンク
  3. 03避けるべき実装パターン
  4. 04技術選定と連携の資料
  5. 05構成とプロジェクト開始の手引き

活用シーン

  1. 01Next.js 16 プロジェクトの開始
  2. 02アプリの技術スタック選定
  3. 03構成と技術連携のレビュー

インストール

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

$npx skills add https://github.com/fusengine/agents --skill nextjs-stack

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

同梱ファイル

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

references/
best-practices.md
getting-started.md
integration-points.md
quick-reference.md
solid-architecture.md
stack-decisions.md

詳細

Next.js 16+ の推奨テクノロジースタック全体を結び付けるマスターリファレンスとして機能します。App Router（nextjs-16）、Prisma 7（prisma-7）、Better Auth 1.7（better-auth）、shadcn/ui CLI 4.21（nextjs-shadcn）、TanStack Form（nextjs-tanstack-form）、Zustand（nextjs-zustand）、Tailwind CSS 4、next-intl 4.14（nextjs-i18n）を対象とし、各レイヤーの内容を重複して記載するのではなく、適切なサブスキルを参照します。

禁止されている代替手段（Better Auth の代わりに NextAuth.js、App Router の代わりに Pages Router、TanStack Form の代わりに React Hook Form、Server-first の代わりに Client Components by default）を明記し、スタック選定の根拠、SOLID に基づくモジュール構成、各パートの統合ポイント、プロジェクトのブートストラップに関する参考資料を提供します。ルーティングの内部動作、キャッシュ、proxy.ts など、フレームワークのコア API の詳細は扱いません。これらについては nextjs-16 を参照してください。

Next.js 完全スタック

モダンな Next.js 開発に関するすべてのフレームワークドキュメントをまとめたマスタースキルです。

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

実装の前に、必ず 3 つのエージェントを並行して起動してください。それぞれ個別の Agent 呼び出しを行い、name を指定します。

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

実装後、検証のために fuse-ai-pilot:sniper を実行してください。

概要

使用するタイミング
  • 新しい Next.js 16 プロジェクトをゼロから始めるとき
  • 推奨テクノロジースタック全体が必要なとき
  • 認証機能を備えた本番アプリケーションを構築するとき
  • フォーム、状態管理、UI コンポーネントを実装するとき
  • すべての要素がどのように連携するかを理解するとき
テクノロジースタック
レイヤーテクノロジースキルの参照先
フレームワークNext.js 16（App Router、安定版 16.3）nextjs-16
データベース ORMPrisma 7（安定版 7.10、8.0 は RC のみ）prisma-7
認証Better Auth 1.7better-auth
UI コンポーネントshadcn/ui CLI 4.21.0nextjs-shadcn
フォームTanStack Formnextjs-tanstack-form
状態管理Zustandnextjs-zustand
スタイリングTailwind CSS 4tailwindcss
i18nnext-intl 4.14nextjs-i18n

禁止されているパターン

  • NextAuth.js - 代わりに Better Auth を使用してください
  • Pages Router - 新しいプロジェクトでは App Router を使用してください
  • React Hook Form - TanStack Form を使用してください
  • デフォルトで Client Components を使うこと - まず Server Components を使用してください

参照資料

このファイルを見やすく保つため、詳細なガイダンスは references/ にあります。タスクに必要なものだけを読み込んでください。

ファイル読み込むタイミング
references/stack-decisions.mdテクノロジーの選定（Better Auth と NextAuth、Prisma と Drizzle、TanStack Form と RHF、Zustand と Redux、shadcn/ui と MUI）を説明するとき
references/solid-architecture.mdプロジェクトのモジュール構成やフォルダー構成を設定またはレビューするとき
references/integration-points.mdスタックの要素同士（認証＋DB、フォーム＋UI、状態＋RSC、i18n＋ルーティング）を連携させるとき
references/quick-reference.md特定の機能（App Router、Prisma スキーマ、Better Auth OAuth など）を扱うサブスキルのファイルを確認するとき
references/best-practices.mdリリース前に最終レビューを行うとき
references/getting-started.md新しいプロジェクトを手順に沿ってブートストラップするとき

フレームワーク固有の詳細については、該当するサブスキルを直接参照してください。nextjs-16、prisma-7、better-auth、nextjs-shadcn、nextjs-tanstack-form、nextjs-zustand、nextjs-i18n、solid-nextjs。

コメント

Markdown 対応