98.8K+ダウンロード
使い方ガイドへスキップ
shadcn作者 shadcn

shadcn スキル。

UI デザイン向けの Claude Code と Codex スキル：プロジェクト内で shadcn コンポーネントの追加、検索、修正、スタイリング、構成を行います。

  • Web & UI
  • UI コード
OpenDesign をダウンロード使い方ガイドを見る
shadcn-ui/ui · skills/shadcn/SKILL.mdSKILL.md
--- name: shadcn description: Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset". --- ## Current Project Context ## Principles ## Critical Rules ## Key Patterns ## Component Selection ## Key Fields
2026-09-14 に上流ファイルから読み込まれたフロントマターとセクション見出し · 全体で 19,427 文字

01 できること

Claude CodeとCodexにおいてshadcnスキルが行うこと

概要、ワークフロー、出力。いずれもスキルの SKILL.md から読み取った内容です。

SKILL.md より2026年9月14日読取 · 実行記録ではありません

スキル自身の言葉で

このスキルは、コンポーネントの追加、検索、修正、構成によってshadcn/uiプロジェクトを管理します。components.jsonからライブなプロジェクトコンテキストを注入し、フォーム、スタイリング、コンポジション、アイコン、チャットUIに関するフレームワーク固有のルールを適用し、すべての操作にshadcn CLIを使用します。コンポーネントはnpx shadcn@latest（またはプロジェクトのパッケージランナー）によってソースコードとしてインストールされます。

このスキルは、shadcn/ui、コンポーネントレジストリ、プリセットコード、またはcomponents.jsonファイルを持つプロジェクトを扱う際に適用されます。RSCディレクティブ、Tailwind v3/v4、Base UIとRadixプリミティブの違い、アイコンライブラリの検出、モノレポのレイアウトを網羅しています。すべてのコマンドは、プロジェクトの実際のエイリアス、パッケージマネージャー、解決済みパスを参照します。

生成されるもの

  • プロジェクトの解決済みuiパスに追加されたshadcnコンポーネントのソースコードファイル
  • 更新時にマージされたコンポーネントファイル。ローカルの変更を保持しつつ、上流の更新を適用します
プロンプト例を見る ↗

仕組み

  1. 01
    プロジェクトコンテキストの注入

    npx shadcn@latest info --jsonを実行して、プロジェクト設定、インストール済みコンポーネント、エイリアス、RSCフラグ、Tailwindバージョン、アイコンライブラリ、ベース（radixまたはbase）、解決済みパスを取得します。

  2. 02
    カスタムUIを書く前にレジストリを検索する

    npx shadcn@latest searchを使用して、shadcnレジストリおよびコミュニティレジストリ内に、必要に合致する既存のコンポーネントがあるかを確認します。

  3. 03
    コンポーネントのドキュメントと例を取得する

    npx shadcn@latest docs <component>を実行してドキュメントと例のURLを取得し、コンポーネントを作成または修正する前にそれらを取得して正しいAPIの使用方法を確認します。

  4. 04
    CLIでコンポーネントを追加・更新する

    npx shadcn@latest addを使用してコンポーネントをインストールします。

  5. 05
    サードパーティコンポーネントのインポートを修正する

    コミュニティレジストリからコンポーネントを追加した後、@/components/ui/...のようなハードコードされたパスがないか、UI以外のファイルを確認します。

  6. 06
    追加されたコンポーネントを確認・検証する

    追加されたすべてのファイルを読み込み、サブコンポーネントの欠落、誤った構成、重要ルールの違反、アイコンインポートの不一致を確認します。

02 適合性を確認

shadcn Skill を使用するタイミング

この種の UI デザインを行う場合は、Claude Code または Codex で shadcn スキルを使用してください。適合性と制限については、スキル自体のファイルから引用しています。

適している場合

  • components.json ファイルを持つ既存プロジェクトで shadcn/ui コンポーネントを使って UI を構築する場合
  • プリセットコードや nova や vega のような名前付きプリセットを使って新しい shadcn プロジェクトを初期化する場合
  • MessageScroller、Message、Bubble、Attachment、Marker を使ってチャットや会話用インターフェースを構築する場合

境界を知る

  • CLI を使わずに GitHub からコンポーネントファイルを手動で取得する場合
  • ユーザーがどのレジストリを使うか指定していない場合にデフォルトのレジストリを使用すること
  • ユーザーの明示的な承認なしに --overwrite を使ってコンポーネントを更新すること
  • プロジェクトのコンテキストに存在しない機能、インテグレーション、ファイル名を創作すること

提供すべきもの

  • コンポーネントまたはブロック名追加または検索する shadcn コンポーネント（button、dialog、select）またはレジストリアイテム（@magicui/shimmer-button、owner/repo/item）の名前です。
  • プリセットコードまたは名前付きプリセットui.shadcn.com のバージョン接頭辞付き base62 文字列（例: a2r6bw）、または init や apply 用の名前付きプリセット（nova、vega、maia、lyra、mira、luma）です。

03 スキルの内部

shadcn スキルが Claude Code と Codex に与えるルール

SKILL.md がエージェントに設定する 8 つの具体的な指示・既定値・制限 — 結果を変える部分です。

  1. gap- を使用し、space-x- や space-y- は使用しない

    flex の子要素間のスペースには gap- を使用します。縦方向のスタックには flex flex-col gap- を使用します。space-x- と space-y- は使用が許可されていません。

  2. フォームは FieldGroup と Field を使用する

    フォームレイアウトは FieldGroup と Field コンポーネントを使用する必要があります。フォームレイアウトに space-y- や grid gap- を持つ生の div を使用してはいけません。

  3. ボタン内のアイコンは data-icon を使用する

    Button 内のアイコンには data-icon="inline-start" または data-icon="inline-end" が必要です。コンポーネント内のアイコンに size-4 や w-4 h-4 のようなサイズ指定クラスを使用してはいけません。

  4. アイテムは常にそのグループ内に置く

    SelectItem は SelectGroup の中に、DropdownMenuItem は DropdownMenuGroup の中に、CommandItem は CommandGroup の中に配置します。アイテムを直接レンダリングしてはいけません。

  5. 生の値ではなくセマンティックなカラートークンを使用する

    bg-primary、text-muted-foreground などを使用します。bg-blue-500 や text-emerald-600 のような生の Tailwind カラーは使用しないでください。手動での dark: カラーオーバーライドも禁止です。

  6. Dialog、Sheet、Drawer には常にタイトルが必要

    アクセシビリティのため、DialogTitle、SheetTitle、DrawerTitle が必須です。タイトルを視覚的に隠したい場合は className="sr-only" を使用してください。

  7. プリセットコードを手動でデコードしない

    npx shadcn@latest preset decode <code>、preset url <code>、または preset open <code> を使用してください。プロジェクトを意識したプリセット検出には preset resolve を使用してください。プリセットURLを手動で組み立てることは絶対にしないでください。

  8. プロジェクトのパッケージランナーですべてのCLIコマンドを実行する

    プロジェクトの packageManager フィールドに応じて、npx shadcn@latest、pnpm dlx shadcn@latest、または bunx --bun shadcn@latest を使用してください。プロジェクトが pnpm や bun を使用している場合に npx を固定で使うことは絶対にしないでください。

04 実際に使う

Claude Code または Codex に shadcn をインストール

npx skills add コマンドを実行し、エージェントで最初のタスクを実行して、結果をチェックリストで確認します。

Claude Code、Codex、またはあなたのエージェントに shadcn を追加

プロジェクトで実行してください。インストーラーが、どのエージェントに追加するかを尋ねます。

Terminal
npx skills add https://github.com/shadcn-ui/ui --skill shadcn

skills/shadcn/SKILL.md 用の汎用的な skills CLI形式です。リポジトリによっては独自のパスが記載されている場合があります。

スキルに最初の UI デザインタスクを与える

スキル自身の用語で記述されています。角括弧の部分はご自身の内容に置き換えてください。

Starter prompt
I need a settings page with tabs for profile, account, and notifications. Each tab should have form fields grouped by section, with a save button at the bottom. Use the project's existing shadcn components and follow the FieldGroup pattern. The profile tab needs an avatar upload, the account tab needs email and password inputs with inline buttons to change them, and the notifications tab needs toggle groups for frequency (daily, weekly, monthly) and a set of checkboxes for notification types. Make sure all validation states use data-invalid and aria-invalid correctly.

出典：SKILL.md をスキル自身の用語に沿って記述。

最初の結果を確認

SKILL.md 自体が正しい結果として示しているもの：

  • npx shadcn@latest info を実行し、コンポーネントがインストール済みコンポーネントの一覧に追加されたことを確認してください
  • アイコンのインポートがプロジェクトの iconLibrary フィールド（lucide-react、@tabler/icons-react など）と一致しているか確認してください

OpenDesignではshadcnをそのSKILL.mdリンクからインポートします：Plugins → Add → Skill → Import from link、その後トップバーで選択してください。

OpenDesign をダウンロードクイックスタートを読む

05 オープンソースで追跡可能

ソース、ライセンス、検証

このページの情報の出所と、最終確認日時です。

Author
shadcn
Repository
github.com/shadcn-ui/ui ブランチ main
スキルファイル
skills/shadcn/SKILL.md 検証時にコンテンツチェックサムを記録。コミット 2b3e6d4
License
MIT LICENSE.md より
リポジトリスター数
123,708 GitHub スナップショットは 2026-09-14 に shadcn-ui/ui リポジトリ全体から取得されました。shadcn の評価や使用数ではありません。
OpenDesign により検証済み
2026-09-14 ソースファイル、パス、ライセンステキスト、スター数を確認済み。OpenDesign 本体にはバンドルされていません（2026-08-28 確認）。このページには実行記録がありません。

SKILL.md の中身

  1. 現在のプロジェクトコンテキストnpx shadcn@latest info --json から、リアルタイムのプロジェクト設定とインストール済みコンポーネントを注入します
  2. 原則まず既存のコンポーネントを使用し、再発明せずに組み合わせ、組み込みのバリアントを使用し、セマンティックカラーを使用します
  3. 重要なルールスタイリング、フォーム、コンポジション、アイコン、チャット、CLIに関する常時適用されるルールで、詳細ファイルへのリンク付き
  4. 主要なパターン最も一般的なコードパターン：フォームレイアウト、検証、ボタン内アイコン、スペーシング、等寸法、状態カラー
  5. コンポーネント選定UIの要件を正しいshadcnコンポーネント（ボタン、フォーム、オーバーレイ、フィードバック、ナビゲーション、チャット）にマッピングする表
  6. 主要フィールドプロジェクトコンテキストから、aliases、isRSC、tailwindVersion、base、iconLibrary、resolvedPaths、framework、packageManager、presetを説明します
  7. コンポーネントのドキュメント、例、使用法npx shadcn@latest docs を実行してURLを取得し、正しいAPIと使用パターンのためにそれらを取得してください
  8. ワークフロー9 ステップのプロセス：コンテキストの取得、インストール済みの確認、検索、ドキュメントの取得、インストール、インポートの修正、レビュー、レジストリの処理、プリセットの切り替え
  9. コンポーネントの更新--dry-run と --diff を使用して、ローカルの変更を保持しつつ上流の変更をマージしてください。承認なしで --overwrite を使用することは絶対にしないでください
  10. クイックリファレンスinit、apply、add、search、docs、view、preset操作のためのフラグとレジストリ構文付きCLIコマンド例
  11. 詳細リファレンスフォーム、コンポジション、チャット、アイコン、スタイリング、base-vs-radix、CLI、レジストリ、カスタマイズに関する個別のルールファイルへのリンク
スキル自身による説明
「shadcn コンポーネントとプロジェクトを管理します。UI の追加、検索、修正、デバッグ、スタイリング、構成を行い、チャットインターフェースも含みます。プロジェクトコンテキスト、コンポーネントドキュメント、使用例を提供します。shadcn/ui、コンポーネントレジストリ、プリセット、--preset コード、または components.json ファイルを持つプロジェクトで機能します。「shadcn init」、「--preset でアプリを作成」、「--preset に切り替え」でも適用されます。」

SKILL.md のフロントマター説明です。完全なファイルは約 19,427 文字です。完全なファイルを GitHub で読む

shadcn

実際の UI デザインタスクで shadcn を実行する

OpenDesign をダウンロードし、SKILL.md リンクから shadcn をインポートし、上記のプロンプトを貼り付けて、結果の前に計画を確認してください。

OpenDesign をダウンロードすべてのスキルを見る
ターミナル
npx skills add https://github.com/shadcn-ui/ui --skill shadcn

OpenDesign デスクトップ版

ひとつのデザインシステムで、すべての制作物をブランドらしく

完全な Vibe Design Workspace で、同じブランドルールを Web サイト、スライド、操作できるプロトタイプ、ダッシュボード、画像、HTML 動画に展開できます。ローカルの Codex、Claude Code、Cursor などを接続して無料で制作しましょう。

  • Web、スライド、プロトタイプ、ダッシュボード、画像、動画
  • 140+ のデザインシステムと完全なテンプレート／スキルライブラリ
  • ローカル Codex と 21+ のコーディングエージェントを接続 · 無料
無料ダウンロード

macOS と Windows に対応