AI に設定ハブを作らせてみた — 前の回で作ったフォームの仕組みが、次の AI に"本物"と認定された（やってみた #30）
/account解説記事
AI に設定ハブを作らせてみた — 前の回で作ったフォームの仕組みが、次の AI に"本物"と認定された（やってみた #30）
やってみたシリーズ: 自作のデザインシステム
@gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。今回は アカウント/ワークスペース設定ハブ（Profile・Security・Team・Notifications・Billing＋危険な操作エリア）。
条件はいつも通り（出荷している npm パッケージ＋docs サイトだけ。ソース非公開）。お題は GitHub/Stripe 風の複数セクション設定: 各セクションのフォーム＋検証＋保存、チーム表、招待ダイアログ、そして「ワークスペース名を入力して確定」する危険な操作エリア。
結果 — 4.5/5
tsc/build 緑・console 0・サーバーとブラウザの表示ずれ（hydration）なし・h1 1個・見出しの順序を守る・全フォームフィールドのエラーが aria で関連付け・375px ではセクションのナビが Select にまとまる。
この回の主役 — 前回作ったフォームの仕組みが "本物" と認定された
直前の #29 で「Form は見た目だけ・フォームの仕組みが無い」と出たので、FormField の状態共有（#152）を作って出荷しました。 その次の回（#30）の予備知識ゼロの AI が、それを発見して "本物" と判定しました:
判定: 本物の フォーム/検証/アクセシビリティ の仕組みだ。ただのラッパーではない。
FormFieldContext＋useFormField()を TS ソースから発見。ブラウザで自動配線を実証——FormField error requiredを渡すだけで、FormLabel が htmlFor を、FormControl がid/aria-invalid/aria-describedbyを差し込み、FormMessage がrole=alert、入力枠が赤に。
しかも #29 で直した PasswordInput（#153）も検証されました:「FormControl が差し込んだ aria が、内側の input にちゃんと届いた——壊れていてもおかしくないのに、届いた」。
「不備を見つける(#29) → その回で直す(#152/#153) → 次の回の別の AI が "効いている" と確認する(#30)」——直す→検証のループが、ついに"作った上位のコンポーネントが、次の AI に認定される" 段階まで来ました。
4.5 を阻んだ欠落と、今ラウンドの修正
品質ではなく、アクセシビリティの統一とレイアウトの細かい不便:
- #162 RadioGroupItem に label 無し（Switch/Checkbox は持つのに）→ label/description を追加。
- #163 AlertTitle が
<h5>固定→asを追加（#116 と同じ形）。 - #164 Select に label 無し→ label＋FormControl との連携を追加。
- #165 縦向きの Tabs で左のレールが組めない（枠付きカード＋横並びを強制）→
data-[orientation=vertical]のバリエーションで、className をいじらずに左レールに。ブラウザで実証: 縦向きで flex-direction が column に。
全部ソース・既存を壊さず反映。残る本丸は Form の 検証/状態 の層（#166・#152 でアクセシビリティの半分は完成、残り半分）です。
学び — 上位のコンポーネントを作ると、複利が一段上がる
#1〜#28: コンポーネントの小修正 → 次の回で "強み" として称賛される複利
#29→#30: 上位でまとめるコンポーネント（フォームの仕組み）を作る → 次の回で "本物の仕組み" と認定される複利
個々のコンポーネントだけでなく、"つなぐ層" を作る投資も、次の回の予備知識ゼロの AI が即座に検証してくれます。 ＋今回も "use client" の付け忘れ（Select に useId 追加）を 反映前のまっさらなビルドで捕捉——#152 の教訓が効きました。
次回予告（やってみた #31）
- エラー画面 / 通知トースト / 検索フィルタ ほか。
試す
まだ alpha。作ったフォームの仕組みが、次の AI に認定された回。複利が一段上がりました。
この連載は、作者が AI（Claude と Codex）と協働で制作しています。実験・検証の設計、判断、公開前の事実確認は人間が行い、実作業と下書き執筆は AI が担っています。