またしても AI に使わせてみた — カルーセル、そして "氷山の一角" の話（やってみた #3）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に毎回「実アプリ頻出の UI」で作らせる連載。各回が「gunjo でこう作る」のハウツーにもなる。#1 設定画面 / #2 モーダル告知 に続いて、今回は カルーセル。

条件は毎回同じ。文脈ゼロの AI に、公開済みの npm @gunjo/ui（alpha.2）と gunjo.jp の docs だけを渡す。ソースは見せない。まっさらな Next.js（React 19 / Tailwind v4）で npm run build が通るまで自力で。

お題

LP やメディア一覧で頻出のカルーセル。複数スライド（画像＋見出し）を、前後ボタンと位置インジケータ（ドット）で送る。通すカテゴリは Display（Carousel / Card / Img / Badge）。

結果 — 動いた（4/5）

npm run build 成功、/carousel は static prerender、コンソールエラー0（実機確認済み）。autoPlay・loop・ドット・「Slide N of N」カウンタ・キーボード矢印まで動いた。

効いたのは今回も typed barrel。Carousel を一発で発見し、controls={{ navigation: true, dots: true }} だけで前後ボタンとドットが出るcompound コンポーネントの作りが良かった、と。さらに Img（aspectRatio・objectFit・skeleton・画像エラーの graceful fallback 内蔵）が刺さったらしい。

<Carousel className="w-full" opts={{ loop: true }} autoPlay
  controls={{ navigation: true, dots: true }} setApi={setApi}>
  <CarouselContent>
    {slides.map((s) => (
      <CarouselItem key={s.title}>
        <Card className="overflow-hidden">
          <Img src={s.poster} aspectRatio="video" objectFit="cover" />
          <CardContent>…</CardContent>
        </Card>
      </CarouselItem>
    ))}
  </CarouselContent>
</Carousel>

そして、ここからが本題 — "氷山の一角" だった

AI は build を一度落とした。エラーは——見覚えがありすぎた。

Error: `Tooltip` must be used within `TooltipProvider`

#2 で Banner が出したのと同じSSRクラッシュ。Carousel の前後ボタン（TooltipButton）とドット（Tooltip）が、TooltipProvider を self-wrap していない。#2 のあと #49 で Banner は直した。直したつもりだった。

念のため、ソース全体で「Tooltip を使うのに TooltipProvider を持たない」コンポーネントを棚卸ししたら——28個あった。Carousel、TooltipButton、Calendar、DatePicker、Combobox、Command、DataTable、Accordion、Avatar… provider を持っていたのは Banner と Toast だけ。

#49 は氷山の一角だった。 バグの instance を1個直しただけで、根（pattern）が残っていた。

これはコールドテストがバグじゃなくパターンを見つけた瞬間です。一個ずつ叩いていたら何ヶ月も気づかなかった systemic な穴を、3回目の素朴な「カルーセル作って」が炙り出した。直し方も instance ごとじゃなく、gunjo の Tooltip ラッパー自体を self-sufficient にして28個まとめて、という設計判断に変わる（#52）。

ほかにも正直な粗さ:

• docs のコード例が fetch に映らない（#2 の #50・まだ未デプロイ）— AI は結局 TS 型から composition を再構築した
• controls にオブジェクトを渡すと既定が全部 off に反転する非直感（docs 記載なし）
• Carousel の既定が w-[640px] 固定、Img も h-[256px] w-[256px] 固定 — 流体に override が必要（#47 と同系統）

学び — だから "担保できる" は、テストしてから言う

AI に使わせる → 粗さが出る → SSOT で一貫して直す → また使わせる

#3 で一番大きいのは、gunjo がまだ "ハードな2割" を完全には担保できていないと、自分のテストで分かったこと。28個の潜在クラッシュを抱えたまま「担保できる」と書いていたら、それは嘘になっていた。やってみたシリーズは、その嘘を書く前に潰すためにある。盛らない、隠さない。出た穴は全部 issue にして直す。

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

• ダッシュボード（Charts / Stat / Table）— gunjo の Charts は HTML/CSS プリミティブ。任意データで崩れないかを cold AI に通す、差別化の本丸。

試す

• gunjo.jp ／ npm @gunjo/ui ／ GitHub
• 前回: #1 設定画面 / #2 モーダル告知
• 母艦: 群青（@gunjo/ui） ／ なぜ要るのか: AI 時代のデザインシステム論
• GunjoUI by UIXHERO

まだ alpha、粗削りな青。穴が出るたび直します。Issue 歓迎。

---

<!-- 公開前: #52 修正反映後に記述更新／スクショ確定／相互URL差込／EN(dev.to)ミラー -->