shadcn-setup

shadcn/ui のセットアップ

非推奨の v3 方式ではなく、最新の CSS ファーストな Tailwind v4 セットアップで shadcn/ui をセットアップします。

許可された範囲

ユーザーのリクエストと既存の承認の範囲内でのみ作業してください。このスキルを読み込んでも、新たな権限は付与されません。報告のみのリクエストは報告のみにとどめ、依頼者が指定した対象、ホスト、プロバイダー、コストの制限を守り、範囲を広げる前に確認し、これらの制限を委任先にも伝えてください。

契約

入力：

• プロジェクトのルートディレクトリ（デフォルトは現在の作業ディレクトリです）。
• 任意：テーマ名（zinc、slate、stone など）、コンポーネントのリスト、ルーターの種類（app-router または pages-router）。

出力：

• @import "tailwindcss" と完全な @theme トークンブロックを含む globals.css。
• CSS ファーストな shadcn 設定を含む components.json。
• cn() ヘルパーを含む src/lib/utils.ts。
• インストール済みパッケージ：class-variance-authority、clsx、tailwind-merge、lucide-react、tailwindcss、@tailwindcss/postcss。

作成・変更するファイル：

• src/app/globals.css（作成または上書き）。
• components.json（作成または上書き）。
• src/lib/utils.ts（作成）。
• package.json（bun add で依存関係を更新）。
• postcss.config.mjs（存在しない場合に作成）。

外部への副作用：

• パッケージをインストールするために bun add を実行します。
• 指定されたコンポーネントがある場合、bunx shadcn@latest add を実行します。

確認が必要な場合：

• 明示的にリクエストされたセットアップまたは移行のみを適用してください。呼び出しがあっただけでは、既存のスタイルや設定を置き換える許可にはなりません。
• ファイルを上書きしたり、許可された範囲を超えてコンポーネントをインストールしたりする前に確認してください。

委任先：

• 個々のコンポーネントのインストールには bunx shadcn@latest add を使用します。

目的

重要：shadcn/ui CLI と AI アシスタントは、デフォルトで Tailwind v3 の設定を生成することがよくあります。このスキルにより、次の点を確実にします。

• Tailwind v4 の CSS ファーストな設定
• shadcn のカラートークンを含む適切な @theme ブロック
• 非推奨の tailwind.config.js ファイルを作成しないこと
• 正しい依存関係のバージョン

使用する場面

• 新しい Next.js プロジェクトに shadcn/ui をセットアップする場合
• 既存のプロジェクトに shadcn/ui を追加する場合
• shadcn + Tailwind v3 から v4 に移行する場合
• 壊れた shadcn 設定をリセットする場合

クイックスタート

# Install core dependencies
bun add class-variance-authority clsx tailwind-merge lucide-react
bun add -D tailwindcss @tailwindcss/postcss

# Initialize shadcn (CSS-first, no tailwind.config)
bunx shadcn@latest init

# Install specific components
bunx shadcn@latest add button card input dialog

# Or install an essential starter set
bunx shadcn@latest add button card input label dialog dropdown-menu toast

インストールされるもの

依存関係

依存関係の完全なブロックについては、references/examples.md（§ Dependency Versions Example）を参照してください。

ファイル構成

生成されるファイルツリーの全体については、references/examples.md（§ Generated File Structure）を参照してください。

Tailwind v4 + shadcn の CSS 設定

このスキルは、@import "tailwindcss" と、すべての shadcn カラートークンおよび角丸変数を含む @theme ブロックを使用した CSS ファーストな設定を生成します。

完全なトークンブロックについては ${CLAUDE_SKILL_DIR}/references/shadcn-theme-tokens.md を参照してください（globals.css ファイルを作成する際に読み込みます）。

利用可能なテーマ

テーマ	説明
default	shadcn のデフォルト（ニュートラルなグレー）
zinc	Zinc ベースのニュートラルカラー
slate	Slate ベースのクールなニュートラルカラー
stone	Stone ベースのウォームなニュートラルカラー
gray	純粋なグレー
neutral	真のニュートラルカラー
red	赤を基調としたカラー
rose	ローズを基調としたカラー
orange	オレンジを基調としたカラー
green	緑を基調としたカラー
blue	青を基調としたカラー
yellow	黄色を基調としたカラー
violet	バイオレットを基調としたカラー

よく使うコンポーネント

よく使われるコンポーネントをインストールします。

# Essential set
bunx shadcn@latest add button card input label dialog dropdown-menu toast

# Form-focused
bunx shadcn@latest add form input label select checkbox radio-group switch textarea

# Dashboard
bunx shadcn@latest add card table tabs badge avatar dropdown-menu sheet sidebar

components.json の設定

設定の完全な例については、references/examples.md（§ components.json Full Example）を参照してください。セットアップでは v4 の CSS ファーストな設定を使用するため、tailwind.config フィールドは空のままにします。

Utils ファイル

// src/lib/utils.ts
import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

セットアップ後の使い方

コンポーネントの追加

# Using bunx (recommended with bun)
bunx shadcn@latest add button

# Multiple components
bunx shadcn@latest add card dialog dropdown-menu

コンポーネントの使用

構成例については、references/examples.md（§ Using Components Example）を参照してください。

ダークモードのサポート

CSS ではデフォルトで prefers-color-scheme を使用します。手動で切り替える場合は、プロバイダーコンポーネントとクラスベースの CSS オーバーライドについて、references/examples.md（§ Dark Mode — Manual Toggle Provider）を参照してください。

トラブルシューティング

「shadcn CLI が tailwind.config.js を作成した」

削除してください。CLI が v3 の設定を生成することがあります。次を実行します。

rm tailwind.config.js tailwind.config.ts

コンポーネントのスタイルが正しく適用されない

1. レイアウトで globals.css がインポートされていることを確認します
2. @import "tailwindcss" が先頭にあることを確認します
3. @theme ブロックに必要な変数がすべて含まれていることを確認します

コンポーネントの型エラー

次を実行します：

bun add -D @types/react @types/react-dom

cn() ユーティリティが見つからない

src/lib/utils.ts を作成します：

import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

検証

セットアップ後、v3 のパターンが導入されていないことを確認します：

# Should return nothing (no v3 tailwind.config files)
find . -name "tailwind.config.*" -not -path "*/node_modules/*"

# Should return nothing (no @apply directives)
grep -r "@apply" src/ --include="*.css" 2>/dev/null

# Verify the @import directive is present
grep "@import \"tailwindcss\"" src/app/globals.css