基盤UI・汎用のコールドテスト — 連載最初の30画面で群青の床を測る

`@gunjo/ui` を作るとき、僕は「**AI から使えるように設計した**」と書きました。typed entry point、機械可読メタデータ、AI-handoff ドキュメント——エージェントが「眺める」のではなく「読んで、使う」ための面を最初から組み込んだ、と。

[前回](#)と同じ条件です。この文脈をまったく知らない AI エージェント1体に、**公開済みの npm `@gunjo/ui`（alpha.2）と [gunjo.jp](https://gunjo.jp) の docs だけ**を渡す。ソースリポジトリは見せない。まっさらな Next.js（React 19 / Tailwind v4）で、`npm run build` が通るところまで自力で。

条件は毎回同じ。文脈ゼロの AI に、**公開済みの npm `@gunjo/ui`（alpha.2）と [gunjo.jp](https://gunjo.jp) の docs だけ**を渡す。ソースは見せない。まっさらな Next.js（React 19 / Tailwind v4）で `npm run build` が通るまで自力で。

gunjo のチャートは SVG じゃなく **HTML/CSS のレイアウトプリミティブ**で作ってある。狙いは「**任意のデータで崩れないこと**」。固定された綺麗なサンプルじゃなく、現実の汚いデータ——桁違いのスケール、外れ値、ゼロ、極小値——を入れても破綻しない、を担保したい。

今回は条件を1つだけ変えた。**渡すパッケージを、出荷物そのもの（直前まで直していた最新版）にした。** #3 で見つけた systemic な穴——`Tooltip` を使う ~28 コンポーネントが provider 無しで SSR クラッシュする問題（[#52](https://github.com/uixhero/gunjo/issues/52)）——を直した版です。条件は相変わらず「**パッケージ＋docs だけ・ソースは見せない**」。そして今回は **「TooltipProvider で包め」というヒントを、あえて渡さなかった。**

条件は同じ。**出荷物そのもの（#52/#53 修正入り）＋docs だけ、ソースは見せない、provider のヒントも渡さない。** お題は、名前・ロール・ステータス・参加日・MRR を持つ ~16 行の**ユーザー一覧**に、テキスト検索＋ステータスの Select フィルタ＋列ソート＋ページネーション＋ステータス Badge。

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

条件は同じ（出荷物そのもの＋docs だけ、ソース非公開）。お題は `/inbox` に、ローディング（Skeleton）／空（EmptyState）／一覧（Card）の3状態を切り替えられる UI ＋アクションでトースト。

#8 のあと「穴が枯れ始めた」と書きかけた。でも——**それは早とちりだった**。バグの "種類" は収束してきたけど、**画面のカバレッジが全然足りてない**。特に**インタラクションが重い画面**は一度も通してない。そこに新しい穴が潜む。だから複雑系から再開する。

条件は同じ（出荷物そのもの＋docs だけ、ソース非公開）。お題は `/upload` に、ドロップゾーン、選択ファイル一覧（名前・サイズ・型・削除）、**ファイルごとの進捗バー**、全体の Upload all／空状態。

条件は同じ（出荷物そのもの＋docs だけ、ソース非公開）。お題は `/booking` に、日付選択（過去日・満席日を無効）、時間スロット、サービス選択、氏名/メール、確定するとサマリーに反映。日付・時刻まわりは hydration やロケールの罠が多い複雑系。

条件は同じ（出荷物そのもの＋docs だけ、ソース非公開）。お題は `/chat` に、メッセージ列（送信者・アバター・時刻・自分/相手の見分け）、入力 composer（Enter 送信）、送信後の「typing…」→返信シミュレート、空状態。

条件は同じ（出荷物そのもの＋docs だけ、ソース非公開）。お題は `/onboarding` に、5ステップ（Welcome → プロフィール入力 → 設定 → チーム招待 → 完了）、ステップインジケータ、Back/Next、**各ステップが妥当になるまで Next を止める**、完了サマリ。

条件は同じ（出荷物そのもの＋docs だけ、ソース非公開）。お題は `/pricing` に、3〜4 プランのカード（"Most popular" 強調）、月額/年額トグル（年額は割引・価格がライブ更新）、feature リスト（✓/✗）、比較表、FAQ。

条件は同じ（出荷物そのもの＋docs だけ、ソース非公開）。お題は `/notifications` に、種別つき通知列（mention/comment/reaction/system）、アバター、相対時刻、既読/未読＋未読バッジ、mark-all-read、時間グルーピング、空状態、skeleton。

条件は同じ（出荷物そのもの＋docs だけ、ソース非公開）。お題は `/editor` に、メニューバー＋ツールバー、パンくず、左のファイルツリー、中央のタブ＋エディタ、右パネル、下のステータスバー。

条件は同じ（出荷物そのもの＋docs だけ、ソース非公開）。お題は `/search` に、検索バー＋結果件数、フィルタ（カテゴリ checkbox・種別 Combobox・タグ）、アクティブフィルタチップ、ソート、結果カード、ページネーション、loading→結果→空状態。

条件は同じ（出荷物そのもの＋docs だけ、ソース非公開）。お題は `/profile` に、ヘッダー（アバター・名前・bio・統計）、フォロー/編集、Tabs（Posts/About/Activity）、About（メタデータ）、Activity（タイムライン）、編集フォーム（モーダル＋バリデーション）。

条件は同じ（出荷物そのもの＋docs だけ、ソース非公開）。お題は `/settings/notifications` に、チャンネル別（Email/Push/SMS/In-app）のマスター＋個別トグル、通知レベルの RadioGroup、ダイジェスト頻度の Select、Quiet hours の TimePicker、保存/破棄＋未保存インジケータ。

条件は同じ（出荷物そのもの＋docs だけ、ソース非公開）。お題は `/dashboard-empty` に、ようこそ Banner、ゼロ値の Statistic、空データのチャート、オンボーディング・チェックリスト（Progress）、空のアクティビティ（EmptyState）、フルページ StatusScreen。

条件は同じ（出荷物そのもの＋docs だけ、ソース非公開）。お題は `/blog/post` に、パンくず・タイトル・著者・タグ、目次、h2/h3 の本文、リスト、引用、複数の CodeBlock、callout、関連記事。

条件はいつも通り（出荷物の npm パッケージ＋docs サイトだけ。ソース非公開）。お題は、ナビ・ヒーロー（h1＋CTA）・ロゴクラウド・特徴グリッド・指標バンド・お客様の声・価格3プラン・FAQ・最終CTA・フッターの全部入りランディング。

条件はいつも通り（出荷物の npm パッケージ＋docs サイトだけ。ソース非公開）。お題は、上部ナビ＋検索（⌘K）、左サイドバー（グループ化されたナビ・モバイルでドロワー）、パンくず、本文（h1＋クイックスタートの CodeBlock＋callout＋特徴リスト）、右の「On this page」TOC、prev/next、フッター。

条件はいつも通り（出荷物の npm パッケージ＋docs サイトだけ。ソース非公開）。お題は、サイドバー＋トップバーのシェルに、**KPI 行・データテーブル（ステータス badge・行選択・一括アクション・行メニュー・ソート・ページネーション）・複合フィルタ・編集 Sheet・空状態・loading・toast**。#4（チャート）/#6（素の table）とは別の、**重い「データ操作」合成**を突いた。

条件はいつも通り（出荷物の npm パッケージ＋docs サイトだけ。ソース非公開）。お題は、月/年トグル（価格が実際に変わる）・3〜4プランカード（1つを「おすすめ」強調）・**機能比較マトリクス（行=機能・列=プラン・✓/✗/値）**・FAQ・最終 CTA。

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

条件はいつも通り（出荷物の npm パッケージ＋docs サイトだけ。ソース非公開）。お題は Google カレンダー風の週ビュー: ツールバー（週移動・Day/Week/Month 切替・新規）・7日×時間軸グリッド・終日レーン・**イベントブロック（開始/終了から配置・重なりは side-by-side・カテゴリ色）**・現在時刻ライン・イベント詳細 Popover・空きスロットで作成 Dialog・375px は単日/アジェンダに collapse。

条件はいつも通り（出荷物の npm パッケージ＋docs サイトだけ。ソース非公開）。お題は、フォルダツリー＋パンくず＋検索/ツールバー＋**グリッド/リスト切替**のファイル一覧＋**右クリックメニュー**＋インライン rename＋プレビューペイン＋空状態。

条件はいつも通り（出荷物の npm パッケージ＋docs サイトだけ。ソース非公開）。お題は「ワークスペース作成」4ステップ: アカウント→組織→設定→確認。**Next 押下で必須/形式を検証→ブロック→インラインエラー表示→最初の不正フィールドへフォーカス移動**、確認ステップで Edit ジャンプ＋規約同意で submit。**フォームのバリデーション軸**を初めて深く突いた。

条件はいつも通り（出荷物の npm パッケージ＋docs サイトだけ。ソース非公開）。お題は GitHub/Stripe 風の複数セクション設定: 各セクションのフォーム＋検証＋保存、チーム表、招待ダイアログ、そして「ワークスペース名を入力して確定」する danger zone。