yg2224/app-shell-ui

App Shell UI

あなたはApp Shell UIを実装しています。これは、2つのモードを持つ再利用可能なフロントエンドデザインスキルです。 ピクセルを選ぶ前に、まずサーフェスを選択してください。すべてのリクエストをデスクトップシェルにしたり、すべてのアプリを単なる汎用マーケティングページにしたりしないでください。

最初にサーフェスを選ぶ

モード	使用場面	デフォルト構造	使用してはいけない場面
アプリモード	ログイン済みツール、設定、コンソール、チャット、メール、ワークベンチ、操作フロー	固定左ナビゲーション + タスクキャンバス	公開マーケティング、閲覧、コマース、ポートフォリオサーフェス
ウェブサイトモード	マーケティングサイト、プロダクトローンチ、ポートフォリオ、エディトリアルページ、カタログ、ドキュメント、公開コンテンツ	ユーザージャーニーから選択されたページ固有のマクロ構造	汎用的なヒーロー＋3つのカード＋CTAテンプレート、または疑似アプリシェル

リクエストに両方のサーフェスが含まれる場合は、別々にデザインしてください。ウェブサイトモードは獲得や公開情報用、アプリモードはサインインした製品用です。ブランドトークンは適切に共有しますが、両方で同じレイアウトや密度を強制しないでください。

事前準備（両モード共通）

既存プロジェクトで視覚的な決定を下す前に、ルートとその最も近い視覚的な情報源（現在のトークン、タイポグラフィ、テーマメカニズム、アセット、フレームワーク、コンポーネントプリミティブ、インストールされているアイコン/モーションライブラリ）を調査してください。ユーザーが再デザインを依頼しない限り、確立されたシステムを維持します。依存関係を追加する前に package.json を確認し、ライブラリが存在することを前提にしたり、1つのサーフェスに無関係な2つのデザインシステムを混在させたりしないでください。

概要が2つの実質的に異なる結果の間で真に曖昧な場合、正確に1つの短い質問をしてください。それ以外の場合は、1文で推論を述べて続行してください。小さな実装リクエストを要件インタビューに変えないでください。

アプリモードのワークフロー

1. レイアウトテンプレートを選ぶ（ピクセルの前に必須）：
   • 設定型 — 狭い左ナビ + フォーム / トグルリスト
   • コンソール型 — 左ナビ + カードグリッド / ステータスリスト
   • 工作台型 — セッションツリー + 中央揃えの空状態 + コンポーザーカード
   • IM / 三欄型 — アイコンレール + リスト + 詳細
2. ビューポート予算を設定する — コンテンツを追加する前に、対象デスクトップビューポート（最低1280×800）とルートの1つのプライマリタスクを定義します。references/layouts.md → Viewport budget / 单页容量 を参照。
3. デュアルテーマトークンを固定する — references/tokens.md を使用（ライト + ダーク はデフォルトで両方必須）。
4. レシピから構成する — references/components.md（ナビアイテム、カード、リスト行、トグル、ピル、空/コンポーザー）を使用。レシピはテーマに依存せず、変数のみが変更されます。
5. 実装する — CSS変数 + data-theme="light"|"dark" を使用し、テーマトグルを追加。Tailwind/shadcnマッピングはオプション。
6. 自己チェック — このファイルの最後にあるチェックリストを、両方のテーマと対象ビューポートで実行してから納品します。

自由に選択できる場合のデフォルトスタック：

レイヤー	デフォルト
マークアップ	セマンティックHTMLまたはReact
スタイル	CSS変数 + 軽量ユーティリティ/Tailwind
コンポーネント	shadcn / @coss style（New York + 亜鉛のようなニュートラル）
アイコン	Lucideスタイル 1.5–2px ストローク、1ファミリーのみ
テーマ	ライト + ダーク（トグル + オプションでOSの prefers-color-scheme）

デモには、ユーザーがプロジェクト統合を希望しない限り、単一の自己完結型HTMLを推奨します。

アプリモードのアーキテクチャ

L0  ウィンドウクローム（オプションの交通信号灯 / タイトルバー / トップツール + テーマトグル）
L1  サイドバーまたはアイコンレール
L2  コンテンツキャンバス（ライト：ソフトグレー / ダーク：ソフトチャコール）
L3  サーフェス（浮き上がったカード、パネル、リスト）

サイドバー幅：220–260px（テキストナビ）または 48–56px（アイコンレール）。 コンテンツパディング：20–28px。4pxグリッド上でスペーシング。

デフォルトのページ予算：初期デスクトップ状態は、シェルクロームを含めた後、1つのビューポートでプライマリタスクを完了する必要があります。下部に小さな余白を残し、日常的なセカンダリコンテンツを表示するためだけにページ全体を垂直スクロールさせないでください。長いコレクションは、製品が本当に必要とする場合に、1つの境界付き内部スクロール領域を使用することができます。 中文偏好：每个页面尽量一屏完成，内容达到首屏容量就停止继续堆叠。

アプリモードの譲れない項目

1. 2つのテーマ：ユーザーが明示的に1つだけを希望しない限り、ライト と ダーク のトークンセットを同梱します。
2. 1つのブランドプライマリ：プライマリボタン、トグルON、プログレスフィル、選択されたボーダー/背景、リンクに使用。ダークプライマリは、わずかに明るいバージョン（例：#007AFF → #0A84FF）でも構いません。
3. サーフェスラダー（両テーマ）：アプリ背景 → サイドバー背景 → 浮き上がったサーフェス（弱いコントラスト）。ライト：ソフトグレー + 白いカード。ダーク：ソフトチャコール + 浮き上がったグレーカード — 純粋な #000 ページ + 純粋な #fff カードは禁止。
4. テキストラダー：プライマリ / セカンダリ / ターシャリ（値はテーマごとに異なります）。
5. 階層は最初に1pxボーダーで表現。シャドウはオプションでテーマ固有。
6. 半径ラダー：8 / 12 / 16 / 999（テーマ間で共有）。
7. コピーパターン：タイトル + 1行のミュートされたサブタイトル。
8. モーション：150–200msの色/背景のみ。バウンスアニメーションは禁止。
9. テーマ切り替え：ルート要素に data-theme 属性 + 可視のトグル。可能な場合は localStorage で永続化します。
10. アイコンの制限（コンテンツ）：右側のコンテンツはデフォルトで テキスト + ストロークアイコン + ステータスピル。絵文字/イラストはオプションのアクセントのみ — すべてのリスト行やカードのデフォルトにはしないでください。密集したリストでは 絵文字ゼロ を推奨。バナーや空状態で、多くても 1つ の装飾マーク。
11. 高さが揃った隣接要素：横並びのコンテンツペア（リストとコンポーザー、パネルとパネル、1行にカードのペアを形成する統計情報など）は、同じ外側の下端を共有する必要があります。grid/flexの stretch + カラムflex + サーフェスの flex: 1 を使用します — 短いカードを残す align-items: start は絶対に使用しないでください。references/layouts.md → Equal-height side-by-side columns を参照。
12. 単一ビューポートのコンテンツ予算：デスクトップでは、デフォルトルートでページレベルの垂直スクロールを必要としてはなりません。使用可能なキャンバスを優先順位の高いコンテンツで埋めますが、最初のビューポートを超える前に停止します。コンテンツが収まらない場合は、削除、短縮、ページネーション、開示、タブ分割、または別のルートに分割します。コントロールをクリップしたり、テキストを読みやすさ以下に縮小したりしないでください。モバイルでは、プライマリアクションとステータスを最初のビューポートに収めます。本当に長いコンテンツのために自然なスクロールを予約します。

アプリモードのDo / Don't

Do	Don't
左ナビ + 右コンテンツ	アプリ全体をフルブリードのヒーローアートにする
両テーマでソフトキャンバス + 浮き上がったカード	デフォルトでネオンサイバーダークや純粋なOLEDブラックにする
単一アクセント（ペアのライト/ダーク）	複数のプライマリとしてレインボーナビアイコンを使用する
ナビ + コンテンツにストロークアイコン（Lucideスタイル）	塗りつぶし + ストロークアイコンセットを混在させる
テキスト優先のカード/リスト。ステータスにピルを使用	すべての行/カード/セクションヘッダーに絵文字
ステータスは小さなピル / ミュートされたテキスト	通常状態で派手な全幅アラートバナー
クロームにテーマトグル	filter: invert() によるダークモード
トークンによるボーダー分離	ハードコードされた #fff / #000 クロームカラー
余裕のあるスペーシング	密集したスプレッドシートのような詰め込み
主要領域ごとに≤1つの絵文字アクセント（またはなし）	バナー + カード + リストすべてに絵文字過多
横並びカードの高さを揃える（stretch）	一方が高く、もう一方が低いピア（align-items: start）
優先順位付けされたブロックで1画面ルート	日常的なコンテンツのための無制限のページスクロール
長いコレクションのための境界付き内部スクロール	固定高さでコンテンツを隠したりクリップしたりする

アプリモードのページ構築順序

1. シェル（ウィンドウ + サイドバー + メイン）
2. サイドバーのブランドブロック
3. ナビグループ + アクティブアイテム
4. ページヘッダー（H1 + ミュートされたサブタイトル + アクション）
5. タイトルバーまたは設定のテーマトグル（デモでは必須）
6. オプションのツールバー（検索 + セグメントフィルター）
7. 優先順位順のコンテンツブロック：バナー → 統計 → プライマリグリッド/リスト → セカンダリ2カラム。ビューポート予算がいっぱいになったら停止。優先順位の低いブロックはタブ、開示、ページネーション、または別のルートに移動します。
8. すべての2カラムピア行に：高さ揃えレシピ（stretch + flexサーフェス）を適用し、オーバーフローを強制しない。
9. インタラクションを配線：ナビ切り替え、選択、トグル、フィルター、テーマトグル

アプリモードの実装ノート

• ライトトークンを :root, :root[data-theme="light"] に、ダークトークンを :root[data-theme="dark"] に配置します（references/tokens.md を参照）。
• コンポーネントは変数のみを使用 — コンポーネントルールにハードコードされたブランド/サーフェスカラーは禁止。
• 選択されたナビ：ソフトなプライマリウォッシュ + プライマリテキスト、半径8px（ウォッシュミックスはテーマによって異なります）。
• カード：--bg-surface + 1px --border + 半径12。選択時：プライマリリング/ボーダー。先頭マーク = ミュートされたプレート内のストロークアイコン またはマークなし — デフォルトで絵文字は禁止。
• 設定/フィード行：16–18px ストロークアイコン（オプションのソフトプレート）+ タイトル + ミュートされた説明 + 右側のコントロール。絵文字のリストアイコンは避けてください。
• 空/新しいセッション：中央揃えのタイトル + 大きな丸みを帯びたコンポーザー。チップ + プライマリCTA。空のウォーターマークは 1つ の薄いストロークアイコンまたは単一の控えめなグリフ — 絵文字のスタックは禁止。
• バナー：テキスト優先。オプションで最大 1つ の小さなアクセントタイル（多くの場合はなし）。
• 「空のコレクション + 作成」用の破線の追加ゾーン（プラス記号、絵文字ではない）。
• セカンダリボタン、セグメントトラック、トグルOFFトラックは、テーマトークン（--secondary-btn-bg、--seg-track、--toggle-off）を使用する必要があります — ライトグレーのrgbaはダークでは機能しません。
• ページシェルはデフォルトで固定（min-height: 0; overflow: hidden）。リスト、ログ、テーブル、メッセージ履歴が本質的に長い場合は、明確な高さ予算を持つ1つの境界付き子領域にスクロールを配置します。ドキュメント本文やコンテンツキャンバス全体をデフォルトのスクロールコンテナにしないでください。
• 少なくとも1280×800のデスクトップビューポート（および狭いモバイルビューポート）で最初のロード状態を検証します。プライマリタスク、コントロール、ステータスがページスクロールなしで表示され、テキストやコントロールがクリップされていないことを確認します。

テーマAPI（標準）

// data-theme = "light" | "dark"
// localStorage key: "app-shell-theme"
// トグルが属性を切り替え、初期化時にstorage、次にprefers-color-schemeを読み取ります

最小限のCSSトークンブロック

references/tokens.md からデュアルテーマブロックをコピーします。

最小限のHTMLスケルトン

<html data-theme="light">
…
<div class="window">
  <header class="titlebar">
    …
    <button type="button" data-theme-toggle aria-label="切换深浅色">…</button>
  </header>
  <div class="shell">
    <aside class="sidebar">…</aside>
    <main class="main">…</main>
  </div>
</div>

アプリモードのプロンプトシード

ライト

macOS デスクトップユーティリティのライトUI: 240px ソフトグレーサイドバー（ストロークアイコン + ラベル、選択 = ライトプライマリウォッシュ + 8px 半径）、メインキャンバスはソフトグレー、白い丸みを帯びたカード。プライマリカラーは #007AFF で、ボタン、トグル、プログレス、選択リングに使用。3つのテキストグレー。半径8–16px。ほとんどシャドウなし、1pxのライトボーダー。設定/リスト行は、小さなストロークアイコン（絵文字ではない）+ タイトル/説明 + 右側のトグルまたはステータスピル。コンテンツエリアはテキスト優先、絵文字は最小限またはなし。空の状態 = 中央揃えのタイトル + 大きな丸みを帯びたコンポーザー。

ダーク

ダークモードの同じシェル: ソフトチャコールキャンバス #1C1C1E、サイドバー #161617、浮き上がったカード #2C2C2E、ボーダーは白8%アルファ、テキスト #F5F5F7 / #A1A1A6 / #6C6C70、プライマリ #0A84FF、選択されたナビ = プライマリ22%をカードサーフェスに混ぜる。純粋な黒のページはなし。invertフィルターはなし。テーマトグルを含める。

ビジネス名のみを置き換え、シェル + デュアルテーマルールは維持します。

ウェブサイトモードのワークフロー

ウェブサイトモードは、公開向けウェブ作業用です。通常のドキュメントスクロールを使用しても構いません。アプリモードの固定キャンバス、サイドバー、人工的なウィンドウクローム、1ビューポートのコンテンツ制限を継承しないでください。ウェブサイトモードを実装する前に references/web-frontend.md を読んでください。

1. デザインリードを作成する — ページの種類、対象ユーザー、プライマリジョブ、具体的なトーンを記述します。「クリーンでモダン」は方向性ではありません。概要と既存のブランドから推論し、2つの方向性が実質的に異なる結果を生む場合にのみ、1つの短い質問をしてください。
2. サーフェスモードを選択する — コンバージョンページやローンチには 説得、ドキュメントやエディトリアルコンテンツには 読書、ポートフォリオ/ギャラリー/イベント作品には 体験、閲覧や購入には カタログ。サインインした製品はアプリモードのままです。
3. コンポーネントの前にマクロ構造を選ぶ — ジョブに合ったページ形状を選択します。例：プロダクトリビール、証拠主導のストーリー、エディトリアルナラティブ、作品インデックス、カタログ、読書ガイド、キャンペーンポスター。中央揃えのヒーロー -> 3つの等しいカード -> CTA をデフォルトにしないでください。
4. 視覚システムにコミットする — パレット、タイプの役割、スペーシング/半径ルール、画像処理、1つの目に見える差別化要因を固定します。既存のブランドトークンを再利用します。それ以外の場合は、セマンティックCSS変数を定義して使用し、セクションごとに色やフォントを即興で決めないでください。
5. 事実とメディアを計画する — 提供された事実、実際のスクリーンショット/製品状態、ライセンスされたアセット、または概要に適した生成ビットマップビジュアルを使用します。顧客、メトリクス、 testimonial、ロゴ、偽のダッシュボード、ブラウザクローム、実際のデータとして読まれるプレースホルダーデータを発明しないでください。不明な主張は、プレースホルダーとして明示的にマークされたままにするか、省略します。
6. 情報ジャーニーを構築する — セマンティックランドマークと、次のアクションを明白にする階層を使用します。セクションの役割が異なる場合、構成を変えても構いません。カードは、繰り返し可能で境界のあるアイテムに使用し、デフォルトのページセクションラッパーとしては使用しません。
7. 完全な動作を実装する — ネイティブコントロールとリンク、可視フォーカス、ローディング、空、エラー、無効、成功状態を適宜使用します。モーションはフィードバックや空間変化を説明するために使用し、transform/opacity を使用し、prefers-reduced-motion を尊重し、実質的に瞬時でない限り高頻度フローでは使用しないでください。
8. レンダリング出力を検査する — デスクトップとモバイルのスクリーンショット、実際のコンテンツの極端なケース、コントラスト、キーボードナビゲーション、ローディング画像の寸法、オーバーフロー、最初のビューポートを検証します。ヒーローの提案、プライマリアクション、視覚的な焦点は1280x800に収まる必要があります。その下でのページスクロールはウェブサイトでは正常です。

ウェブサイトモードの譲れない項目

1. ユーザーが明示的に製品プレビューやサインイン済みアプリケーションルートを要求しない限り、公開ウェブサイトをアプリモードのクロームでラップしないでください。
2. すべての公開...

[以降は翻訳のため省略]