extension-ui

拡張機能の UI

🚀 プレミアムにアップグレード https://app.extensionbooster.net/dashboard/services/extension-ai-kit からプレミアム版を入手できます。

プロフェッショナルで洗練された Chrome 拡張機能のインターフェースを構築します。説明するだけではなく、ワークフローを実行してください。

ワークフロー（実行してください）

ステップ 1：コンテキストを検出する

1. フレームワークを確認します：package.json → React / Vue / Svelte / Vanilla
2. 既存の UI ファイルを確認します：ポップアップ、サイドパネル、オプション、コンテンツスクリプト
3. Tailwind / shadcn / DaisyUI がすでに設定されているか確認します
4. 拡張機能の種類を特定します：ポップアップのみ、サイドパネル、オプションページ全体

ステップ 2：既存の UI を分析する

UI ファイルがある場合：

• コンポーネントファイルを読み、レイアウト、余白、色の使い方を確認します
• ダークモードへの対応状況を確認します（prefers-color-scheme または class="dark"）
• アクセシビリティを確認します：セマンティック HTML、aria-label、フォーカス管理
• Chrome のデザイン言語との整合性を確認します

調査結果を報告します：優れている点、改善が必要な点、優先度の高い修正事項。

ステップ 3：UI スタックを推奨する

フレームワーク	推奨スタック
React	shadcn/ui + Tailwind（最も優れたコンポーネント品質）
React（最小構成）	Tailwind のみ + カスタムのコンパクトなテーマ
Vue	DaisyUI + Tailwind
Svelte	Tailwind + svelte-headlessui
Vanilla	CSS 変数を使ったカスタム CSS

ステップ 4：改善を実装する

優先度の高い順に修正を適用します。

1. ダークモード対応（必須 — 多くのユーザーがダークモードを使用します）
2. 適切なサイズ制約（references/extension-ui-constraints.md を参照）
3. 小さな画面に適したタイポグラフィと余白
4. アクセシビリティの修正（キーボード操作、aria、フォーカス）
5. 読み込み／エラー／空の状態
6. アニメーション（控えめで、速く、目的に沿ったもの）

---

拡張機能 UI の制約（概要）

表示領域	サイズ	主な制約
ポップアップ	最大 800x600px	外側をクリックすると閉じる、サイズ変更不可
サイドパネル	幅 320-400px	全高、表示を維持
オプションページ	タブ全体	標準的なウェブページ
コンテンツスクリプト UI	注入型	Shadow DOM による CSS の分離

詳細：references/extension-ui-constraints.md

---

ダークモード（必須）

常にダークモードを実装してください。拡張機能はライトとダークの両方のブラウザテーマで使われます。

/* CSS variables approach */
:root {
  --bg: #ffffff;
  --text: #111827;
  --border: #e5e7eb;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1f2937;
    --text: #f9fafb;
    --border: #374151;
  }
}

ユーザー設定による上書き値は chrome.storage.sync に保存します。

---

小さな画面向けのタイポグラフィ

• 基本フォント：システムフォントスタック — カスタムフォントは使用しません（バンドルサイズと描画速度のため）
• ポップアップの基本サイズ：13-14px（はみ出さずに読みやすいサイズ）
• 行の高さ：1.4-1.5（ウェブの標準より詰めます）
• フォントの太さ：400（本文）、500（ラベル）、600（見出し）

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

---

カラーパレット（Chrome に準拠）

• プライマリ：#1a73e8（Google Blue）またはブランドカラー
• サーフェス：#ffffff / ダークモードでは #1f2937
• 境界線：#dadce0 / ダークモードでは #374151
• テキスト（プライマリ）：#202124 / ダークモードでは #f9fafb
• テキスト（セカンダリ）：#5f6368 / ダークモードでは #9ca3af
• 成功：#34a853、エラー：#d93025、警告：#fbbc04

---

アニメーション

• 継続時間：100-200ms（ポップアップが瞬時に感じられる長さ）
• イージング：表示時は ease-out、終了時は ease-in
• レイアウトを発生させるアニメーションは避けます（transform、opacity のみ）
• 常に prefers-reduced-motion を尊重します

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
  }
}

---

アクセシビリティチェックリスト（簡易版）

• Tab キーの移動順序が論理的で、すべての操作可能な要素に到達できる
• アイコンのみのボタンには aria-label がある
• 色のコントラスト比が最低 4.5:1 である
• フォーカスが視認できる（:focus-visible が削除されているだけの状態ではない）
• セマンティック HTML を使用する（div ではなく button、ナビゲーションには nav）

完全版のチェックリスト：references/accessibility-checklist.md

---

参考資料

• references/extension-ui-constraints.md — サイズ制限、サーフェスごとのレイアウトパターン
• references/design-system-setup.md — shadcn/ui、DaisyUI、Tailwind のセットアップ
• references/ux-patterns.md — 読み込み、エラー、空の状態、オンボーディング
• references/accessibility-checklist.md — a11y の要件とテストの全項目

関連スキル

• extension-create — フレームワークを選択して新しい拡張機能をひな形から作成
• extension-analyze — 既存の拡張機能のコードベースを分析
• extension-assets — アイコン、画像、アセットの最適化