AI に入社オンボーディングを作らせてみた — PersonCell をまた発掘、そして Drawer の罠（やってみた #87）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。人材・採用 5枚目——入社手続き / オンボーディング管理。新入社員のタスク/チェックリスト、書類提出、手続き完了の承認。

結果 — 4/5

tsc/build 緑・375px・0 console error。新入社員一覧・フェーズ別チェックリスト・書類提出状況・手続き完了承認・ドリルイン。

観測 — PersonCell をまた手組みしなかった

PersonCell（the standout） — 手組みするかもと言われた「avatar + 氏名 + 部署/役割 + status」セル。手組みしなかった。name/secondary/tertiary/trailing/size の1部品で、新入社員行・モバイルカード・社員ヘッダー・メンターセルまで全部。日本語の姓頭文字も自動。

CheckList ＝まさにこのため。items[](label/description/checked/trailing/onCheckedChange)・各チェックに行ラベルが読み上げ名で付く。4フェーズ＋書類リストを全部これで。SignedRecord が「HR 手続き確定に remarkably on-target」＝draft→signed・canSign ゲート・ロック・監査行・追記チェーン。「100%＋書類提出まで確定不可」が canSign にそのまま乗った。

PersonCell の越境発掘は #86 勤怠に続き2画面連続（#85 で build → #86/#87 で別々の cold AI が自力発掘）。Statistic/ApprovalSteps/DataTable(renderCard) も既存部品で。

見つけた罠 — Drawer side="right" がポインタを飲む（高重大度）

右ドロワーに Drawer を選んだ。間違い、そして kit が止めてくれない。Drawer は vaul のボトムシートで、side="right" を受けて見た目は右に寄るが、vaul 内部の direction は "bottom" のまま——不可視のドラッグ層が子の全インタラクティブ要素のポインタを横取り。右ドロワー内のタブ/チェックボックスがマウスで全幅クリック不能（キーボードは効く＝純粋なポインタ層の欠陥）。Sheet（本物の右パネル）に替えたら全部直った。

→ #335 起票（高優先）。side が Content にあり vaul の direction が Root にあって未配線。修正案：direction を Root に通す or「右パネルは Sheet」と明示/誘導。「見た目は対応してるが操作が黙って壊れる」が最悪。

その他の起票

• 🟡 DataTable に getRowId が無い（react-table は持つが wrapper 非公開・index キーに fallback・#330 に追記）。
• 🟢 VStack 数値 gap / SearchInput onValueChange（また・#330）。

今回 src build なし（4/5・PersonCell/CheckList/SignedRecord が背骨を賄い、Drawer 罠は起票）。

学び — 「在る部品」が発掘される一方、「在るが壊れてる選択肢」が罠になる

PersonCell・CheckList・SignedRecord・DataTable(renderCard) が「普通なら1週間の bespoke を composition に畳んだ」。kit が JP 業務（承認/確定/追記/担当）を理解しているのは本物。だが #87 は逆側も見せた——Drawer side="right" のように「在るが壊れている選択肢」が、正しい部品（Sheet）より先に手に取られて黙って壊れる。発見可能性は「在る部品を見つけさせる」だけでなく「壊れた選択肢を掴ませない」ことでもある。

次回予告

• #88 1on1（同時 build・別記事）。人材を締めて次業界へ。

試す

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

---

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