#15スコア 3/5基盤UI・汎用

AI に通知センターを作らせてみた — primitives は枯れた。loop は"上"へ移った（やってみた #15）

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

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

解説記事

AI に通知センターを作らせてみた — primitives は枯れた。loop は"上"へ移った（やってみた #15）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。今回は 通知センター / アクティビティフィード。

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

今回は1つ仮説を確かめにいった: 「primitives はもう枯れたのでは？」——これまで毎回出た新 class が、低レベル部品では出なくなったのでは、と。

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

tsc クリーン・next build 緑・コンソールエラー0・hydration mismatch なし・375px overflow 0。

仮説は当たった。 cold AI の所見が象徴的:

低レベルの primitives（Timeline/Avatar/Badge/EmptyState/Skeleton/Card）は明確に安定。composing で fresh な primitive バグはゼロ。

Timeline は <ol>/<li> セマンティクスで marker slot に型アイコンが入り、Avatar は fallback がきれい、相対時刻の hydration 罠も primitives 側には無い。この層は production 級。

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

新 class は予測どおり2箇所に集中した。

① また名前負け（3例目）。 NotificationCenter は名前は activity center だが実体は header の bell dropdown。型 {id,title,description,timestamp,read} が薄く、type/avatar/actor が無いので feed 行を表現できない（rich item を title 文字列に潰すしかない）→ #85。#13 OnboardingFlow・#14 PricingTemplate と同じ系統。

② a11y がまた破れた（3度目）。 通知行が <div onClick> で、キーボード/SR で起動できない（#57 CommandDialog・#71 RadioGroup に続く）→ #83。

③ 新 class: インストール story。 @import "@gunjo/ui/styles" が Turbopack dev で全ルート 500（build は通る dev 限定）。adoption docs が CSS 形を無警告で推奨していた → #84。コンポーネントが正しくても、最初の npm run dev で詰む。

直した

  • #83 a11y → 行を実 <button> 化（Enter/Space 起動・focus リング）＋mark-read をネスト解消＋重複幅整理。land（PR #86）。実ブラウザで「行が button・focusable」を検証。
  • #84 install → adoption docs に Turbopack caveat（JS import 推奨）。同 PR で land。
  • #85 名前負け → #13/#14 と束ねて beta ゲートで横断整理（型のデータ駆動化＋スコープ明文化）。

学び — "枯れ" は層ごとに来る

primitives 層: #5 以降クラッシュ/provider 再発ゼロ → #15 で「fresh バグ0」確定 ＝ 枯れた
上位 "named" 部品: #13/#14/#15 で毎回「名前負け」＝ まだ
インストール/衛生: #79 依存・#84 styles ＝ 新しい loop
a11y: #57/#71/#83 ＝ class 単位でまだ出る

loop-until-dry の "dry" は、一枚岩じゃない。 低レベルは枯れた。残る主戦場は**「上位部品のデータ駆動化」と「パッケージ/インストール衛生」**——どこが枯れて、どこがまだかを、画面で1つずつ確かめてきた結果がこれ。低い点ほど誠実。

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

  • Editor / Error画面 / 検索結果 ほか。上位部品とインストール story を中心に。

試す

まだ alpha。primitives は枯れた、上位と衛生はこれから——層ごとの "枯れ" を、隠さず出す。

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

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

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

AvatarAvatarFallbackAvatarImageBadgeButtonCardCardContentEmptyStateNotificationNotificationCenterSkeletonTimelineTimelineDescriptionTimelineItemTimelineTimeTimelineTitle

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

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