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

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。⁠人材・採用 5枚目⁠——⁠入社手続き / オンボーディング管理⁠。新入社員のタスク/チェックリスト、書類提出、手続き完了の承認。

結果 — 4/5

tsc/build 緑・375px・0 console error。新入社員一覧・フェーズ別チェックリスト・書類提出状況・手続き完了承認・掘り下げる詳細。

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

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

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

⁠PersonCell の別業界での自力発見は #86 勤怠に続き2画面連続⁠（#85 で作る → #86/#87 で別々の予備知識ゼロの AI が自力発掘）。Statistic/ApprovalSteps/DataTable(renderCard) も既存コンポーネントで。

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

右ドロワーに Drawer を選んだ。⁠間違い、そしてライブラリが止めてくれない⁠。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 の新規コンポーネントなし⁠（4/5・PersonCell/CheckList/SignedRecord が背骨を賄い、Drawer の罠は課題に記録）。

学び — 「在るコンポーネント」が発掘される一方、「在るが壊れている選択肢」が罠になる

PersonCell・CheckList・SignedRecord・DataTable(renderCard) が「普通なら1週間かけて一から作るものを、組み立てに畳んだ」。ライブラリが日本の業務（承認/確定/追記/担当）を理解しているのは本物。だが #87 は逆側も見せた——⁠Drawer side="right" のように「在るが壊れている選択肢」が、正しいコンポーネント（Sheet）より先に手に取られて黙って壊れる⁠。発見可能性は「在るコンポーネントを見つけさせる」だけでなく「壊れた選択肢を掴ませない」ことでもある。

次回予告

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

試す

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