building-ui-bundle-frontend

UI バンドル UI

タスクの特定

リクエストがどのカテゴリに該当するかを判断します。

カテゴリ	例	実装ガイド
ページ	新しいルート付きページ（連絡先、ダッシュボード、設定）	implementation/page.md
ヘッダー／フッター	サイト全体のナビゲーションバー、フッター、ブランディング	implementation/header-footer.md
コンポーネント	ウィジェット、カード、テーブル、フォーム、ダイアログ	implementation/component.md

---

レイアウトとナビゲーション

appLayout.tsx はナビゲーションとレイアウトの信頼できる唯一の情報源です。すべてのページでこのシェルを共有します。

ナビゲーション、ヘッダー、フッター、サイドバー、テーマ、レイアウトに影響する変更を行う場合は、次の手順に従います。

1. routes.tsx で使用されるレイアウト、src/appLayout.tsx を編集します
2. デフォルト／テンプレートのナビゲーション項目とラベルをすべて、アプリ固有のリンクと名前に置き換えます
3. ヘッダー、ナビゲーションのブランド表示、フッター、index.html の <title> など、プレースホルダーのアプリ名をすべて置き換えます

完了前に、appLayout.tsx を実際のナビゲーション項目とブランディングに更新したことを確認します。

対象	場所
レイアウト、ナビゲーション、ブランディング	src/appLayout.tsx
ドキュメントタイトル	index.html
ルートページのコンテンツ	routes.tsx のルートにあるコンポーネント

---

React と TypeScript の規約

ルーティング

ルーターパッケージは1つだけ使用します。createBrowserRouter ／ RouterProvider を使用する場合は、すべてのインポート元を react-router にします（react-router-dom ではありません）。

アプリがクライアントサイドルーター（React Router、Remix Router、Vue Router など）を使用している場合は、実行時にドキュメントの <base href> タグから常に basename ／ basepath ／ base を取得します。basename をハードコードしないでください。

const basename = document.querySelector('base')
  ? new URL(document.querySelector('base').href).pathname.replace(/\/$/, '')
  : '/';
const router = createBrowserRouter(routes, { basename });

コンポーネントライブラリとスタイル設定

• コンポーネントには shadcn/ui を使用します。例：import { Button } from '@/components/ui/button';
• Tailwind CSS のユーティリティクラス

URL とパスの処理

アプリは動的なベースパスの配下で実行されます。ルーターのナビゲーション（<Link to>、navigate()）では絶対パス（/x）を使用します。ルーター以外の属性（<img src>）ではドット相対パス（./x）を使用します。静的アセットには Vite の import を優先します。

TypeScript

• any は使用せず、適切な型、ジェネリクス、または型ガードを使用した unknown を使います
• イベントハンドラー：(event: React.FormEvent<HTMLFormElement>): void
• 状態：useState<User | null>(null) のように、常に型パラメーターを指定します
• 安全でないアサーション（obj as User）は使わず、代わりに型ガードを使用します

モジュールの制限

React UI バンドルでは、lightning/* や @wire などの Salesforce プラットフォームモジュール（LWC 専用）をインポートしてはいけません。データアクセスには using-ui-bundle-salesforce-data スキルを使用してください。

---

デザインの考え方

コーディングを始める前に、大胆な美的方向性を決めます。

• 目的： このインターフェースはどんな問題を解決しますか？誰が使いますか？
• トーン： 明確な方向性を選びます。極限までミニマル、マキシマリスト、レトロフューチャー、オーガニック、ラグジュアリー、遊び心のあるもの、エディトリアル、ブルータリスト、アールデコ、ソフト／パステル、インダストリアルなどをインスピレーションにしつつ、コンテキストに合った独自のデザインにします。
• 差別化： 忘れられないデザインにする要素は何ですか？見る人の記憶に残る、たった一つの要素は何ですか？

明確なコンセプトの方向性を選び、精密に形にします。大胆なマキシマリズムも洗練されたミニマリズムも有効です。重要なのは強度ではなく、意図を持ってデザインすることです。

---

フロントエンドの美的表現

• タイポグラフィ： 個性と特徴のあるフォントを選びます。ディスプレイフォントと洗練された本文用フォントを組み合わせます。Inter、Roboto、Arial、Space Grotesk、システムフォントを安易に使わないでください。

• カラー： CSS 変数を使い、統一感のあるカラーパレットを採用します。控えめで均等に配色されたパレットより、主役となる色に鮮やかなアクセントを加えるほうが効果的です。白地にありがちな紫のグラデーションは避けます。

• モーション： 印象に残る場面に重点を置きます。表示を段階的に切り替える（animation-delay）演出を使った、よく練られたページ読み込みは、あちこちに散りばめられた小さなインタラクションよりも楽しさを生み出します。スクロール時の演出や、意外性のあるホバー状態を活用します。CSS のみで実現する方法を優先し、利用可能な場合は React 用の Motion ライブラリを使います。

• 空間構成： 非対称、重なり、斜めの流れ、グリッドを崩す要素など、意外性のあるレイアウトを採用します。広々とした余白、または意図的に調整された高密度な構成を使います。

• 背景と奥行き： 単色を安易に使うのではなく、雰囲気を作り出します。グラデーションメッシュ、ノイズテクスチャ、幾何学模様、重ね合わせた透明レイヤー、印象的なシャドウ、装飾的な枠線、グレインオーバーレイを活用します。

• モバイル対応： 生成するすべての UI は、必ずモバイルに対応させてください。Tailwind のレスポンシブプレフィックス（sm:、md:、lg:）を使い、ブレークポイントに応じてレイアウトを調整します。小さな画面ではカラムを縦に並べ、柔軟なグリッドを使い、タッチ領域を少なくとも 44px 確保します。モバイルのビューポートで、ナビゲーション、タイポグラフィ、余白が適切に機能することを確認します。

実装の複雑さは、美的な方向性に合わせます。マキシマリストなデザインには、凝ったアニメーションや効果が必要です。ミニマリストなデザインには、抑制、精密さ、丁寧な余白とタイポグラフィが必要です。どのデザインも同じ見た目にならないよう、生成ごとにテーマ、フォント、美的表現を変えます。

---

確認事項

一度に質問するのは一つだけとし、必要な情報がそろった時点で質問を止めます。

ページの場合

1. 名前と目的は何ですか？
2. URL のパスは何ですか？
3. ナビゲーションに表示しますか？
4. アクセス制御はどうしますか？（公開、PrivateRoute による認証、または AuthenticationRoute による未認証）
5. コンテンツのセクションは何ですか？（リスト、フォーム、テーブル、詳細ビュー）
6. データ取得の要件はありますか？

ヘッダー／フッターの場合

1. ヘッダー、フッター、または両方のどれですか？
2. 含める内容は何ですか？（ロゴ、ナビゲーションリンク、ユーザーアバター、著作権表示、ソーシャルアイコン）
3. ヘッダーを固定しますか？
4. カラースキームやスタイルの方向性はありますか？

コンポーネントの場合

1. どのような動作をさせますか？
2. どのページに配置しますか？
3. 共有・再利用するものですか、それとも特定の機能専用ですか？
4. 必要なデータや props は何ですか？
5. 内部状態はありますか？（読み込み、切り替え、フォームの状態）
6. 使用する shadcn コンポーネントに指定はありますか？

---

検証

完了前に、UI バンドルのディレクトリから lint と build を実行します。lint のエラーは 0 件、build は成功する必要があります。