AI に経費精算（承認フロー付き）を作らせてみた — 前回作った編集グリッドが、翌回 5/5 の主役になった（やってみた #39）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。会計3枚目——経費精算申請（経費明細の編集グリッド・領収書アップロード・申請→承認→差戻しの承認ワークフロー）。

結果 — 5/5（シリーズ初の満点）

tsc/build 緑・console 0・375px で明細がカード化・承認フロー（申請→承認/差戻し）動作・差戻しはコメント必須・h1 1個。39回目にして初めて、cold AI が「ほぼ戦わずに出荷できる」と満点を付けた。

この回の主役 — 前回作った編集グリッドが、翌回の主役になった

直前(#38)の最大の穴は「編集可能なデータグリッドが無い」。私は EditableDataTable(#199) を作って出荷した。その次の回(#39)の cold AI が、それを見つけて経費明細に使った:

EditableDataTable — USED, never fought it. The star of the build. 全部カバーした——onAddRow/onRemoveRow+minRows・合計 footer・行ごと getRowError・そして何よりデスクトップ table→モバイル card の自動スタック（375px で横スクロールゼロ）。各 cell() に ctx.ariaLabel（「明細3 金額」）も渡してくれる。薄い Table ラッパじゃない、本物の上位 primitive。迷わずまた使う。

「#37/#38 で穴(編集グリッド)を見つける → #38 で作る(#199) → #39 の別 AI が主役に据え、満点を付ける」——primitive を作る複利が、最強の形で回った。formatCurrency(#180) は7回連続・#198 の NumberInput クリア修正も検証。

新しい穴と今ラウンドの修正

満点でも穴はある（誠実に）:

• 🟠 承認ワークフロー primitive が無い（最大）。申請→上長→経理のステップ状態＋ロール別アクションバー＋ステータスマシンを手巻き（#207・beta ゲート）。
• 🟠 Timeline の marker に意味色が無い（success/warning/destructive・Badge/Button にはあるのに）→ 追加（#205）。
• 🟡 EditableColumn に minWidth が無い（5/5 唯一の摩擦・新部品の精錬）→ 追加（#206）。

src で2つ land（PR#208）:

• Timeline に意味色（承認ステップが緑/橙/赤で表せる・ブラウザ実証で bg-success-strong→green 等）。
• EditableColumn minWidth（内容の多い列が editor 列を潰さない・ブラウザ実証で 12rem→192px）。

学び — primitive を作る投資は、翌回に満点で返ってくる

#37/#38: 編集グリッドの穴を2回踏む
#38: EditableDataTable を作る(#199)
#39: 次の AI が主役に据え、シリーズ初の 5/5

部品の小修正(#34 formatCurrency)・上位 primitive(#152 Form, #171 Theme, #199 グリッド)——作った投資はどれも、次の回の cold AI が見つけて使い、点数を押し上げる。複利は「直したバグの不在(#35)」から「作った primitive が満点の主役(#39)」まで来た。

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

• 節目の40回目。承認ワークフロー(#207) を作るか、別業界（給与/POS/医療）へ。

試す

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

まだ alpha。前回作った primitive が、翌回 5/5 の主役になった回。

---

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