AI に ⌘K コマンドパレットを作らせてみた（やってみた #7）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。#1〜#6 データテーブル に続いて、今回は**⌘K コマンドパレット**——パワーユーザー向けの定番。

条件は同じ（出荷物そのもの＋docs だけ、ソース非公開、provider ヒントなし）。お題は、⌘K（と Ctrl+K）で開くパレット、検索フィルタ、グループ分けされたコマンド（Navigation / Actions / Settings）、アイコン、ショートカットヒント、矢印キー＋Enter のキーボード操作、選択で閉じてトースト。

結果 — 4.5/5（最高点タイ）

npm run build 成功、static prerender、ロード時コンソールエラー0。⌘K で開く・入力で絞り込み・↑↓で移動・Enter で実行・Esc で閉じる、すべて動作。

cold AI が見つけたのは低レベルの Command だけじゃなく、データ駆動の高レベル CommandPalette。

groups という型付きの prop 一発で、検索入力・グループ・アイコン・ショートカットヒント・キーボード操作・Esc 閉じが全部出る。

そして今回も:

パレット自体に provider 不要——確認。 self-portal・self-focus。<TooltipProvider> も要らない。SSR クラッシュなし。

{ id, label, icon, shortcut, action } の配列を渡すだけ、と。設計が良い。

粗さ — a11y を謳うライブラリの、a11y 警告

build は止まらないが、開発時にこの警告が出た:

Warning: Missing `Description` or `aria-describedby={undefined}` for {DialogContent}.

CommandDialog が sr-only の Title は置くのに、Description/aria-describedby を欠いている（Command.tsx:59）。dev-only・非ブロッキングだけど——「a11y 内蔵」を売りにしているのに、自分のダイアログに a11y 警告が出るのは、見過ごせない。スクリーンリーダーがダイアログの説明を読めない。→ #57

正直、これは耳が痛い穴です。でもコールドテストの価値はここ——「a11y 内蔵」を主張で終わらせず、実際に動かして、自分の主張が破れている箇所を見つける。盛らない、隠さない。

ほかに:

• docs のコード例が fetch に映らない（既出 #50）
• Command/CommandPalette/Table などに w-[Npx] w-full の重複クラス（後者が勝つので無害だが、複数コンポーネントに残る掃除対象）

学び

AI に使わせる → 主張が破れている箇所が出る → 直す → また使わせる

#7 は、売り文句（a11y 内蔵）と実態のズレを炙り出した。CommandPalette の出来は素晴らしい（4.5点）——でも同じダイアログに a11y 警告が残っていた。良いところと、主張が追いついていないところを、同じ画面が同時に見せる。 それを全部スコアボードに正直に足していく。

次回予告（やってみた #8・シリーズ一旦の区切り）

• 空状態・スケルトン・トースト（EmptyState / Skeleton / Toast）— 誰も作らないのに全員要る "states"。これで主要カテゴリを一周。

試す

• gunjo.jp ／ npm @gunjo/ui ／ GitHub
• 前回まで: #1 / #2 / #3 / #4 / #5 / #6
• 母艦: 群青（@gunjo/ui） ／ なぜ要るのか: AI 時代のデザインシステム論
• GunjoUI by UIXHERO

まだ alpha、粗削りな青。主張が破れていたら、そこも直します。Issue 歓迎。

---

<!-- 公開前: #57 反映後に記述更新／スクショ確定／相互URL差込／EN(dev.to)ミラー -->