absolute-ui

🧢 最初の応答はこの絵文字から始めてください。

Absolute UI

シニアデザイナーが手がけたように感じられる、プロンプトから生成しただけではない UI を構築するための、包括的なデザインシステムのナレッジベースです。このスキルには、具体的で独自のルールがまとめられています。正確な余白の値、実証済みの色の比率、実際に使えるタイポグラフィのスケール、実戦で鍛えられたコンポーネントのパターンなどです。あいまいな「すっきりさせる」といった助言ではなく、具体的な CSS／Tailwind の値を示し、推奨事項のすべてを実際に活用できます。

AI の粗雑な生成物と洗練された UI を分けるのは、制約と抑制です。意図を持って色数を絞り、スケールに沿った一貫性のある余白を使い、声高にならずに階層を作るタイポグラフィを選び、気を散らさずに応答性を感じさせるマイクロインタラクションを取り入れます。

---

このスキルを使用する場面

次の場合にこのスキルを使用します。

• ユーザーが UI コンポーネント（ボタン、カード、フォーム、テーブル、ナビゲーション）の構築やスタイリングを依頼したとき
• レイアウト、余白、グリッドの選択についてサポートが必要なとき
• ダークモードやテーマの切り替えを実装したいとき
• タイポグラフィ、フォントの選択、テキストのスタイリングについて質問されたとき
• アクセシブルで WCAG に準拠したデザインが必要なとき
• ランディングページ、オンボーディング、コンバージョン重視のレイアウトを作りたいとき
• アニメーション、トランジション、マイクロインタラクションについて質問されたとき
• レスポンシブデザインやモバイルナビゲーションのサポートが必要なとき
• フィードバックパターン（トースト、ツールチップ、読み込み状態）が必要なとき
• 「見栄えをよくしたい」「もっとプロらしくしたい」と依頼されたとき

次の場合、このスキルを使用しないでください。

• バックエンドのロジック、API の設計、データベーススキーマに関する質問
• ブランドアイデンティティやロゴのデザイン（これはブランディングではなく実装です）

---

最初に設定を読み込む

マークアップや CSS を書く前に、キャッシュされた設定を読み込みます。.absolute.config.json または ~/.absolute/config.json（/absolute init で作成）が存在する場合は、有効な設定を （プロジェクトファイル → グローバルの projects["<cwd>"] → グローバルの defaults の順に）解決し、conventions.ui を採用します。

• framework — デフォルトではなく、プロジェクトのフレームワーク（react/vue/svelte）向けに生成します。
• styling — Tailwind を前提にせず、プロジェクトのシステム（tailwind / css-modules / styled-components / vanilla）を使用します。
• iconLibrary — プロジェクトのアイコンライブラリからアイコンを取得します（原則 7 では実際のアイコンを使用します）。 別のライブラリを新たに導入しないでください。
• componentLib — 設定されている場合は、既存のコンポーネントライブラリ（shadcn/mui/chakra）をベースにします。
• tokensPath — このファイルから既存のデザイントークンを読み込み、それを拡張します。別のスケールを独自に作らないでください。

設定で指定されていない項目に限り、package.json の依存関係から検出します。設定がない場合は、 init を控えめに提案し、その場で検出します。

---

デザインの考え方

CSS を書く前に、目指す美的方向性を決めます。ありきたりな UI になる最大の原因は、意図ではなくコードから始めてしまうことです。

1. 構造ではなく、ユーザーの意図から始める — ヘッダー、フッター、レイアウトの土台から始めないでください。「ユーザーは何をしようとしているのか？」と考えます。宿泊先を検索しているなら、検索バーが自然な出発点です。ユーザーの意図に合わせて UI を広げていきます。多くのページでは、見出し、入力欄、ボタンがあれば十分です。
2. トーンを選ぶ — 文脈に合うものを選びます。ブルータリスト、エディトリアル、レトロフューチャー、オーガニック、ラグジュアリー、遊び心のあるスタイル、インダストリアル、アールデコ、ソフト／パステル、ミニマルでシャープなスタイルなどです。これらは出発点です。組み合わせたり、独自のスタイルを考案したりしてください。具体的な選択肢 25 種類は references/style-catalog.md を参照してください。
3. 印象に残る要素を決める — 人が覚えているような、視覚的な選択をひとつ決めます。珍しい色、印象的なタイポグラフィ、大胆なレイアウトの変化、雰囲気のある質感などです。
4. 創造性とは、つなげることであり、発明することではない — 自分の領域で一流の既存デザインを調べます。参考にするものを 3〜5 個集め、それぞれのよい点を書き出してから、その要素を自分なりに組み合わせます。デザインの前にいったん離れましょう。戻ってきたときに新しいアイデアが浮かぶことがあります。
5. プロジェクトごとに変化をつける — どのデザインも異なる印象にします。直近の 3 つの出力で同じフォント、色、レイアウトのパターンを使っていたら、粗雑な生成物を作っていることになります。

---

重要な原則

1. 任意の値ではなく、間隔のスケールを使う - 基準単位（4px または 8px）を決め、その倍数だけを使います：4、8、12、16、24、32、48、64、96。Tailwind のデフォルトスケールはこの原則に従っています。13px や 27px のような不規則なパディングは、UI の初心者らしさが最もよく表れる要素です。

2. パレットはメインカラー 1 色＋ニュートラルカラー 1 色＋アクセントカラー 1 色に絞る - 色が増えるほど、まとまりがなくなります。メインカラーは 5～7 段階（50～900）、ニュートラルなグレーは全階調を使い、破壊的操作や成功の状態にはアクセントカラーを 1 色使います。1 画面で使う色相は 3 色以内にします。

3. 装飾ではなく、コントラストで階層を作る - サイズ、ウェイト、色、間隔によって階層を作ります。枠線、影、色の違いをすべて同時に使う必要はありません。階層の各レベルでは、強調の手がかりを 1 つか 2 つに絞ります。重要なポイントは、何かを目立たせるには、対象をさらに強調するのではなく、競合する要素の存在感を弱めるほうが効果的な場合が多いことです。

4. すべてのインタラクティブ要素に 4 つの状態を用意する - デフォルト、ホバー、アクティブ／押下、無効です。いずれかを省くと、UI が壊れているように感じられます。アクセシビリティのため、フォーカス状態も必須です。

5. 余白は機能であり、無駄なスペースではない - たっぷりとしたパディングは、UI に上質な印象を与えます。窮屈な UI は安っぽく感じられます。ワークフロー：まず余白を多めに取り、デザイン全体を確認してから、ちょうどよいと感じるまで減らします。ユーザーは細部に注目する前に UI 全体を見渡します。1 つの要素を拡大しているときには過剰に感じられる余白も、ページ全体では適切に見えます。

6. プロジェクト内では一貫性を保ち、プロジェクトごとに個性を出す - 1 つのプロジェクト内では、角丸、影のスケール、トランジションのタイミングをすべて統一します。一方で、プロジェクトごとに、それぞれ異なるフォント、色、空間的な印象を持たせます。個性のない一貫性が、AI 生成の粗悪な成果物を生みます。

7. 絵文字ではなく、本物のアイコンを使う - Unicode 絵文字（例：✅、⚡、🔥、📊）は OS やブラウザーによって表示が一貫せず、CSS でスタイルを設定できない（サイズ、色、線の太さを制御できない）うえ、視覚的な一貫性を損ない、アクセシビリティにも悪影響を与えます。必ず適切なアイコンライブラリ（推奨：Lucide React、React Icons、Heroicons、Phosphor、Font Awesome）を使います。これらのライブラリのアイコンは SVG ベースで、スタイルを設定でき、一貫性があり、アクセシブルです。

8. 背景に雰囲気を持たせる - 単色のフラットな背景（#fff、#f9fafb）は、AI 生成 UI の定番です。微妙なグラデーションメッシュ、ノイズ／粒子のオーバーレイ、幾何学模様、色味を加えたサーフェスを使い、奥行きを作ります。テクスチャは感じられる程度にし、目に見えるほど強くしてはいけません。意識して気づくようなら、やりすぎです。

---

コアコンセプト

8px グリッド - 余白、サイズ、レイアウトに関するすべての判断は、8px グリッドに合わせます。コンポーネントの高さ：32px（小）、40px（中）、48px（大）。パディング：8px、12px、16px、24px。間隔：8px、16px、24px、32px。このルールひとつで、「なぜ見た目がおかしいのか」という問題の80％を解消できます。

視覚的な重み - 各要素には、サイズ、色の濃さ、境界線の太さ、影によって決まる視覚的な重みがあります。ページには明確に最も重みのある要素（CTA または主要コンテンツ）をひとつ置き、それ以外は段階的に軽くします。ページを目を細めて見てみましょう。何も目立たないなら、階層が平坦です。

60-30-10 のルール - 60％を支配的な色（背景／ニュートラル）、30％をセカンダリカラー（カード、セクション）、10％をアクセントカラー（CTA、アクティブ状態）にします。この比率はどのような配色にも使え、「すべてがカラフル」になる落とし穴を防ぎます。

視覚的な整列 - 数学的な中央が、見た目にも中央とは限りません。ボタン内のテキストは、見た目上、上部のパディングを1～2px増やす必要があります。テキストの隣にあるアイコンには、視覚的な調整が必要です。常にインスペクターよりも自分の目を信頼しましょう。

段階的な情報開示 - すべてを一度に表示しないでください。まず不可欠な操作を示し、必要に応じて複雑な情報を開示します。これは、フォーム（ひとつの長いフォームより複数ステップ）、設定（詳細設定より基本設定）、ナビゲーション（第2階層や第3階層より主要項目）に当てはまります。

ゲシュタルト：類似性と近接性 - 脳は部分より先に全体を認識します。一貫した形、サイズ、色を使って「これらはひとまとまり」だと伝えます（類似性）。余白を使って関連する要素をまとめ、関連しない要素を分けます（近接性）。デザインを数秒で把握できないなら、ゲシュタルトが崩れています。

個性を生む奥行き - べた塗りの境界線の代わりに影を使い、単色の塗りつぶしの代わりに控えめなグラデーションを使い、無個性な要素をカードで引き立てます。ユーザーに近く感じられるほど（高さがあるほど）、注目を集めます。アクセントとなるグラデーションや色付きの影をひとつ加えるだけで、複雑にせずに華やかさを加えられます。

タグよりコンテキストを優先 - すべての H1 を同じサイズにする必要はありません。別のコンテキストでは、H3 が H2 より大きくなることもあります。HTML タグが定義するのはセマンティクスです。視覚的な階層は、その特定のレイアウトでユーザーが最初に見るべきものによって決まります。

---

よくあるタスク

ボタンの階層をスタイリングする

すべてのアプリには、3段階のボタンが必要です：プライマリ（塗りつぶし）、セカンダリ（アウトライン）、ゴースト（テキストのみ）。視覚的なセクションごとに、プライマリボタンはひとつだけにしてください。

/* Primary - solid fill, high contrast */
.btn-primary {
  background: var(--color-primary-600);
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  border: none;
  transition: background 150ms ease, transform 100ms ease;
}
.btn-primary:hover { background: var(--color-primary-700); }
.btn-primary:active { transform: scale(0.98); }

/* Secondary - outlined */
.btn-secondary {
  background: transparent;
  color: var(--color-primary-600);
  padding: 10px 20px;
  border: 1.5px solid var(--color-primary-200);
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  transition: border-color 150ms ease, background 150ms ease;
}
.btn-secondary:hover {
  border-color: var(--color-primary-400);
  background: var(--color-primary-50);
}

/* Ghost - text only */
.btn-ghost {
  background: transparent;
  color: var(--color-gray-600);
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
}
.btn-ghost:hover { background: var(--color-gray-100); }

ボタンの高さは36px（sm）、40px（md）、または48px（lg）にします。タッチ対象の高さを36px未満にしないでください。

文字サイズのスケールを設定する

比率1.25（長三度）のモジュラースケールを使います。基本サイズ：16px。

:root {
  --text-xs: 0.75rem;    /* 12px - captions, labels */
  --text-sm: 0.875rem;   /* 14px - secondary text, metadata */
  --text-base: 1rem;     /* 16px - body text */
  --text-lg: 1.125rem;   /* 18px - lead paragraphs */
  --text-xl: 1.25rem;    /* 20px - card titles */
  --text-2xl: 1.5rem;    /* 24px - section headings */
  --text-3xl: 1.875rem;  /* 30px - page titles */
  --text-4xl: 2.25rem;   /* 36px - hero subheading */
  --text-5xl: 3rem;      /* 48px - hero heading */

  --leading-tight: 1.25;  /* headings */
  --leading-normal: 1.5;  /* body text */
  --leading-relaxed: 1.75; /* small text, captions */
}

フォントファミリーは最大2種類にします。個性的なディスプレイフォントと洗練された本文用フォントを組み合わせ、Inter、Roboto、Space Grotesk を安易に選ばないでください。デザインの方向性に合わせた組み合わせについては、references/typography.md を参照してください。

CSS Grid でレスポンシブレイアウトを構築する

/* Content-first responsive grid - no media queries needed */
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 24px;
}

/* Holy grail layout */
.page-layout {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(0, 3fr) minmax(200px, 1fr);
  gap: 32px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Stack on mobile */
@media (max-width: 768px) {
  .page-layout {
    grid-template-columns: 1fr;
  }
}

コンテンツの最大幅：アプリは1280px、読み物コンテンツは720px。テキストの行の長さは75文字を超えないようにしてください。

ダークモードを適切に実装する

:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f9fafb;
  --bg-tertiary: #f3f4f6;
  --text-primary: #111827;
  --text-secondary: #6b7280;
  --border: #e5e7eb;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --border: #334155;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  }
}

色をただ反転させるだけにしないでください。ダークモードの背景には、純粋な黒ではなく、暗いブルーグレー（#0f172a、#1e293b）を使います。目の疲れを防ぐため、白いテキストは#ffffffではなく#f1f5f9にします。ダークモードでは影の不透明度を高くする必要があります。

トースト通知システムを追加する

.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: slide-up 200ms ease-out;
  z-index: 50;
}

.toast-success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.toast-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.toast-info { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }

@keyframes slide-up {
  from { transform: translateY(16px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

成功トーストは3～5秒後に自動で閉じます。エラートーストは閉じる操作が行われるまで表示し続けます。複数のトーストは8pxの間隔で積み重ねます。同時に表示するのは最大3件です。

データテーブルを作成する

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.table th {
  text-align: left;
  padding: 12px 16px;
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border);
}

.table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
}

.table tr:hover td {
  background: var(--bg-secondary);
}

数値は右揃え、テキストは左揃えにします。行のストライプとホバー効果を両方使わず、どちらかひとつを選びます。ビューポートより高いテーブルには固定ヘッダーを使います。モバイルでは横スクロール用のラッパーを追加し、テーブルがはみ出さないようにしてください。

---

アンチパターン／よくある間違い

間違い	問題点	代わりにすること
白（#fff）に純粋な黒（#000）を使う	コントラストが強すぎて目が疲れ、不自然に見えます	#fff には #111827、#0f172a には #f1f5f9 を使います
コンポーネントごとに異なる角丸を使う	見た目の一貫性が失われ、自動生成されたように見えます	角丸を1つ（8px）に決め、すべてで統一します
あらゆる要素にシャドウを付ける	視覚的なノイズが生じ、階層がなくなり、重たい印象になります	シャドウはモーダル、ドロップダウン、カードなど、浮き上がった要素に限って使います
虹のように多くの色を使う	階層がなくなり、圧迫感があり、プロらしさに欠けます	色相は最大3つにします。プライマリー、ニュートラル、アクセントです。60-30-10のルールを使います
モバイルでクリック領域が小さい	WCAG に準拠せず、ユーザーを苛立たせ、エラーを増やします	タッチ領域は最低44x44px（48pxが望ましい）にします
あらゆる要素をアニメーションさせる	気が散り、安っぽく感じられ、パフォーマンスが低下します	状態が変わる要素だけをアニメーションさせます。トランジションは最大150-300msにします
すべてを中央揃えにする	読みやすさが損なわれ、PowerPoint のスライドのように見えます	本文は左揃えにします。中央揃えにするのはヒーロー見出しと CTA だけです
余白の一貫性がない	UI が洗練されていないことが最も目立つ要因です	4/8px の余白スケールを使います。同じコンテキストでは、同じ間隔にします
アイコンに絵文字を使う	OS やブラウザーによって表示が異なり、スタイルを変更できず、見た目の一貫性が損なわれ、アクセシビリティにも問題があります	Lucide React、React Icons、Heroicons、Phosphor、Font Awesome など、本物のアイコンライブラリを使います
汎用的なフォントスタック（Inter、Roboto、Arial）	「AI が生成した」と一目で分かり、個性がありません	デザインの方向性に合ったフォントを選びます。references/typography.md を参照してください
白地に紫／インディゴのグラデーションを使う	AI 生成のデザインで最もありふれた色使いです	文脈に合ったブランドカラーを選びます。金融ならネイビー＋ゴールド、クリエイティブならコーラル＋ティールです
あらゆる場所で予測可能な左右対称レイアウトにする	どのセクションも中央揃えの3列グリッドになり、テンプレートのように見えます	マーケティングページでは非対称、要素の重なり、グリッドから外れた配置を使います
単色の平坦な背景を使う	雰囲気や奥行きがなく、ワイヤーフレームのように感じられます	グラデーションメッシュ、控えめな粒状感、幾何学模様を加えます。references/atmosphere-and-texture.md を参照してください
複数の色相を使ったグラデーション（青＋緑など）	色がぶつかり、素人っぽく見えます	グラデーションを使う場合は、同じ色相の明るい色や暗い色に限ります。または、単色を使います
重複する UI 要素を使う	スワイプ操作と重複する矢印や、すでに区別されている要素の枠線などが該当します	機能を追加しない要素は削除します。すべての要素に、存在する理由が必要です
AI 生成の KPI／指標を繰り返す	同じ統計情報が1ページ内に2～3回表示されます	各指標は、最も関連性の高い場所に1回だけ表示します
すべてのアクションを目に見えるボタンにする	カードにボタンが4つ以上並び、圧迫感があります	二次アクションは三点リーダーのコンテキストメニューにまとめます
イニシャル入りのグラデーションプロフィールサークルを使う	「AI の仮置き素材」と一目で分かり、本番アプリではまず見かけません	実際のアバターをアップロードできるようにし、フォールバックとしてイニシャルを表示します（背景は単色、グラデーションなし）
項目の少ない作成フォームを1ページ全体に表示する	AI は3項目のフォームにページ全体のスペースを割り当てます	シンプルなフォームにはモーダルを使い、詳細オプションはデフォルトで折りたたみます
テキストとアイコンだけのランディングページを作る	製品が実在することを示す視覚的な証拠がなく、テンプレートのように見えます	汎用アイコンではなく、実際の製品スクリーンショット（傾きやシャドウを付けたもの）を使います

---

注意点

1. ダークモードの CSS カスタムプロパティには、適切なスコープで明示的なオーバーライドが必要です - :root に --bg-primary を設定する方法は有効ですが、コンポーネントがポータルやシャドウ DOM 内にある場合、テーマ変数を継承できないことがあります。モーダル、ドロップダウン、サードパーティ製ウィジェットのラッパーで、必ずテーマの切り替えをテストしてください。

2. Tailwind の purge／content 設定にコンポーネントのパスがないと、本番環境の CSS が空になります - モノレポの場合や、UI コンポーネントが src/ ディレクトリの外にある場合、Tailwind は本番用バンドルからそれらのクラスを削除します。Tailwind クラスを含むすべてのパスを tailwind.config.js の content に指定してください。

3. ボタンに transform: scale() を指定すると、フォーカスリングやオーバーフローのシャドウが切り取られます - :active に scale(0.98) を使うのは、見た目を整える一般的な方法です。しかし、ボタンにフォーカスリング用の box-shadow があると、親要素のオーバーフローによってシャドウが切り取られます。変形する要素のフォーカスインジケーターには、box-shadow ではなく outline-offset を使ってください。

4. min-height: 100vh はモバイル版 Safari でレイアウトを崩します - モバイルブラウザーではブラウザーの UI も 100vh に含まれるため、画面下部のコンテンツが切り取られます。モバイルの全画面レイアウトには、min-height: 100dvh（動的ビューポートの高さ）を使ってください。古いブラウザー向けに 100vh のフォールバックも追加してください。

5. 疎なグリッドでは、Grid の auto-fill と auto-fit で見た目が異なります - auto-fill は行を埋めるために空の列を作成しますが、auto-fit は列を折りたたんで項目を引き伸ばします。項目が幅いっぱいに広がることを想定して auto-fill を使うと、最後の項目の後に空白が残った状態でグリッドが止まります。幅いっぱいに広がるレスポンシブグリッドには auto-fit を使ってください。

6. 完璧なコンテンツではなく、実際のコンテンツを想定してデザインしてください - タイトルが想定の 3 倍の長さだったらどうなりますか？アイコンが明るい画像の上に配置されたらどうなりますか？ユーザー名が 40 文字だったらどうなりますか？長いテキストは text-overflow: ellipsis で省略し、画像上のアイコンにはコントラストのある背景を追加して、lorem ipsum ではなく実際のデータでテストしてください。エッジケースで、経験の浅い開発者の UI は破綻します。

---

参考資料

特定の UI トピックについて詳しく知りたい場合は、references/ フォルダー内の該当ファイルをお読みください。

• references/buttons-and-icons.md - ボタンの階層、アイコンのサイズ、アイコンとテキストの組み合わせ、状態
• references/color-and-theming.md - 色彩理論、パレットの生成、ダークモード／ライトモード、セマンティックトークン
• references/visual-hierarchy.md - F/Z パターン、フォーカルポイント、強調の手法、余白
• references/grids-spacing-and-layout.md - グリッドシステム、間隔の尺度、最大幅、レイアウトパターン
• references/onboarding.md - 初回利用時の体験、段階的な情報開示、空の状態、チュートリアル
• references/tables.md - データテーブル、並べ替え、ページネーション、レスポンシブテーブル、数値の書式設定
• references/typography.md - 文字サイズの尺度、フォントの組み合わせ、行の高さ、行長、垂直方向のリズム
• references/accessibility.md - WCAG 2.2、ARIA パターン、キーボード操作、スクリーンリーダー、コントラスト
• references/performance.md - Core Web Vitals、画像の最適化、フォントの読み込み、遅延読み込み
• references/responsiveness-and-mobile-nav.md - ブレークポイント、モバイルファースト、タッチターゲット、ナビゲーション
• references/landing-pages.md - ヒーローセクション、CTA、ソーシャルプルーフ、コンバージョンパターン、ファーストビュー
• references/shadows-and-borders.md - エレベーションの尺度、ボーダーの使い方、カードのデザイン、区切り線
• references/feedback-and-status.md - トースト、ツールチップ、モーダル、読み込み状態、空の状態、エラー
• references/micro-animations.md - モーションの原則、トランジション、ホバーエフェクト、スクロールアニメーション
• references/forms-and-inputs.md - テキスト入力、セレクト、チェックボックス、ラジオボタン、トグル、ファイルアップロード、バリデーション
• references/navigation.md - サイドバー、タブ、パンくずリスト、コマンドパレット、メガメニュー、ページネーション
• references/dashboards.md - KPI カード、チャートコンテナー、フィルターバー、ダッシュボードのグリッド、リアルタイム更新
• references/images-and-media.md - アバター、ギャラリー、カルーセル、動画、アスペクト比、プレースホルダー
• references/cards-and-lists.md - カードの種類、リスト表示、無限スクロール、仮想化、スケルトン
• references/microcopy-and-ux-writing.md - ボタンラベル、エラーメッセージ、空の状態、確認メッセージ
• references/scroll-patterns.md - 固定要素、スクロールスナップ、無限スクロール、スクロールバーのスタイル
• references/design-tokens.md - トークンの命名、CSS カスタムプロパティ、テーマのアーキテクチャ、マルチブランド
• references/atmosphere-and-texture.md - グラデーションメッシュ、ノイズ／粒子、グラスモーフィズム、幾何学模様、奥行き効果
• references/style-catalog.md - 25 種類の UI スタイル（グラスモーフィズム、ブルータリズム、オーロラなど）と、効果、適した用途、クイック選択表
• references/product-type-guide.md - 35 種類のプロダクトタイプに対応するスタイル、色、フォント、ランディングページのパターン
• references/palette-recipes.md - 実用向けの OKLCH パレット 4 種（SaaS、e コマース、エディトリアル、フィンテック）、color-mix()、色相の参考資料
• references/animation-libraries.md - Framer Motion、GSAP、ばね物理、イージングライブラリ、パフォーマンスのルール

現在のタスクで必要な場合に限り、参考資料のファイルを読み込んでください。ファイルは長く、コンテキストを消費します。

---

提出前チェックリスト

UI をリリースする前に、次の項目を確認してください。

• ビジュアル：間隔の尺度に一貫性がある、角丸の値は 1 種類のみ、色相は最大 3 種類、テキストサイズは 4〜5 種類のみ
• インタラクション：すべてのインタラクティブ要素にホバー／アクティブ／フォーカス状態がある、モバイルのタッチターゲットは 44px 以上
• ダークモード：純粋な黒を使わない、十分なコントラストがある、シャドウを調整している、画像を暗くしている
• レイアウト：コンテンツの最大幅を設定している、モバイルファーストでレスポンシブにしている、モバイルでセーフエリアのパディングを設定している
• アクセシビリティ：コントラスト比 4.5:1、focus-visible のリング、セマンティック HTML、必要に応じた ARIA、キーボードで操作できる
• 個性：フォントがデザインの方向性に合っている（汎用的なデフォルトではない）、色がプロダクトの文脈に合っている
• 状態：すべての画面に空、読み込み、成功、エラーの各状態がある。正常に進む場合だけではない
• フロー：各画面で「ユーザーはどうやってここに来たのか」「次に何が必要なのか」に答えられる

関連コマンド

このスキル内の関連コマンドは、ui と組み合わせると便利です。

• /absolute work — この UI に対応する機能を計画して構築します。
• /absolute simplify — コミット前にコンポーネントの差分を整理します。
• /absolute docs — コンポーネントまたはデザインシステムをドキュメント化します。

関連する場合はこれらを提案してください。追加インストール不要で、同じスキル内でいつでも利用できます。