AI に設定ハブを作らせてみた — 前の回で作った form system が、次の AI に"本物"と認定された（やってみた #30）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。今回は アカウント/ワークスペース設定ハブ（Profile・Security・Team・Notifications・Billing＋danger zone）。

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

結果 — 4.5/5

tsc/build 緑・console 0・hydration なし・h1 1個・見出し順守・全フォームフィールドの error が aria で関連付け・375px は section nav が Select に collapse。

この回の主役 — 前回作った form system が "本物" と認定された

直前の #29 で「Form は見た目だけ・form system が無い」と出て、私は FormField context（#152）を作った。 その次の回（#30）の cold AI が、それを発見して "本物" と判定した:

VERDICT: a real form/validation/a11y system. It is NOT dumb wrappers. FormFieldContext ＋ useFormField() を TS ソースから発見。ブラウザで auto-wiring を実証——FormField error required を渡すだけで、FormLabel が htmlFor、FormControl が id/aria-invalid/aria-describedby を注入、FormMessage が role=alert、入力枠が赤に。

しかも #29 で直した PasswordInput（#153）も検証:「FormControl が注入した aria が inner input にちゃんと届いた——壊れててもおかしくないのに、届いた」。

「穴を見つける(#29) → その回で直す(#152/#153) → 次の回の別の AI が "効いてる" と確認する(#30)」——fix→検証ループが、ついに**"作った上位 primitive が次の AI に認定される"** 段階まで来た。

4.5 を阻んだ穴と、今ラウンドの修正

品質でなく a11y の統一と layout の papercut:

• #162 RadioGroupItem に label 無し（Switch/Checkbox は持つのに）→ label/description 追加。
• #163 AlertTitle が <h5> 固定→ as 追加（#116 同型）。
• #164 Select に label 無し→ label＋FormControl 連携。
• #165 縦 Tabs が左レールを組めない（bordered card＋横並び強制）→ data-[orientation=vertical] 変種でclassName 手術なしの左レールに。ブラウザ実証: 縦で flex-direction が column に。

全部 src・非破壊で land。残る本丸は Form の validation/state 層（#166・#152 で a11y 半分は完成、残り半分）。

学び — 上位 primitive を作ると、複利が一段上がる

#1〜#28: 部品の小修正 → 次の回で "強み" として称賛される複利
#29→#30: 上位協調 primitive(form system)を作る → 次の回で "本物のシステム" と認定される複利

個々の部品だけでなく、"つなぐ層" を作る投資も、次の回の cold AI が即検証してくれる。 ＋今回も "use client" 漏れ（Select に useId 追加）を land 前の clean build で捕捉——#152 の教訓が効いた。

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

• エラー画面 / 通知トースト / 検索フィルタ ほか。

試す

• gunjo.jp ／ npm @gunjo/ui ／ GitHub
• 前回まで: #1〜#29
• GunjoUI by UIXHERO

まだ alpha。作った form system が次の AI に認定された回。複利が一段上がった。