building-react-web-application

React ウェブアプリケーション

セットアップ

項目	種別	必須	対象	完了条件	方法
Node.js 22.12+	ユーザー	必須	すべて	node --version で 22.12 以降が表示される	https://nodejs.org
常設ルール	自動	必須	新しいアプリのスキャフォールド作成	ルートの AGENTS.md に次の行がある	ルートの AGENTS.md（存在しない場合は作成）と、AGENTS.md をインポートせずに存在するルートの CLAUDE.md に - `<target_path>` follows building-react-web-application; load it before changing code there. を追加します。この行があるファイルはスキップします

ワークフロー

1. セットアップ — リクエストが対象とする セットアップ の各行を順番に確認します。「完了条件」を満たしていればスキップします。user の場合は、必須なら「方法」を表示して停止し、任意ならそれなしで続行します。ask の場合は、リクエストから回答できる項目を埋め、残りを1つのメッセージでまとめて質問し、それぞれの回答を記録します。auto と static の場合は実行します。
2. コントラクト — web-app-contract.md を読みます。
3. レシピ — レシピ の行に照らし合わせ、Read 列に記載されたすべてのドキュメントを開きます。

• 複数の行にまたがるリクエスト（フォームを含む新しいルートなど）は、それぞれの行に該当します。

レシピ

意図	例文	参照先
セットアップ	"Set up building-react-web-application", "Is building-react-web-application ready?"	セットアップ — 各行についてワークフローのステップ 1 を実行し、その後、各行の状態を報告します
スキャフォールディング	"Create a Vite + React app in apps/web", "Scaffold here", "Add linting and env handling to the app"	scaffolding-application.md, managing-package-installs.md, managing-environment.md, managing-linting.md
構成	"Where does this module belong?", "Two features need this hook", "Move this component to the right layer"	managing-project-structure.md, managing-linting.md
ページ／機能	"Add a settings page", "New orders feature", "Add a sidebar", "Add a /settings route"	managing-project-structure.md, creating-page.md
UI プリミティブ	"Add a Dialog to src/ui", "Build the select from the spec"	managing-project-structure.md, creating-ui-component.md, managing-styling.md
データ	"Fetch orders from the API", "Add a mutation for checkout", "Format the order date"	managing-data.md, managing-environment.md
非同期 UI の状態	"Show the orders list with loading and error states", "Load more orders on scroll"	creating-async-component.md, managing-data.md
エラー／フィードバック	"Show a toast when saving fails", "Report crashes", "Add a 404 page"	managing-errors.md, managing-data.md
フォーム／マルチステップ	"Add a profile form", "Make checkout a three-step form"	creating-form.md, managing-data.md
スタイリング／テーマ	"Apply the design tokens", "Change the brand colors", "Add dark mode", "Use Inter as the body font"	managing-styling.md
認証	"Add the sign-in flow", "Attach the token to API calls", "Sign out on 401"	setting-up-authentication.md, managing-data.md
認証ガード	"Protect the dashboard", "Require profile setup after sign-in", "Add an invite link", "Restrict the team pages to members"	setting-up-auth-guard.md, setting-up-authentication.md, creating-page.md