AI に通知センターを作らせてみた — 基本コンポーネントは枯れた。次の課題は"上の層"へ移った（やってみた #15）

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。今回は ⁠通知センター / アクティビティフィード⁠。

条件は同じ（出荷しているパッケージそのもの＋docs だけ、ソース非公開）。お題は /notifications に、種別つきの通知列（mention/comment/reaction/system）、アバター、相対時刻、既読/未読＋未読バッジ、全件既読、時間ごとのグループ分け、空状態、スケルトン。

今回は⁠1つ仮説を確かめにいきました⁠: 「基本コンポーネントは、もう粗さが出尽くしたのでは？」——これまで毎回出ていた新しい種類の問題が、低レベルのコンポーネントでは出なくなったのでは、と。

結果 — 3/5（最低点タイ）

tsc クリーン・next build 緑・コンソールエラー0・サーバーとブラウザの表示ずれ（hydration mismatch）なし・375px でのはみ出し0。

⁠仮説は当たりました。⁠ 予備知識ゼロの AI の所見が象徴的です:

低レベルの基本コンポーネント（Timeline/Avatar/Badge/EmptyState/Skeleton/Card）は明らかに安定している。⁠組み合わせて使っても、新しく出るコンポーネントのバグはゼロ⁠。

Timeline は <ol>/<li> の構造で、印のスロットに種別アイコンが入る。Avatar は代替表示がきれい。相対時刻の「サーバーとブラウザでずれる」罠も、基本コンポーネント側には無い。⁠この層はもう実運用レベルです⁠。

でも点が低い理由 — 課題は"上の層"と"インストール"へ移った

新しい種類の問題は、予測どおり⁠2箇所に集中しました⁠。

⁠① また名前負け（3例目）。⁠ NotificationCenter は名前こそ「アクティビティセンター」ですが、中身は ⁠ヘッダーのベルのドロップダウン⁠でした。型 {id,title,description,timestamp,read} が薄く、種別・アバター・実行者が無いので、フィードの1行を表現できない（内容の濃い項目を、タイトルの文字列に押し込むしかない）→ #85。⁠#13 OnboardingFlow・#14 PricingTemplate と同じ種類です⁠。

⁠② アクセシビリティがまた破れた（3度目）。⁠ 通知の行が <div onClick> で、⁠キーボードやスクリーンリーダーから起動できません⁠（#57 CommandDialog・#71 RadioGroup に続く）→ #83。

⁠③ 新しい種類: 導入時のつまずき。⁠ @import "@gunjo/ui/styles" が ⁠Turbopack の開発サーバーで全ルート 500 エラー⁠（build は通る、開発時だけの問題）。導入ドキュメントが、この CSS の書き方を注意書きなしで勧めていました → #84。⁠コンポーネントが正しくても、最初の npm run dev で詰まってしまう⁠、というつまずきです。

直した

• ⁠#83 アクセシビリティ⁠ → 行を本物の <button> に（Enter/Space で起動・フォーカスリング）＋既読ボタンの入れ子を解消＋重複した幅指定を整理。⁠反映（PR #86）⁠。実ブラウザで「行がボタンで、フォーカスできる」ことを検証。
• ⁠#84 導入⁠ → 導入ドキュメントに Turbopack での注意書きを追加（JS からの import を推奨）。同じ PR で反映。
• ⁠#85 名前負け⁠ → #13/#14 と束ねて、⁠beta ゲートでまとめて整理⁠（型をデータで動く形にする＋担当範囲を明文化）。

学び — "出尽くし" は、層ごとにやってくる

基本コンポーネントの層: #5 以降クラッシュ/provider の再発ゼロ → #15 で「新規バグ0」確定 ＝ 出尽くした
上位の "名前つき" コンポーネント: #13/#14/#15 で毎回「名前負け」＝ まだ
インストール/衛生: #79 依存・#84 styles ＝ 新しい課題
アクセシビリティ: #57/#71/#83 ＝ 種類ごとにまだ出る

⁠「出尽くすまで回す」の "出尽くした" は、一枚岩ではありません。⁠ 低レベルは出尽くした。残る主戦場は⁠「上位コンポーネントをデータで動く形にすること」と「パッケージ/インストールの衛生」⁠——どこが出尽くして、どこがまだかを、画面で1つずつ確かめてきた結果がこれです。低い点ほど誠実。

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

• ⁠Editor / エラー画面 / 検索結果⁠ ほか。上位コンポーネントと導入まわりを中心に。

試す

• ⁠gunjo.jp⁠ ／ npm @gunjo/ui ／ ⁠GitHub⁠
• 前回まで: #1〜#14
• まとめ記事: 群青（@gunjo/ui） ／ なぜ要るのか: AI 時代のデザインシステム論
• ⁠GunjoUI by UIXHERO⁠

まだ alpha。基本コンポーネントは出尽くした、上位と衛生はこれから——層ごとの "出尽くし" を、隠さず出します。