Next.js プロジェクト計画スキル（nextjs-plan）
Next.js App Router アプリケーションの計画を立案するための構造化されたオーケストレーションスキルです。呼び出されると、既存のワークスペースファイルから技術仕様を抽出し、ユーザー要件に関する詳細なインタビュー（グリリングインタビュー）を実施し、正規のプロジェクト仕様（docs/project.json）、lib/ 配下の型安全なコードレジストリ、docs/design/ のデザインブリーフ、および docs/plan/ の 7 フェーズからなるモジュール型実装ロードマップを出力します。
ワークフロー概要
flowchart TD
Invoke["起動 /nextjs-plan"] --> Step1["1. 自動ワークスペース検査<br/>（依存関係、ディレクトリ構成、スタイル、設定、ルートの抽出）"]
Step1 --> Step2["2. ページとニーズに関するグリリングインタビュー<br/>（ページ ➔ セクション ➔ コンポーネント）"]
Step2 --> Step3["3. 正規仕様の生成<br/>（docs/project.json & lib/ レジストリ）"]
Step3 --> Step4["4. 戦略とデザインシステムの文書化<br/>（docs/design/ 01-strategy, 02-sitemap, 03-tokens）"]
Step4 --> Step5["5. 7フェーズモジュール型実装計画の生成<br/>（docs/plan/ README.md & 01-07 フェーズファイル）"]
Step5 --> Step6["6. 完了とまとめ<br/>（サマリーダッシュボードを表示；下流スキルは呼び出さない）"]
標準プロジェクトディレクトリ構成
├── lib/ # 型安全なNext.jsコードの信頼できる情報源
│ ├── routes.ts # 集中管理されたルートレジストリとパスビルダー
│ ├── site-config.ts # 集中管理されたサイトメタデータ、著者プロフィール、ソーシャルリンク
│ └── utils.ts # Tailwind cn ヘルパー
├── docs/ # アーキテクチャ、計画、デザインの根拠
│ ├── project.json # 機械可読な正規仕様（Canonical machine-readable specifications）
│ ├── plan/ # 7フェーズモジュール型実装ロードマップ
│ │ ├── README.md # マスターダッシュボード：進捗追跡とフェーズ一覧
│ │ ├── 01-discovery-and-architecture.md
│ │ ├── 02-environment-and-cicd.md
│ │ ├── 03-system-health-probe.md
│ │ ├── 04-core-foundations.md
│ │ ├── 05-pages-and-components.md
│ │ ├── 06-server-functions-and-metadata.md
│ │ └── 07-integrations-and-release.md
│ ├── design/ # UX、UI、画面仕様
│ │ ├── 01-strategy-brief.md # 目的、ペルソナ、目標、KPI、ベンチマーク
│ │ ├── 02-sitemap-and-routes.md # ページ一覧、セクション階層、レンダリングマトリックス
│ │ ├── 03-ui-design-tokens.md # セマンティックCSSトークン、タイポグラフィ、コンポーネントプリミティブ
│ │ └── components/ # コンポーネントデザイン仕様と Stitch スクリーンショット
│ └── adr/ # アーキテクチャ決定記録
ステップバイステップ実行手順書
1. 自動ワークスペース検査（中断なし）
[!IMPORTANT] 先に検査し、後から質問する。 ワークスペースファイルから直接推測できる事実についてユーザーにプロンプトを送ってはなりません。
- ワークスペースコンテキストのスキャン:
package.json、ロックファイル（pnpm-lock.yaml、bun.lockb）、ルーティング構造（app/vssrc/app/）、コンポーネントディレクトリ、app/globals.css、UIライブラリ（shadcn/ui、lucide-react、アニメーション）、next-intlの設定（ルートのmessages/フォルダ）、既存のルート（page.tsx、route.ts）、テストとDockerの設定を検査します。 - 完全な検査チェックリストについては、workspace-inspection.md を参照してください。
2. ユーザーグリリングインタビュー（ページ ➔ セクション ➔ コンポーネント）
- 適応型グリリングインタビューの実施: グリリングフロンティア手法を用いて、構造化されたラウンドでユーザーと対話します。各質問に番号を付け、推奨回答を提供します。
- 必須グリリングシーケンス:
- ページグリリング: 必要なすべてのWebページとターゲットURLルートを列挙します。
- セクショングリリング: 各ページについて、すべてのコンテンツセクションを上から下まで特定します。
- コンポーネントグリリング: 各セクションについて、必要なすべてのUIコンポーネントを定義します。
- コアとなる質問事項: 問題提起、ターゲットペルソナ、認証、データレイヤー/ORM、i18nロケールとRTL、ビジュアルの美的トーン、デプロイ先。
- インタビューテンプレートと決定木ルールについては、grilling-interview.md を参照してください。
3. 正規仕様と型安全なコードの生成
-
docs/project.jsonの作成: 技術メタデータ（パッケージマネージャー、コンポーネントディレクトリ、スタイル、UI/アニメーション/テストライブラリ、対応言語、辞書パス）を入力します。project-schema.md を参照し、project.json.template を展開します。 -
lib/routes.tsの作成: routes.ts.template から型安全なルートレジストリを生成します。 -
lib/site-config.tsの作成: site-config.ts.template から集中管理されたサイトプロファイルとメタデータを生成します。
4. docs/design/ にデザイン戦略を文書化
-
docs/design/01-strategy-brief.mdの作成: 01-strategy-brief.md.template を展開します。 -
docs/design/02-sitemap-and-routes.mdの作成: 02-sitemap-and-routes.md.template を展開します。 -
docs/design/03-ui-design-tokens.mdの作成: 03-ui-design-tokens.md.template を展開します。
5. 7フェーズモジュール型実装ロードマップの生成（docs/plan/）
-
docs/plan/ディレクトリのスキャフォールド: resources/templates/plan/ のテンプレートを使用してモジュラー計画ファイルを展開します。docs/plan/README.md（マスター進捗ダッシュボード）docs/plan/01-discovery-and-architecture.md（フェーズ1）docs/plan/02-environment-and-cicd.md（フェーズ2）docs/plan/03-system-health-probe.md（フェーズ3:/api/health生存確認プローブ）docs/plan/04-core-foundations.md（フェーズ4: 環境変数、i18n、テーマトークン、レイアウト、OTel）docs/plan/05-pages-and-components.md（フェーズ5: SEOとサポートファイルを含む正規のページ＆コンポーネントチェックリスト）docs/plan/06-server-functions-and-metadata.md（フェーズ6: サーバーアクション、APIルート、グローバルSEO）docs/plan/07-integrations-and-release.md（フェーズ7: 統合とプロダクションリリース）
- 必須のページレベルファイルを伴う単一の情報源: フェーズ5（
05-pages-and-components.md）は、ページとコンポーネントに関する唯一の正規のチェックリストです。すべてのページに対して、page.tsx、loading.tsx、error.tsx、generateMetadata、JSON-LD Schema、generateStaticParams()（動的ルートの場合）のサブチェックリストタスクを強制します。 - ページ完了ルール: フェーズ5では、そのコンポーネントのサブチェックリスト項目とページレベルのSEO/サポートタスクがすべて完了した場合にのみ、ページ項目を
- [x]としてマークします。 - フェーズの完全なガイドラインについては、plan-checklist-structure.md を参照してください。
6. まとめと完了ゲート
- ワークスペースの調査結果、
docs/project.jsonの仕様、docs/plan/README.mdのロードマップをユーザーに簡潔に報告します。 - 下流のNext.jsスキルを自動的に呼び出さないでください。 実行を終了し、ユーザーが計画を確認できるようにします。
エッジケースと既知のAIの落とし穴
[!WARNING]
- コマンドの連鎖: 複合コマンドを
&&、||、;を使用して一行で実行しないでください。ターミナルコマンドは常に個別に実行してください。- 検査前の質問:
package.jsonやディレクトリ一覧から直接読み取れる基本的な事実をユーザーに質問しないでください。- マイルストーンの順序の逆転: ヘルスプローブ（
/api/health）はフェーズ3に属し、その後にコアファウンデーション（i18n、テーマ、レイアウト、OTel）がフェーズ4で続きます。ページ/コンポーネントの実装はその後です。- ページレベルファイルの省略: フェーズ5のチェックリストを作成する際、どのページに対しても
loading.tsx、error.tsx、generateMetadata、JSON-LDスキーマのタスクを省略しないでください。- ページリストの重複: すべてのページとコンポーネントの追跡は、厳密に
docs/plan/05-pages-and-components.mdに保持してください。- ページの早期チェックオフ: フェーズ5のページは、すべての子コンポーネントとページレベルのサポートファイルが完了するまで
- [ ]のままにしておく必要があります。- 誤った辞書の場所: Next.jsのi18n設定では、辞書はルートの
messages/（例：messages/en.json）に配置され、app/dictionariesには決して配置されません。- 下流スキルの起動: 計画の完了時に実装やスタイリングのスキルを自動的にトリガーしないでください。停止してユーザーの指示を待ってください。
出力サマリースキーマ
計画フェーズの終了時に、以下の形式でサマリーを提示します。
### Next.js プロジェクト計画が完了しました
- **正規仕様**: `[docs/project.json](file:///...)`
- **型安全レジストリ**: `[lib/routes.ts](file:///...)` | `[lib/site-config.ts](file:///...)`
- **デザイン＆戦略仕様**: `[docs/design/01-strategy-brief.md](file:///...)`、`[docs/design/02-sitemap-and-routes.md](file:///...)`、`[docs/design/03-ui-design-tokens.md](file:///...)`
- **モジュラー型ロードマップダッシュボード**: `[docs/plan/README.md](file:///...)`
- **識別されたページ**: 合計 X ルートがマッピングされました
- **識別されたコンポーネント**: Z セクションにわたって合計 Y コンポーネントがカタログ化されました
- **完了したフェーズ**: N / 7 フェーズ確認済み
_計画完了。コンポーネントの設計または実装を進めるには、`docs/plan/README.md` を確認してください。_
リファレンスガイドとテンプレート
- ワークスペース検査ガイド — インタビュー前のコードベース発見チェックリスト。
- グリリングインタビューガイド — 多ラウンドの質問プロトコルと調査領域。
- プロジェクトスキーマリファレンス —
docs/project.jsonの仕様フィールドと検証基準。 - 計画アーキテクチャリファレンス — 7フェーズモジュール型ロードマップの構造とページコンポーネントルール。
- プロジェクトJSONテンプレート —
docs/project.jsonのスタータースキーマ。 - モジュラー計画テンプレート —
docs/plan/のスターターテンプレート。 - ルートTypeScriptテンプレート —
lib/routes.tsの型安全なルート定義。 - サイト設定テンプレート —
lib/site-config.tsの集中管理サイトプロファイル。 - 戦略ブリーフテンプレート —
docs/design/01-strategy-brief.mdのテンプレート。 - サイトマップ＆ルートテンプレート —
docs/design/02-sitemap-and-routes.mdのテンプレート。 - UIデザイントークンテンプレート —
docs/design/03-ui-design-tokens.mdのテンプレート。 - 環境変数例テンプレート —
.env.exampleのための単一の情報源テンプレート（プロダクションデプロイ用に.envにリネーム）。 - 開発環境テンプレート —
.env.developmentのデフォルト開発変数テンプレート（ローカル開発用、gitignore対象）。