AI に LMS ダッシュボードを作らせてみた — 今セッションで作った部品が、全部その場で再利用された（やってみた #73）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。教育4枚目——学習進捗 / LMS ダッシュボード（コース進捗 × 課題提出マトリクス × 到達度 × 要支援学習者 × 活動推移）。

教育の4枚目は LMS ダッシュボード。コース進捗・課題提出・到達度を追い、要支援の学習者を見つける画面。そして**「直近で作った部品が、その場で全部再利用された」**——複利が最高潮に達した回。

結果 — 4.5/5

tsc/build 緑・console 0・375px・コース進捗バー・課題提出マトリクス・到達度メーター・要支援リスト・週次推移。手組みはゼロ——全データ widget に実コンポーネントがあった。

今回の主題 — 直近で作った部品が、全部その場で効いた

cold AI が使った主要部品は、ほぼ全部この数ラウンドで作った/直したもの:

• ScheduleGrid（#70 build・#71 framing 拡張）→ 生徒×課題の提出マトリクス「no friction, genuinely excellent」。framing を広げた効果が2回連続で実証（#72 出欠に続き #73 提出マトリクス）。
• Badge の icon prop（#72=前ラウンドで build した #276）→ 採点済/提出済/期限切れ の色非依存ステータスピル「solved the color-independence requirement with one prop」。出荷した翌ラウンドで即採用。
• Meter direction="higher-is-better"+target（#256）→ 到達度 vs 到達ライン。何ラウンド連続か数えられないほどの野生採用。

"Nothing else had to be hand-rolled. Every data widget had a real component. A notably high hit rate for a domain the library wasn't obviously built for."

#70 ScheduleGrid・#72 Badge icon を作り、#73 で両方ともその場で発見・採用された。「作る→翌ラウンドの別画面が使う」の複利が、教育4枚で完全に回った。だから #73 は手組みゼロの no-build 回——kit が LMS をまるごと既存部品で賄った。

src で land — Grid のレスポンシブ列（3回目で build）

no-build と言いつつ、1つ3回ルールが満ちた:

• 🟡→✅ Grid cols が固定列のみだった穴を fix（#114 cold-test #21・#68 生産計画・#73 LMS で3回）。cols={4} は 375px で溢れて崩れない、mobile-safe なのは minItemWidth だけ、という罠。3回ルールで build（PR #295）:
  • cols がレスポンシブオブジェクト { base, sm, md, lg, xl } を受けるように（cols={{ base: 1, md: 3 }}＝モバイル1列→md で3列）。固定数 cols={3} は後方互換で据え置き（リフローさせたくない用途用）。
  • Tailwind v4 は「ソースに literal で現れたクラスしか生成しない」ので、breakpoint 別の literal マップを列挙。ビルド後 CSS に {sm,md,lg,xl}:grid-cols-N が全部生成されたことを確認。

起票だけ

• 🟡 ChartColor 型が緩い（color:"danger" が型チェックを通り無色描画＝不可視バグ・#296・1回目・最高severity）。
• 🟡 Meter の label が ReactNode だと role=meter の名前が消える（#297・1回目・#277/#286 と Meter PR で束ねる）。
• 🟡 DataTable に caption/アクセシブル名 prop 無（#298・1回目）。

学び — 複利のピークと、3回ルールの両立

#73 は2つを同時に示した: ①直近で作った部品（ScheduleGrid・Badge icon）が、その場の別画面で全部再利用された＝デザインシステムの複利が回り切った証拠（手組みゼロ）。②それでも Grid レスポンシブ列が3回目に達したので build＝「賄えてる」と「まだ穴がある」は両立する。教育4枚で、kit は LMS をほぼ完全に賄いつつ、3回ルールで残った穴（Grid 列）を1つ埋めた。

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

• **教育5枚目（公欠/保健室・部活動・三者面談予約 など）**で教育を締めるか、別業界へ pivot。連続時間軸スケジューラ#142残り・系譜#281 の大型も観測継続。

試す

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

まだ alpha。今セッションで作った ScheduleGrid と Badge icon が翌ラウンドで全部再利用され、Grid レスポンシブ列を3回ルールで land した回。

---

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