#26スコア 4/5基盤UI・汎用

AI に受信トレイ（メール一覧＋詳細）を作らせてみた — フレームは強い、でも"選べるリスト"が無い（やってみた #26）

ルート: /inbox
デスクトップ表示
モバイル表示

375px のビューポートで撮影。縦長のページはフレーム内をスクロールします。

解説記事

AI に受信トレイ（メール一覧＋詳細）を作らせてみた — フレームは強い、でも"選べるリスト"が無い（やってみた #26）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。今回は 受信トレイ（webmail 風の list-detail）。

条件はいつも通り（出荷物の npm パッケージ＋docs サイトだけ。ソース非公開）。お題は、フォルダのサイドバー（未読数つき）・メッセージ一覧（送信者・件名・抜粋・未読・スター・選択・一括操作）・詳細ペイン（本文＋返信ツールバー）・desktop は分割／mobile は一覧↔詳細を戻るボタンで切替・空状態・skeleton。#15 通知センターや #16 エディタとは別の「マスター詳細」合成。

結果 — 4/5

tsc/build 緑・console 0・h1 1個・listbox で aria-selected・未読は太字＋アクセントバー＋sr-only "Unread"（色だけでない）・375px overflow 0・list↔detail の戻るボタン・dark mode 完全。

フレームは強い: Sidebar/SidebarItem（count＝未読バッジ）・Resizable（キーボード操作可能な splitter・role=separator・矢印キーでリサイズ）・ScrollArea・Sheet（mobile drawer）・Checkbox/Toggle（star は aria-pressed）・TooltipButton。

そして前ラウンドの修正がまた即効:

Badge as="span"（#128・前回）でラベルをインライン化、EmptyState headingLevel（#104）で見出し階層維持、Tooltip self-provider（#52）で provider 不要。

直した穴が、毎回 次の画面で武器になってる。

でも 4/5 を阻んだ — "選べるリスト"が無い

① 選択可能な list primitive が無い（#135・Major）。 List/ListItem は presentational マーカー（dot/check/number）のみ——selected/onSelect/role/キーボード無し、しかも ListItem が children を text-sm text-muted-foreground で強制ラップするのでリッチな行が入らない（docs も「interaction は Checkbox/Toggle で組め」と明記）。inbox の核（listbox/option/aria-selected/roving tabindex/矢印キー）を全部手巻きした。

② Resizable の size が px 既定（#133・near-blocking）。 maxSize={55} が pane を 55px に潰す（react-resizable-panels@4 は bare number=px）。docs は number とだけ書いて px/% 無記載＝エラー無しの沈黙の崩れ。"38%" 文字列で回避。

今ラウンドの修正

  • #133: ResizablePanel が bare number を % に coerce（number＝％の直感に合わせる・px は "200px" 文字列）。
  • #134: SidebarItem の未読 count を button の accessible name に関連付け（"Inbox 4"→"Inbox, 4"）＋countLabel prop（"4 unread"）。可視数字は aria-hidden。

選べるリスト(#135)・master-detail 合成(#136)は beta ゲート（新部品）。

学び — 「フレーム」と「中身のリスト」は別

フレーム（Sidebar/Resizable/ScrollArea/Sheet/Toolbar）→ 揃ってる・強い
中身（選択可能なリスト行＋master-detail）→ 無い。list-detail 画面の核がこっち

inbox・検索結果・ファイル一覧・管理テーブル——「選べるリスト」は list-detail 系すべての核。フレームが強いほど、この primitive の不在が際立つ。a11y は手巻きで完璧に組めたが、それを DS が持つべき。

次回予告（やってみた #27）

  • エラー画面 / カレンダー予定表 / 設定ウィザード ほか。選べるリストと合成を引き続き。

試す

まだ alpha。フレームは強い、次は"選べるリスト"。回すほど、核になる primitive が見える。

<!-- 公開前: 相互URL差込／スクショ確定／EN(dev.to)ミラー -->

使用した @gunjo/ui コンポーネント

この画面のソースが直接 import している部品です。

AvatarAvatarFallbackBadgeButtonCheckboxEmptyStateResizableHandleResizablePanelResizablePanelGroupScrollAreaSearchInputSeparatorSheetSheetContentSheetDescriptionSheetTitleSidebarItemSkeletonTabsTabsListTabsTriggerToggleTooltipButton

cold AI が組み上げた実コード

ファイル名をクリックでソースを展開できます。