using-ui-stack

UI Stack の使用

生成するすべての UI コンポーネントに、体系化されたデザインシステムを適用してください。これにより、パディングの不統一、色の不一致、ホバー状態の設定漏れを防げます。

デザインシステムの原則

作成するすべてのコンポーネントで、以下のルールに従ってください。

スペーシング — 8px グリッド

すべてのスペーシング（パディング、マージン、間隔）に 8 の倍数を使用します。

• 4px — 内部の狭いパディングにのみ使用
• 8px — インラインの間隔、アイコン間のスペース
• 16px — 標準的なパディング、カード間の間隔
• 24px — セクションのパディング
• 32px — 大きなセクション間の間隔
• 48px / 64px — ページレベルの間隔

色 — 60-30-10 の法則

• 60% ニュートラル／背景色
• 30% ブランドのプライマリカラー
• 10% CTA とハイライト用のアクセントカラー
• セマンティックカラー：成功（緑）、警告（アンバー）、エラー（赤）、情報（青）
• ダークモードでは純粋な黒（#000）を使わず、slate-950 などを使用

タイポグラフィ — 1.25 比率のスケール

text-xs:   12px / 16px
text-sm:   14px / 20px
text-base: 16px / 24px
text-lg:   18px / 28px
text-xl:   20px / 28px
text-2xl:  24px / 32px
text-3xl:  30px / 36px
text-4xl:  36px / 40px

• 見出し：font-semibold または font-bold
• 本文：font-normal、行の高さは 1.5～1.75
• 等幅フォント：コード、ID、数値データに使用

ダークモード

すべてのカラー・トークンに、ライトモードとダークモードの完全な対応付けを用意します。

• 背景：white → slate-950。black は使用しない
• テキスト：slate-900 → slate-100
• 枠線：slate-200 → slate-800

5 つのインタラクション状態

すべてのインタラクティブ要素に、以下を設定する必要があります。

1. デフォルト — 基本の表示
2. ホバー — 控えめな色の変化または影
3. アクティブ／押下 — わずかに暗くする、または縮小する
4. フォーカス — 視認できるリング（ring-2 ring-offset-2）
5. 無効 — 不透明度を下げ、cursor-not-allowed を設定

アクセシビリティ

• テキストのコントラスト比は 4.5:1 以上、大きなテキストは 3:1 以上
• タッチターゲットは 44×44px 以上
• セマンティック HTML（div ではなく button、nav、main など）
• キーボードで操作可能にする — すべての操作を Tab／Enter／Escape キーで実行できること
• アニメーションでは prefers-reduced-motion を尊重する

アニメーション

• マイクロインタラクションの持続時間：150～300ms
• イージング：表示には ease-out、終了には ease-in
• 動きを motion-safe: で囲むか、prefers-reduced-motion を確認する

オーバーレイの Z-index スケール

dropdown:  z-10
sticky:    z-20
overlay:   z-30
modal:     z-40
toast:     z-50
tooltip:   z-60

ワークフロー

1. UI を生成する前に、プロジェクトに ui-stack 設定またはデザイントークンがあるか確認します
2. ない場合は、上記のデフォルトを適用します
3. すべてのコンポーネントについて、スペーシングが 8px グリッドに沿っていること、色が 60-30-10 の法則に従っていること、5 つのインタラクション状態がすべて存在することを確認します
4. クラス／属性を切り替えてダークモードをテストし、すべてのトークンが正しく対応付けられていることを確認します

参考資料

• ui-stack.dev — インタラクティブな設定ツールと完全なドキュメント
• GitHub: rashoodkhan/ui-stack — ソースリポジトリ