KrostyMall/Landing-SENSORITY

デザイン & UI

意図的でプレミアムなインターフェースを、テンプレート的な汎用品ではなく作りましょう。これはアプリビルダーにおける最大の品質向上のレバーです。DOM / オーバーレイ UI（ページ、クローム、HUD、メニュー、フォーム）に適用してください。（3Dゲームのゲームプレイキャンバスについては、building-games スキルを参照してください。このスキルはその上に重なるDOM UIを統制します。）

詳細は references/ を参照してください（必要に応じて読み込まれます。ここにすべてをインライン化しないでください）：

• references/refined-ui.md — 完全なプロダクトクローム/オーバーレイデザインシステム
• references/typography.md — タイプスケール、ペアリング、リズム
• references/surfaces.md — エレベーション、ボーダー、シャドウ、レイヤリング
• references/animations.md — モーション、イージング、トランジション
• references/performance.md — UIをスムーズに保つ（60fps、カクつきなし）

---

1. デザインシステムファースト（スタイリングの前に行うこと）

システムを一度定義し、それから組み立ててください。アドホックな値を決して散りばめないでください。

• CSSのトークン（Tailwind v4はCSSファーストです）。 パレット、角丸、フォントを src/styles.css の @theme 内にCSS変数として定義し、Tailwindユーティリティとして使用します。真実の情報源は一つです。

  @import "tailwindcss";
  @theme {
    --color-bg: #0b0b0f;      --color-surface: #16161d;
    --color-fg: #e7e7ea;      --color-muted: #a0a0ab;
    --color-primary: #14b8a6; --color-border: #26262f;
    --radius: 0.75rem;        --font-sans: "Inter", system-ui, sans-serif;
  }
  

• shadcn/ui コンポーネントを使用します（Radixプリミティブ + cva バリアント + tailwind-merge）。ボタン、ダイアログ、ドロップダウン、入力などに使用します。これらはアクセシブルで一貫性があります。src/components/ui に生成し、トークンでスタイリングし、インラインの16進数は使用しないでください。
• Tailwind v4 のベース修正 — ボタンにはポインターカーソルが必要です。 v4 の Preflight は <button> に cursor: default を設定するため、壊れたように感じられます。これを src/styles.css に一度追加して、ボタン/クリック可能なロールがポインターを表示するようにします：

  @layer base {
    button:not(:disabled),
    [role="button"]:not(:disabled) { cursor: pointer; }
  }
  

• アドホックなスタイリングを禁止します： JSX内での生の16進数、text-white/bg-black といったリテラル、p-[16px] や text-[13px] のような任意の値は使用しないでください。値が必要な場合は、トークンまたはスケールステップにします。

2. 定量化された評価基準（「醜い」を防ぐ安価なルール）

• 合計 ≤ 3〜5色（1つのプライマリ + ニュートラル + 多くても1つのアクセント）。ランダムな追加色は禁止です。特に指定がない限り、デフォルトでパープルにしないでください。
• フォントファミリーは ≤ 2（多くの場合1つ）。ディスプレイ/見出し用と本文用を組み合わせるか、1つだけを使用します。
• 行間は 1.4〜1.6 （本文）。大きな見出しではより狭くします。
• 背景色を上書きするときは、前景色（テキスト色）も一緒に上書きします（コントラストが維持されていることを確認してください — ライトモードとダークモードの両方をチェックします）。
• モバイルファースト：最初に ~390px のレイアウトをデザインし、その後スケールアップします。水平方向のはみ出しは禁止。タップターゲットは ≥ 44px。
• 一貫したスペーシングスケール（4/8ベース）。詰め込みすぎよりも、余白をたっぷり使う方が優れています。
• アクセントは1つ、控えめに使用します。プライマリアクションにのみ使用し、あらゆる場所には使いません。

3. アンチAIスロップ（出力が汎用的に見える兆候 — 避けるべきもの）

• グラデーションブロブのフィラー、コンテンツの代わりとなる巨大なヒーローグラデーションは使用しないでください。
• 絵文字をアイコンとして使用しないでください — 実際のアイコンセット（lucide-react）を使用します。
• 手書きSVGのイラスト/地図/チャートは使用しないでください — 実際のライブラリ（チャートには recharts）または実際に生成された画像を使用します。
• 最終製品にプレースホルダ画像 / ダミーのグレーボックスを残さないでください — 実際の画像を生成するか、実際のコンテンツを使用します。キャンバス画像には crossOrigin="anonymous" を設定します。
• 使い古されたフォント（デフォルトのシステムフォントのみ、またはComic Sansレベルの選択）は避けてください。
• すべての要素はその存在価値を証明する必要があります。 装飾的なノイズは削除しましょう。システムを確立し、意図を持って変化させましょう — ランダムではありません。
• アプリをその場で編集するときは、既存のUIに合わせてください。異なるビジュアル言語を持ち込まないでください。

4. レイアウトと階層

• 明確なビジュアル階層：ビューごとに1つのプライマリアクション。サイズ/ウェイト/カラーで重要度を表現します。references/typography.md と references/surfaces.md を参照してください。
• 実際のレイアウト構造（グリッド/フレックス、コンテナの最大幅）を使用し、絶対配置のハックは使用しないでください。一貫したグリッドに揃えます。
• 空の状態、ローディング状態、エラー状態もデザインの一部です — 真っ白でカクつく中間状態をリリースしないでください。

5. モーション（控えめで、目的のあるもの）

• ホバー/プレス/入力時には、短くイージングされたトランジション（150〜250ms）。prefers-reduced-motion を尊重します。詳細は references/animations.md を参照してください。
• カクつきを引き起こすようなレイアウトのアニメーションは避けてください。transform/opacity を優先します。

6. ゲームオーバーレイ（building-games と組み合わせる場合）

ゲームプレイキャンバスは building-games が所有します。このスキルは DOM オーバーレイ（スタート画面/「クリックしてプレイ」画面、HUD、スコア、メニュー、ポーズ、モバイルコントロール）のスタイリングを行います。オーバーレイはキャンバス上でも読みやすく（背景、コントラスト）、ポインターロック/ゲームプレイの入力パスからは除外してください。

---

完了チェックリスト（UI完了と判断する前に）

• @theme にトークンが定義されていること。JSX内にアドホックな16進数/任意の値がないこと。
• ≤ 5色、≤ 2フォント、一貫したスペーシングスケール。
• コントラストが維持されていること。背景を上書きした場所では前景も上書きされていること。
• モバイル（~390px）ではみ出しがないこと。ターゲット ≥ 44px。
• 実際のアイコン/画像/チャートを使用していること — アンチスロップの兆候がないこと。
• ローディング/空/エラー状態が処理されていること。モーションは控えめで、prefers-reduced-motion に対応していること。
• ブラウザでレンダリングし、目視確認済みであること（AGENTS.md の検証を参照）。単なるcurlではないこと。