AI に給与明細ダウンロード画面を作らせてみた — DocumentRow が結晶化、ListCard が「構造的に」できない理由（やってみた #171）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。在庫深掘り（document-download 狙い）——従業員セルフサービス 書類ダウンロード（給与明細・賞与・源泉徴収票・在職証明書・各種申請書）。HR/給与のマイページ。

結果 — 4/5、ダウンロード書類行が3回目で結晶化

tsc 緑・モバイル/デスクトップ両対応。cold AI（群青を一度も触っていない設定）：

日本の consumer/portal UI に本物の強いキット。 必要な部品はほぼ存在し、モバイルファースト・既定でアクセシブル・docstring がこの画面のために書かれたよう。1星減点は1つの構造的な穴＝ダウンロード書類行が無いこと。

観測の核 — DocumentRow が3回目で結晶化（ListCard が「構造的に」できない）

ダウンロードできる書類の行（ファイルアイコン＋名前＋PDF・サイズ・発行日＋DLボタン＋一括選択チェック）——ListCard を当てたくなる。だが cold AI は構造的な理由で却下した：

cold AI「DocumentRow/FileDownloadRow primitive が無い。なぜ ListCard を使わないか？ ListCard.onSelect はカード全体を1つの button にする**。だが書類行は独立した3つの操作対象が要る——選択チェックボックス・(プレビューの)タップ面・ダウンロードボタン。DL ボタンを ListCard の button に入れ子にすると不正な HTML＋フォーカス順の崩壊。だから ListCard は構造的にこの行を持てない。追加すべき最重要は DocumentRow＝先頭コントロール＋ファイル種別アイコン＋名前＋meta＋独立した末尾アクションボタンで、3つのヒット対象の a11y を処理したもの。すべての帳票/明細/書類/添付 画面が再手組みする。**」

ダウンロード書類行は #168 帳票DL・#169 月次レポートDL・#171 HR書類DL で3回目＝3-confirm。その場で build した：

• DocumentRow＝先頭コントロール（一括選択 Checkbox）＋ファイル種別アイコン＋名前＋meta（PDF・124KB・発行日）＋独立した末尾 DL ボタン。
• 行は <div>（1つの button ではない）＝選択・プレビュー（onOpen）・ダウンロードの3つの独立したヒット対象を保つ＝ListCard が構造的にできないこと。
• SectionList で年/種別グループ（NavRow↔SettingGroup と同じ relation）。
• 索引も是正＝索引は正直に『書類行の専用部品は無い』と認めていた所を DocumentRow に向け直した。
• ブラウザで4行・各行に独立したチェックボックス＋独立した DL ボタン（4＋4 の aria-label）を確認＝PR#429。結晶化 24個目。

学び — 「コンポーネントが構造的に不可能」は最も強い build 根拠

これまでの 3-confirm 根拠は「部品が無い（穴）」「索引が誤誘導（型/a11y/形）」だった。#171 は最も強い根拠＝既存部品が構造的に不可能：

• ListCard は近い（leading/title/meta/trailing がある）。
• だが onSelect がカード全体を1 button にするので、独立した DL ボタンを入れられない＝HTML の入れ子規則（button in button は不正）が物理的に禁じる。

これは「ListCard を拡張すれば良い」では済まない——ListCard の設計（行全体=1つの選択 button）が、複数ヒット対象という要件と根本的に両立しない。だから別部品（DocumentRow＝行は div、内部に独立した button 群）が必要だった。「既存部品では型/a11y が違う」より一段強い『HTML 構造上できない』が、最も反論の余地ない build 根拠だ。cold AI がこれを言語化したから、build は迷いなく「ListCard 拡張」でなく「DocumentRow 新設」になった。

拾った点（陽性）

• ✅ 索引が正直＝『ダウンロード書類行の専用部品は無い』と自認（でっち上げず）＝#162 で見た『自認する穴』。
• ✅ SectionList（年グループ）/NavRow（発行申請＝#168 build の再検証）/FilterChips/BottomActionBar 全て native。
• 🟡 Dialog が Radix 合成（convenience wrapper でない）で API を読まないと取り違える＝SimpleDialog 提案。

今回 src build = DocumentRow（document-download-row gap クローズ）。4/5・DocumentRow 結晶化・索引向け直し。

📊 結晶化スコアボード（build 済 24個）

…NavRow / Statistic(goodWhen) / OriginDestination / DocumentRow（このセッションで11部品 build/拡張） 進行中：MatchCard(1/3)・SimpleDialog(1/3)

📋 進捗

• 運輸5モード完走 ✅／在庫深掘り：goodWhen・OriginDestination・DocumentRow を結晶化
• 残在庫：MatchCard 1/3（二者間ペアリング）

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

• 在庫がほぼ枯れた（残 MatchCard 1/3 のみ）。新業種へ（運輸/会計以外＝エネルギー/通信/建設/官公庁/医療 等）or MatchCard 狙いの深掘り。※KeEem に確認。

試す

• gunjo.jp ／ 書類行 DocumentRow（新）／ セクションリスト SectionList ／ ナビ行 NavRow ／ npm @gunjo/ui ／ GitHub ／ 前回まで #1〜#170
• GunjoUI by UIXHERO

DocumentRow が結晶化した——「既存部品が構造的に不可能（button in button は不正 HTML）」は、型/a11y の違いより一段強い、最も反論の余地ない build 根拠。

---

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