---

description: Reactコンポーネント実装・運用指針を定義したもの。具体的にはShadcn/uiの基礎UIコンポーネント群やエコシステムを中心にコンポーネントを構築していくこと、Tailwindのデザインシステム運用指針、アクセシビリティのためのセマンティックHTMLやキーボード操作などに関する指針などを定義している。 globs: src/styles//*.css,components.json,src/routes//.tsx,src/components/**/.tsx alwaysApply: false

UI構築・運用戦略

Shadcn/uiを基礎にしたUI構築

• Shadcn/uiを中心にUIを構築していく: ~/components/ui内に配置されていくShadcn/uiの基礎UIコンポーネント群を組み合わせてアプリのUIを構築していく。

<!-- - **Shadcn/uiと互換を持つレジストリも活用する**: -->

• 基礎UIコンポーネントに対するスタイリング: アプリ内で常に統一的に適用されるべきデザインである場合のみ、 ~/components/ui内に配置された基礎UIコンポーネントのデフォルトTailwindユーティリティを直接編集する。それ以外の一時的なスタイル変更は基本的に className属性に対して cn()便利関数(~/lib/utils.ts)を使用して上書きする。
• アイコンライブラリ: プロジェクト内で使用するアイコンライブラリは基本的に lucide-reactを使用する。
• フォールバックUI: ペンディング状態中のコンポーネントのフォールバックUIの作成には、基本的にShadcn/uiのSkeletonコンポーネントを使用する（./tanstack-router.mdcで詳述）。

デザインシステム

デザイントークン

• Shadcn/uiのCSS変数定義を拡張する: Shadcn/ui初期化時にデフォルトで提供されるapp.cssのCSS変数をベースとして、デザイン要素を随時変更・拡張していく。

レスポンシブ対応

• モバイル、タブレット、PCの3つのレイアウトを作成する: それぞれのレイアウトのブレークポイントとなるメディアクエリvariantを以下のように定義する。ただし絶対的な基準ではないため、不自然にレイアウトが崩れる場合は最適なブレークポイントをその都度柔軟に選択する（https://tailwindcss.com/docs/responsive-design#overview）。
  • モバイル: variantなし（Tailwindのモバイルファースト仕様）
  • タブレット: md:（48rem, 768px）
  • PC: xl:（80rem, 1280px）
• 子コンポーネント内部ではコンテナクエリを使用する: ページの全体的なレイアウトはメディアクエリで行い、子コンポーネント内部ではコンテナクエリを使用してデザインの自己完結性を向上させる。

ダークモード

• 基本的にダークモードも実装する: ダークモード用のデザイントークンをapp.cssの .dark { }内にも同時に定義していく。具体的には、必ず :root { }内で定義している変数名と全く同じ変数名（例えば--background, --secondaryなど）で定義する。これによりライトモード/ダークモード共通のユーティリティクラス（bg-backgroundなど）を記述でき、className属性上で毎回dark:variantを使用してユーティリティクラスを書き分ける必要がなくなるため。

アクセシビリティ

セマンティックなHTML

• 常にセマンティックなHTML要素を記述する: 常に最適なHTML要素でマークアップすることで、少ないコストで最低限度のアクセシビリティを担保することができる。よってこれを第一原則として徹底する。

  • ランドマーク要素: そのコンポーネント自体の（あるいはその内部における）役割などに適したランドマーク要素を積極的に使用する。

• ARIA属性の使用は最低限に留める: 上記の通り、最適なHTML要素の使用によって最低限度のアクセシビリティを担保していく方針のため、ARIA属性の使用は補助的なものと捉えて多用しない。

キーボード操作対応

• 最低限のキーボード操作に対応する: Shadcn/ui等のUIライブラリ側がデフォルトでキーボード操作に対応していない場合のみ、最低限のキーボード操作を独自実装する。例えば、
  • Tabキーで入力要素を移動可能
  • Escキーでポップアップを閉じる
  • commandキー＋Kキーで検索Input要素にフォーカスを移動