UIライブラリを使う（shadcn/ui）

なぜ学ぶか： AIに「モダンなUIで」と頼むと、高確率でshadcn/uiという部品集が使われます。プロジェクトに謎のcomponents/uiフォルダができていたら、それです。仕組みを知っておきましょう。

まずはこの例を見てみましょう

// AI が生成しがちな shadcn/ui のコード
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";

function ConfirmPanel() {
  return (
    <Card>
      <CardContent className="flex gap-2">
        <Button>変更を保存</Button>
        <Button variant="outline">キャンセル</Button>
      </CardContent>
    </Card>
  );
}

import元が@/components/ui/…（自分のプロジェクト内）なのが特徴。部品のコードが手元にコピーされています。