React/Next.js 開発ワークフロー

概要

App Router、Server Components、TypeScript、Tailwind CSS を含む最新のパターンを使用した React および Next.js 14+ アプリケーション構築のための専門的なワークフロー。

このワークフローを使用する場合

以下の場合にこのワークフローを使用します:

• 新しい React アプリケーションを構築する場合
• App Router を使用した Next.js 14+ プロジェクトを作成する場合
• Server Components を実装する場合
• React で TypeScript をセットアップする場合
• Tailwind CSS でスタイリングする場合
• フルスタック Next.js アプリケーションを構築する場合

ワークフローフェーズ

フェーズ 1: プロジェクトセットアップ

実行するスキル

• app-builder - アプリケーションスカフォルディング
• senior-fullstack - フルスタックガイダンス
• nextjs-app-router-patterns - Next.js 14+ パターン
• typescript-pro - TypeScript セットアップ

実行内容

1. プロジェクトタイプを選択 (React SPA、Next.js アプリ)
2. ビルドツールを選択 (Vite、Next.js、Create React App)
3. プロジェクト構造をスカフォルド
4. TypeScript を設定
5. ESLint と Prettier をセットアップ

コピペ用プロンプト

Use @app-builder to scaffold a new Next.js 14 project with App Router

Use @nextjs-app-router-patterns to set up Server Components

フェーズ 2: コンポーネントアーキテクチャ

実行するスキル

• frontend-developer - コンポーネント開発
• react-patterns - React パターン
• react-state-management - 状態管理
• react-ui-patterns - UI パターン

実行内容

1. コンポーネント階層を設計
2. 基本コンポーネントを作成
3. レイアウトコンポーネントを実装
4. 状態管理をセットアップ
5. カスタムフックを作成

コピペ用プロンプト

Use @frontend-developer to create reusable React components

Use @react-patterns to implement proper component composition

Use @react-state-management to set up Zustand store

フェーズ 3: スタイリングとデザイン

実行するスキル

• frontend-design - UI デザイン
• tailwind-patterns - Tailwind CSS
• tailwind-design-system - デザインシステム
• core-components - コンポーネントライブラリ

実行内容

1. Tailwind CSS をセットアップ
2. デザイントークンを設定
3. ユーティリティクラスを作成
4. コンポーネントスタイルを構築
5. レスポンシブデザインを実装

コピペ用プロンプト

Use @tailwind-patterns to style components with Tailwind CSS v4

Use @frontend-design to create a modern dashboard UI

フェーズ 4: データ取得

実行するスキル

• nextjs-app-router-patterns - Server Components
• react-state-management - React Query
• api-patterns - API 統合

実行内容

1. Server Components を実装
2. React Query/SWR をセットアップ
3. API クライアントを作成
4. ローディング状態を処理
5. エラーバウンダリを実装

コピペ用プロンプト

Use @nextjs-app-router-patterns to implement Server Components data fetching

フェーズ 5: ルーティングとナビゲーション

実行するスキル

• nextjs-app-router-patterns - App Router
• nextjs-best-practices - Next.js パターン

実行内容

1. ファイルベースのルーティングをセットアップ
2. 動的ルートを作成
3. ネストされたルートを実装
4. ルートガードを追加
5. リダイレクトを設定

コピペ用プロンプト

Use @nextjs-app-router-patterns to set up parallel routes and intercepting routes

フェーズ 6: フォームと検証

実行するスキル

• frontend-developer - フォーム開発
• typescript-advanced-types - 型検証
• react-ui-patterns - フォームパターン

実行内容

1. フォームライブラリを選択 (React Hook Form、Formik)
2. 検証をセットアップ (Zod、Yup)
3. フォームコンポーネントを作成
4. サブミッション処理をハンドル
5. エラー処理を実装

コピペ用プロンプト

Use @frontend-developer to create forms with React Hook Form and Zod

フェーズ 7: テスト

実行するスキル

• javascript-testing-patterns - Jest/Vitest
• playwright-skill - E2E テスト
• e2e-testing-patterns - E2E パターン

実行内容

1. テストフレームワークをセットアップ
2. ユニットテストを記述
3. コンポーネントテストを作成
4. E2E テストを実装
5. CI 統合を設定

コピペ用プロンプト

Use @javascript-testing-patterns to write Vitest tests

Use @playwright-skill to create E2E tests for critical flows

フェーズ 8: ビルドとデプロイ

実行するスキル

• vercel-deployment - Vercel デプロイ
• vercel-deploy-claimable - Vercel デプロイ
• web-performance-optimization - パフォーマンス

実行内容

1. ビルド設定を構成
2. バンドルサイズを最適化
3. 環境変数をセットアップ
4. Vercel にデプロイ
5. プレビューデプロイメントを設定

コピペ用プロンプト

Use @vercel-deployment to deploy Next.js app to production

テクノロジースタック

カテゴリ	テクノロジー
フレームワーク	Next.js 14+、React 18+
言語	TypeScript 5+
スタイリング	Tailwind CSS v4
状態管理	Zustand、React Query
フォーム	React Hook Form、Zod
テスト	Vitest、Playwright
デプロイ	Vercel

クオリティゲート

• TypeScript がエラーなくコンパイルされる
• すべてのテストが成功している
• リント検査が完全に通過している
• パフォーマンスメトリクス (LCP、CLS、FID) を達成している
• アクセシビリティ確認済み (WCAG 2.1)
• レスポンシブデザインが検証済み

関連ワークフローバンドル

• development - 一般的な開発
• testing-qa - テストワークフロー
• documentation - ドキュメンテーション
• typescript-development - TypeScript パターン

制限事項

• このスキルは、タスクが上記で説明されている範囲と明確に一致する場合にのみ使用してください。
• 出力を環境固有の検証、テスト、または専門家による見直しの代替と見なさないでください。
• 必要な入力、権限、安全性の境界、または成功基準が不足している場合は、停止して明確化を求めてください。