スキル自身の言葉で
このスキルは、Radix UI または Base UI と Tailwind CSS で構築されたアクセシブルでカスタマイズ可能なコンポーネント集である shadcn/ui を使ってアプリケーションを構築するための専門的なガイダンスをエージェントに提供します。shadcn MCP ツールによるコンポーネントの発見、CLI または手動統合によるインストール、create および init コマンドによるプロジェクトセットアップ、そして style、baseColor、cssVariables、rsc、rtl といった components.json のオプションを扱います。
components/ui/ のファイル構成と cn() ヘルパーについて説明し、続いて app/globals.css の CSS 変数、class-variance-authority のバリアント、ラッパーコンポーネントによるカスタマイズを解説します。ブロックはカテゴリー別に整理されており、続いてアクセシビリティのルール、フォーム・ダイアログ・テーブルの共通パターン、トラブルシューティング、5段階の検証リストが続きます。
生成されるもの
- components/ui/ に書き込まれ、あなたのインポートに組み込まれるコンポーネントのソースファイル。
- 設定と追加されたコンポーネントを反映した、更新済みの components.json。
- ダッシュボードやログインフローなどの複数ファイルにわたるインターフェース用に取得されたブロックのソースコード。
- あなた自身のラッパーコンポーネントファイル。例: components/custom-button.tsx。
仕組み
- 01まずカタログを確認する
名前を推測するのではなく、list_components、get_component_metadata、get_component_demoといったshadcn MCPツールを使って利用可能なコンポーネントを確認します。
- 02CLIでコンポーネントを追加する
推奨される方法はaddコマンドです。これは設定に合わせて調整されたソースをダウンロードし、依存関係をインストールし、ファイルをcomponents/ui/に配置します。
- 03あるいはソースを手動で統合する
手動で統合する場合は、get_componentでコードを取得し、自分でファイルを作成し、peer依存関係をインストールし、importを調整します。
- 04プロジェクト設定を初期化する
新規プロジェクトではcreateでスタイル、フォント、コンポーネントライブラリを選択し、既存プロジェクトではinitを実行してcomponents.jsonを生成します。
- 05CSS変数でテーマを設定する
色はTailwindの設定とCSS変数で管理し、.darkブロックでダークモードの上書きを指定します。
- 06コミット前に検証する
型チェック、lint、アクセシビリティのテスト、ライト・ダークモードの確認、ブレークポイントの検証を行います。