mcpField
S
shadcn-ui

shadcn-ui

github.com/oakossデザイン・UI20162 回インストール11 週間前に更新
リポジトリ

shadcn-ui について

React 開発者向けに、shadcn/ui でアクセシブルかつカスタマイズ可能な UI を構築するスキルです。CLI でソースをプロジェクトに取り込み、テーマ、フォーム、レジストリを扱います。

主な機能

  1. 01CLI によるコンポーネントソースの追加
  2. 02Radix UI または Base UI のプリミティブ
  3. 03Tailwind CSS 4 のテーマとダークモード
  4. 04React Hook Form または TanStack Form のフォーム
  5. 05コンポーネントのバリアントとアクセシビリティ
  6. 06カスタムレジストリ

活用シーン

  1. 01React プロジェクトへのコンポーネント追加
  2. 02oklch カラーによるテーマ設定
  3. 03Zod 検証付きフォームの構築
  4. 04コンポーネントレジストリの作成と配布

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/oakoss/agent-skills --skill shadcn-ui

インストール後、Claude Code で/shadcn-uiを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
cli-and-registry.md
component-patterns.md
form-patterns.md
theming-and-dark-mode.md

詳細

shadcn/ui

概要

shadcn/ui をコード生成プラットフォーム（npm の依存関係ではありません）として活用し、アクセシブルでカスタマイズ可能な UI を構築するためのガイドです。コンポーネントは CLI 経由でプロジェクトにコピーされ、完全に所有できます。Radix UI または Base UI のプリミティブ、oklch カラートークンを使った Tailwind CSS 4、React 19 の直接的な ref パターン、Field コンポーネントと Zod を使った型安全なフォーム検証に対応しています。

使用する場面： shadcn/ui コンポーネントの追加、CSS 変数と oklch カラーによるテーマ設定、React Hook Form または TanStack Form を使ったフォームの構築、カスタムレジストリの作成、アクセシブルなコンポーネントバリアントの合成、ダークモードの設定。

使用しない場面： React 以外のフレームワークを使う場合（代わりに shadcn-vue または shadcn-svelte を使用してください）、別のコンポーネントライブラリ（MUI、Chakra）を使うプロジェクト、Tailwind CSS を使わないプロジェクト。

クイックリファレンス

パターンAPI／アプローチ主なポイント
プロジェクトを初期化npx shadcn@latest initフレームワークを自動検出し、CSS 変数を設定します
コンポーネントを追加npx shadcn@latest add [name]ソースコードをプロジェクトにコピーします
カスタムプロジェクトnpx shadcn@latest createライブラリ（Radix/Base UI）、スタイル、テーマ、フォントを選択します
更新を確認npx shadcn@latest diff [component]コンポーネントの上流の変更を表示します
レジストリを検索npx shadcn@latest search @registry名前空間付きレジストリを閲覧してインストールします
レジストリを構築npx shadcn@latest buildregistry.json からレジストリ JSON を生成します
テーマトークン:root vars + @theme inline mappingoklch カラー値を使用し、.dark クラスでダークモードにします
ダークモード@custom-variant dark (&:is(.dark *)).dark セレクターの下で CSS 変数を切り替えます
コンポーネントバリアントclass-variance-authority の cva()型安全なバリアント定義
ポリモーフィックスロットRadix の <Slot> を使う asChild prop子要素に props をマージします
直接的な ref通常の prop としての refReact 19 では forwardRef は非推奨です
フォーム（現行）<Field /> + React Hook Form + Zod従来の <Form /> コンポーネントに代わるものです
フォーム（従来）<Form /> + <FormField /> + Zod引き続き動作しますが、積極的な開発は終了しています
クラスのマージclsx + twMerge をラップする cn() ユーティリティTailwind クラスを競合なく安全にマージします
トースト／通知Sonner（npx shadcn@latest add sonner）標準の通知方法です。自動非表示とスタックに対応します
ブロックを使って初期化npx shadcn@latest init sidebar-01事前構築済みのページブロックでプロジェクトをセットアップします
RTL サポートルート要素の dir="rtl"すべてのコンポーネントで RTL レイアウトを標準サポートします
新しいコンポーネントSpinner、Kbd、ButtonGroup最近追加されたユーティリティおよびレイアウトコンポーネント

よくある間違い

間違い正しい方法
shadcn/ui を npm 依存関係としてインストールするCLI（npx shadcn@latest add）を使って、ソースをプロジェクトにコピーします
React 19 のコンポーネントで forwardRef を使うref をプロパティとして直接渡します。React 19 では forwardRef は非推奨です
カラートークンに HSL 値を使うoklch 形式を使います：--primary: oklch(0.205 0 0)
ユーティリティで変数を hsl() または oklch() で囲むCSS 変数を直接参照します：var(--primary)
トークンを @theme {} に直接記述する値には :root を使い、Tailwind へのマッピングには @theme inline を使います
新しいフォームに従来の <Form /> を使うReact Hook Form または TanStack Form と併せて <Field /> コンポーネントを使います
フォームコンポーネントで Zod による検証を省略する型安全な検証のため、フォームには必ず Zod スキーマを組み合わせます
インタラクティブなコントロールに div 要素を使うセマンティック HTML とアクセシビリティのために、Radix または Base UI のプリミティブを使います
node_modules 内のコンポーネントを変更するコンポーネントはソースツリー内にあります。直接管理し、カスタマイズしてください
古い CLI コマンド shadcn-ui@canary を使うすべての CLI 操作で npx shadcn@latest を使います

委任

  • コンポーネントの検索とプリミティブの特定：Explore エージェントを使います
  • テーマの移行または複数ファイルのリファクタリング：Task エージェントを使います
  • デザインシステムのアーキテクチャ計画：Plan エージェントを使います
  • レジストリの設定と配布：Task エージェントを使います

tanstack-form スキルが利用できる場合は、高度なフォーム状態管理（配列フィールド、連動フィールド、非同期検証）を委任してください。 tailwind スキルが利用できる場合は、ユーティリティクラスのパターンとデザイントークンのアーキテクチャを委任してください。

参考資料

コメント

Markdown 対応