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

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。#1〜#6 データテーブル に続いて、今回は⁠コマンドパレット（⌘K）⁠——パワーユーザー向けの定番です。

条件は同じ（出荷しているパッケージそのもの＋docs だけを渡し、ソースは非公開、TooltipProvider の巻き方などのヒントも与えない）。お題は、⌘K（と Ctrl+K）で開くパレット、入力での絞り込み、グループ分けされたコマンド（Navigation / Actions / Settings）、アイコン、ショートカットの表示、矢印キー＋Enter でのキーボード操作、選ぶと閉じてトースト、まで。

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

npm run build 成功。ページはビルド時に静的生成され、⁠読み込み時のコンソールエラーは0⁠。⌘K で開く・入力で絞り込む・↑↓で移動・Enter で実行・Esc で閉じる、すべて動きました。

予備知識ゼロの AI が見つけたのは、低レベルの Command だけではありませんでした。⁠データを渡すだけで動く、高レベルの CommandPalette⁠ も見つけています。

groups という⁠型のついた prop を1つ渡すだけ⁠で、検索入力・グループ分け・アイコン・ショートカット表示・キーボード操作・Esc で閉じる動作が、全部そろって出てくる。

そして今回も:

⁠パレット自体に provider は不要——確認できた。⁠ 自前でポップアップ表示もフォーカス管理もこなす。<TooltipProvider> も要らない。⁠サーバー側の事前描画（SSR）でのクラッシュもなし。⁠

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

粗さ — アクセシビリティを売りにするライブラリから、そのアクセシビリティの警告が出た

ビルドは止まりませんが、開発中にこの警告が出ました:

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

CommandDialog は、画面に見えない読み上げ専用の Title は置くのに、⁠その説明にあたる Description（aria-describedby）を欠いています⁠（Command.tsx:59）。開発時だけの警告でビルドは止まりませんが——⁠「アクセシビリティ内蔵」を売りにしているのに、自分のダイアログでそのアクセシビリティ警告が出る⁠のは見過ごせません。スクリーンリーダーがダイアログの説明を読み上げられない、ということです。→ #57

正直、これは耳が痛い指摘です。でも、予備知識ゼロの AI に作らせるテストの価値はまさにここ——⁠「アクセシビリティ内蔵」を主張で終わらせず、実際に動かして、自分の主張が破れている場所を見つける⁠ことにあります。盛らない、隠さない。

ほかにも:

• ⁠docs のコード例が、機械的に取得すると本文に出てこない⁠（既出 #50）
• Command/CommandPalette/Table などに w-[Npx] w-full という重複したクラス（後ろが優先されるので無害ですが、複数のコンポーネントに残っていて掃除の対象）

学び

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

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

次回予告（やってみた #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 歓迎。