Skills

スキルは、Claude Code のような AI アシスタントに shadcn/ui に関するプロジェクト認識コンテキストを提供します。インストールすると、AI アシスタントは、プロジェクトに適切な API とパターンを使用してコンポーネントを検索、インストール、構成、カスタマイズする方法を認識します。

たとえば、AI アシスタントに次のことを依頼できます。

• 「電子メールとパスワードのフィールドを含むログインフォームを追加します。」
• 「プロフィール情報を更新するためのフォームを含む設定ページを作成します。」
• 「サイドバー、統計カード、データテーブルを備えたダッシュボードを構築します。」
• 「--preset [コード]に切り替える」
• 「@tailark からヒーローを追加できますか?」

スキルはプロジェクトの components.json を読み取り、フレームワーク、エイリアス、インストールされているコンポーネント、アイコンライブラリ、およびベースライブラリをアシスタントに提供するため、最初の試行で正しいコードを生成できます。

インストール#

pnpmnpmyarnbun
pnpm dlx skills add shadcn/ui
コピー

これにより、shadcn スキルがプロジェクトにインストールされます。インストールされると、AI アシスタントは shadcn/ui コンポーネントを操作するときに自動的にロードされます。

スキルの詳細については、skills.sh をご覧ください。

含まれるもの#

このスキルは、AI アシスタントに次の知識を提供します。

プロジェクトのコンテキスト#

インタラクションごとに、スキルは shadcn info --json を実行して、プロジェクトの構成 (フレームワーク、Tailwind バージョン、エイリアス、ベースライブラリ (base、radix、または aria)、アイコンライブラリ、インストールされているコンポーネント、解決されたファイルパス) を取得します。

CLI コマンド#

すべての CLI コマンドの完全なリファレンス: init、add、search、view、docs、diff、info、および build。フラグ、ドライランモード、スマートマージワークフロー、プリセット、テンプレートが含まれます。

テーマとカスタマイズ#

CSS 変数、OKLCH カラー、ダークモード、カスタムカラー、境界線の半径、およびコンポーネントのバリアントがどのように機能するか。Tailwind v3 と v4 の両方のガイダンスが含まれています。

レジストリのオーサリング#

カスタムコンポーネントレジストリを構築および公開する方法: registry.json 形式、項目タイプ、ファイルオブジェクト、依存関係、CSS 変数、構築、ホスティング、およびユーザー構成。

MCP サーバー#

AI アシスタントがレジストリからコンポーネントを検索、参照、インストールできるようにする shadcn MCP サーバーのセットアップとツール。

仕組み#

1. プロジェクト検出 — プロジェクト内で components.json ファイルが見つかると、スキルがアクティブになります。
2. コンテキスト挿入 — shadcn info --json を実行してプロジェクト構成を読み取り、結果をアシスタントのコンテキストに挿入します。
3. パターンの強制 — アシスタントは shadcn/ui 構成ルールに従います。フォームには FieldGroup、オプションセットには ToggleGroup、セマンティックカラー、および正しいベース固有 API を使用します。
4. コンポーネントの検出 — アシスタントは、shadcn docs、shadcn search、または MCP ツールを使用して、コードを生成する前にコンポーネントとそのドキュメントを検索します。

もっと詳しく知る#

• CLI — 完全な CLI コマンドリファレンス
• MCP サーバー — レジストリアクセスのために MCP サーバーに接続します
• Theming — CSS 変数とカスタマイズ
• レジストリ — カスタムレジストリの構築と公開
• skills.sh — AI スキルについて詳しく学ぶ