setup

このプロジェクトの設計に関するコンテキストを収集し、今後のすべてのセッションで使えるように保存します。

setup は、正規の保存先である .better-react-web-ui.md に書き込みます。.better-web-ui.md、.better-ui.md、.impeccable.md などの旧ファイルは、以前の情報を移行するための入力としてのみ使い、新しい作業の保存先として使い続けないでください。

書き込みを始める前に、プロジェクトのコンテキストに従って、対象アプリケーションと継承される既定値を特定してください。既存の DESIGN.md ファイルは、引き続きデザインシステムの入力として扱います。競合する一覧にトークンをコピーするのではなく、既存のトークンを参照してください。

製品の価値観、トーン、繰り返し発生するトレードオフを、後から同じ議論をやり直さずに活用できる持続的な設計原則に落とし込む際は、設計原則を参照してください。 プロジェクトに、目標とする成果、ユーザーへの注力、優先事項、実現可能性、主要なリスクを明確にする戦略的な枠組みが必要な場合は、UX 戦略を参照してください。

ステップ 1：コードベースを調査する

コンテキスト収集プロトコルに従ってください。明示された指示、文書化された対象ユーザーやブランドのコンテキスト、以前の回答を活用してください。不明点について質問する前に、関連するプロジェクトファイルを確認してください。

• README とドキュメント：プロジェクトの目的、対象ユーザー、明示されている目標
• Package.json／設定ファイル：React フレームワーク、依存関係、既存のデザインライブラリ
• shadcn プロジェクト設定：components.json、shadcn スキーマの使用状況、CLI が生成した設定、プリセットの手がかり、Radix と Base UI の選択
• スタイルシステム：Tailwind のバージョン、Tailwind の設定、テーマ変数、ユーティリティの規約、トークン
• コンポーネントライブラリ：shadcn/ui、ReUI、shadcncraft、Kibo UI、Basecn、Tailark、shadcnblocks、React Bits、Animate UI、Animata、Magic UI、Motion Primitives、Efferd、Billing SDK、blocks.so、coss/ui、Better Auth UI、Smooth UI、TripleD UI、shadcn-map、mapcn、c15t、PatternCraft、カスタム React UI パッケージ、社内システム
• フォームのアーキテクチャ：TanStack Form、React Hook Form、Formik、カスタムの React バリデーション／状態管理の連携
• テーブル／データグリッドのアーキテクチャ：TanStack Table、AG Grid、フレームワーク標準のテーブル、カスタムのテーブル状態管理の連携
• 長いリスト／仮想化のアーキテクチャ：TanStack Virtual、react-window、react-virtualized、フレームワーク標準の仮想化、カスタムのウィンドウ処理ロジック
• 既存のコンポーネント：現在使われているデザインパターン、余白、タイポグラフィ
• ブランドアセット：ロゴ、ファビコン、すでに定義されている色の値
• Tailwind のテーマトークン／変数：既存のカラーパレット、フォントスタック、余白スケール
• スタイルガイドやブランドドキュメント

分かったことと、まだ不明なことを記録してください。

ステップ 2：UX に焦点を当てた質問をする

影響の大きい不明点についてのみ質問してください。以下の質問は選択の参考であり、必須の質問票ではありません。ユーザーが創造的な判断を委ねる場合は、仮定を記録して作業を進めてください。ユーザーの発言を捏造しないでください。

ユーザーと目的

• 誰がこれを使いますか？使用時はどのような状況ですか？
• UX に影響する習慣やニーズを考慮すべき、特定の年齢層、ライフステージ、対象ユーザー層を想定していますか？
• 保護者、教師、管理者、介護者など、満たす必要のある副次的な対象ユーザーや関係者はいますか？
• ユーザーは何を達成しようとしていますか？
• インターフェースはどのような感情を呼び起こすべきですか？（自信、楽しさ、落ち着き、緊迫感など）

ブランドと個性

• ブランドの個性を 3 つの言葉で表すと、どのようになりますか？
• 目指す雰囲気に合う参考サイトやアプリはありますか？特にどの点が参考になりますか？
• 明確に避けたい見た目はありますか？反面教師となる例はありますか？
• インターフェースは、より堅実、遊び心のある、洗練された、実用的、エディトリアルな印象など、どのようなものにしますか？
• 言葉遣いは、フォーマル、中立、会話調のどれがよいですか？

デザインの好み

• ビジュアルの方向性に強い好みはありますか？（ミニマル、大胆、エレガント、遊び心のある、テクニカル、オーガニックなど）
• ライトモード、ダークモード、または両方のどれがよいですか？
• 使用必須、または避けるべき色はありますか？
• 角は主に直角、ほどよく丸みを帯びた形、柔らかく遊び心のある形のどれがよいですか？
• 配色は暖色系、寒色系、中間色のどれを基調にしますか？

アクセシビリティとインクルージョン

• アクセシビリティに関する具体的な要件はありますか？（WCAG のレベル、把握しているユーザーのニーズなど）
• モーション低減、色覚特性、その他の配慮事項はありますか？

コードベースの調査から答えが明らかな質問はスキップしてください。

実装のデフォルト

• 今後の UI 作業では、デフォルトでどの React フレームワーク／ランタイムを使用しますか？
• 新規プロジェクトの場合、ユーザーは特定の Tailwind セットアップを希望しますか？
• 新規プロジェクトの場合、ユーザーは shadcn/ui、ReUI、shadcncraft、Kibo UI、Basecn、Tailark、shadcnblocks、React Bits、Animate UI、Animata、Magic UI、Motion Primitives、Efferd、Billing SDK、blocks.so、coss/ui、Better Auth UI、Smooth UI、TripleD UI、shadcn-map、mapcn、c15t、PatternCraft、またはその他の React コンポーネントライブラリを希望しますか？
• プロジェクトですでにフォームライブラリやバリデーションスタックを使用している場合、今後の UI 作業でもそれを維持しますか？
• プロジェクトですでにテーブルまたはデータグリッドライブラリを使用している場合、今後の UI 作業でもそれを維持しますか？
• プロジェクトですでに長いリスト向けの仮想化またはウィンドウイングライブラリを使用している場合、今後の UI 作業でもそれを維持しますか？
• プロジェクトがすでに shadcn/ui を使用している場合、主に上流のプリミティブをそのまま使用していますか。それともローカルのラッパー／コンポジションを使用していますか？
• 該当する場合、プロジェクトですでに shadcn/ui Blocks、ReUI、shadcncraft、Kibo UI、Basecn、Tailark、shadcnblocks、React Bits、Animate UI、Animata、Magic UI、Motion Primitives、Efferd、Billing SDK、blocks.so、coss/ui、Better Auth UI、Smooth UI、TripleD UI、shadcn-map、mapcn、c15t、PatternCraft を、一般的なセクションやフローの構築を加速するために使用していますか？
• 該当する場合、プロジェクトではヘッドレスプリミティブや組み合わせたコンポーネントに、主に Radix 系または Base UI 系のエコシステムを採用していますか？
• プロジェクトで shadcn を使用している場合、すでに components.json ファイルや、現在のベースラインとして扱うべき shadcn create／shadcn apply のカスタマイズの形跡がありますか？

プロジェクトですでに Tailwind セットアップ、サポート対象のコンポーネントライブラリ、フォームスタック、またはテーブル／グリッドスタックがある場合、ユーザーが明示的に変更を希望しない限り、それをデフォルトとして扱ってください。

プロジェクトが新規で、ユーザーが実装の好みを指定していない場合は、framework defaults のフレームワーク別デフォルト一覧を使用し、その結果を記録してください。サポート対象の React プロジェクトでフォームのアーキテクチャが未決定の場合は、デフォルトで TanStack Form を使用し、そのことも記録してください。テーブルまたはデータグリッドのアーキテクチャが未決定の場合は、デフォルトで TanStack Table を使用し、そのことも記録してください。長いリストまたは仮想化のアーキテクチャが未決定の場合は、デフォルトで TanStack Virtual を使用し、そのことも記録してください。

Step 3: デザインコンテキストを記述する

調査結果とユーザーの回答をまとめ、## Design Context セクションを作成します。

## Design Context

### Users
[Who they are, their context, the job to be done]

### Brand Personality
[Voice, tone, 3-word personality, emotional goals]

### Aesthetic Direction
[Visual tone, references, anti-references, theme]

### Implementation Defaults
[Detected or chosen React framework, Tailwind setup, component library defaults, form library / validation defaults, table/data-grid defaults, virtualization defaults, any block accelerators in use, any relevant Radix-vs-Base-UI ecosystem preference, any important `components.json` / `shadcn create` / `shadcn apply` customizations, and whether they came from the existing codebase, explicit user preference, or framework fallback defaults]

### Design Principles
[3-5 principles derived from the conversation that should guide all design decisions]

曖昧な願望ではなく、具体的な手段から原則を導き出してください。次のような内容を優先します。

• 「色を加える前に、余白とウェイトで階層を構成する」
• 「温かみのあるニュートラルカラーと、控えめなアクセントカラーを使う」
• 「エディトリアルなタイポグラフィと、ほぼ角丸のない形状を採用する」
• 「各画面で、主要なアクションをひとつだけ明確にする」

優れた原則は、何をすべきかだけでなく、何を避けるべきかも説明します。装飾的なスローガンではなく、状況に応じて判断するためのデフォルトの方針として扱ってください。

このセクションを、アプリケーションを所有するルートにある .better-react-web-ui.md に記述します。単一アプリのリポジトリでは、リポジトリのルートが該当します。既存の Design Context セクションがある場合は、その内容を更新し、無関係なセクションは保持します。同じアプリケーションのスコープにある関連レガシーコンテキストは、元の内容を削除せずに移行します。共有するデフォルト設定はリポジトリのルートに置き、アプリケーション固有の違いは子ファイルに記述します。

レガシーファイルは移行時の入力としてのみ使用します。新しい作業では、.better-react-web-ui.md を正式な保存先として使用してください。

保存するコンテキストには、次の優先順位を明確に記録してください。

1. 検出された既存プロジェクトのスタック
2. 新規プロジェクトに関する明示的なユーザーの希望
3. フレームワークに基づくフォールバックのデフォルト設定

React 向けのコンポーネントエコシステムで違いが重要になる場合は、プロジェクトが実質的に Radix 系、Base UI 系、または混在のどれに該当するかも記録し、後続のデザイン作業で推測が生じないようにします。

shadcn 固有のプロジェクト設定がある場合は、後続のセッションで一般的なフォールバックのデフォルト設定が想定されないよう、ベースラインの一部として記録します。

アプリケーションのコンテキストへの入口として .better-react-web-ui.md を使用します。既存の信頼できるデザインドキュメントへのリンクは保持します。永続的に残すページごとの決定事項をユーザーから求められた場合にのみ、任意のページ概要を追加します。AGENTS.md の更新は依頼された場合に限り、コンテキストを重複させず、参照先を記載してください。

完了を確認し、今後のすべての作業で適用するデザイン原則の要点をまとめてください。