mcpField
R
react-nextjs-development

react-nextjs-development

github.com/sickn33開発48.7k2.0k 回インストール今日更新
リポジトリ

react-nextjs-development について

react-nextjs-development は、React と Next.js 14+ アプリケーションの開発を支援するワークフロースキルです。プロジェクト設定からコンポーネント設計、データ処理、テスト、デプロイまで扱い、バージョンごとの仕様とセキュリティ境界に配慮します。

主な機能

  1. 01React と Next.js のプロジェクト設定
  2. 02コンポーネントと状態の設計
  3. 03Tailwind CSS によるスタイリング
  4. 04データ取得とルーティングのパターン
  5. 05フォーム、バリデーション、テスト
  6. 06ビルドとデプロイのワークフロー

活用シーン

  1. 01React または Next.js アプリの開始
  2. 02Server Components とルートの設計
  3. 03実行時検証を備えたフォームの構築
  4. 04テストとビルド・デプロイの準備

インストール

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

$npx skills add https://github.com/sickn33/agentic-awesome-skills --skill react-nextjs-development

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

詳細

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 アプリケーションを構築する

バージョンを選択する前に、既存のパッケージ／ロックファイルと、インストール済みフレームワークのドキュメントを確認してください。Next.js のキャッシュ、ルートパラメーター、サーバー／クライアント API はリリースによって異なります。Server Components と UI のルートガードは、すべてのサーバーアクション／ルート／データアクセスにおける認可の代わりにはなりません。シークレットはサーバー側のみで扱い、実行時の入力を検証し、デプロイ／公開は別途認可が必要な環境操作として扱ってください。参照されているスキルは任意で利用できるコンポーネントであり、スキャフォールディング、すべてのライブラリの追加、自動デプロイを指示するものではありません。

ワークフローのフェーズ

フェーズ 1：プロジェクトのセットアップ
呼び出すスキル
  • app-builder - アプリケーションのスキャフォールディング
  • senior-fullstack - フルスタックのガイダンス
  • nextjs-app-router-patterns - Next.js 14 以降のパターン
  • typescript-pro - TypeScript のセットアップ
作業
  1. プロジェクトの種類を選択します（React SPA、Next.js アプリ）
  2. サポートされているフレームワーク／ビルドツール（Next.js や Vite など）を選択します。新規プロジェクトでは非推奨の 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、INP）を満たしている
  • アクセシビリティを確認している（WCAG 2.1）
  • レスポンシブデザインを検証している

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

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

制限事項

  • 上記の説明にある範囲とタスクが明確に一致する場合にのみ、このスキルを使用してください。
  • 出力を、環境固有の検証、テスト、または専門家によるレビューの代替として扱わないでください。
  • 必要な入力、権限、安全上の境界、または成功基準が不足している場合は、作業を中断して確認を求めてください。

コメント

Markdown 対応