shadcn-detection について
shadcn-detectionは、shadcn/uiを扱う開発者やエージェント向けのプロジェクト分析スキルです。CLI確認と複数の加重シグナルを組み合わせ、コンポーネント作業前にBase UI、Radix、React Aria、混在、未設定のいずれかを判定します。
主な機能
- 01shadcn CLIによる確定的な確認
- 02依存関係と設定のスキャン
- 03ソースのインポートと属性の分析
- 04ロックファイルからのパッケージマネージャー検出
- 05Base、Radix、Aria、混在、未設定の判定
活用シーン
- 01コンポーネント追加前のshadcn/ui基盤確認
- 02移行が必要なプリミティブ混在の特定
- 03基盤に応じたコンポーネントパターンの選択
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/shadcn-detectionを入力して読み込まれたか確認します。
詳細
Base UI / Radix / React Aria / Mixed（マイグレーションが必要）/ None（新規セットアップ）の判定を生成し、これが下流のすべての shadcn コンポーネントまたはマイグレーションタスクのゲートとなります。
shadcn の検出
エージェントワークフロー（必須）
検出の前に、エージェントを並列で起動します。それぞれ name を指定した Agent 呼び出しを 1 回ずつ行います:
- fuse-ai-pilot:explore-codebase - プロジェクト構造をスキャン
- fuse-ai-pilot:research-expert - 最新のプリミティブパターンを検証
その後: 結果を使用してコンポーネントワークフローを構成します。
概要
| 機能 | 説明 |
|---|---|
| CLI プローブ（信頼できる） | {runner} shadcn@latest info --json -> .config.base = base | radix | aria（加えて .config.style、.components、.links） |
| パッケージスキャン | @base-ui/react、radix-ui / @radix-ui/*、react-aria-components を検出 |
| 設定チェック | components.json の style プレフィックス（base-*、radix-*/new-york、aria-*）を分析 |
| Import 分析 | ソースをスキャンして import パターンを確認 |
| 属性スキャン | data-state=（Radix）対 data-open（Base UI）対 data-entering/data-placement（React Aria） |
| パッケージマネージャー | ロックファイルから bun/npm/pnpm/yarn を検出 |
| ベース | パッケージ | Style プレフィックス | コンポジション | ドキュメント |
|---|---|---|---|---|
| Base UI（デフォルト） | @base-ui/react | base-* | render プロップ | /docs/components/base/<name> |
| Radix | radix-ui（レガシー @radix-ui/react-*） | radix-*、レガシー new-york | asChild | /docs/components/radix/<name> |
| React Aria | react-aria-components | aria-* | トリガーラッパー（DialogTrigger > Button + Dialog）、slot、onPress | /docs/components/aria/<name> |
既知のベース横断的な依存関係（混在プロジェクトではありません）: radix-* Combobox は @base-ui/react をインポートします（Radix には Combobox がありません）。Questionnaire と MessageScroller はすべてのベースで @shadcn/react をインポートします。現在のすべてのコンポーネントは cn パッケージから cn をインポートします。
重要なルール
- コンポーネント作業の前に必ず検出を実行する
- 最大限の精度のために5 つのシグナルすべてを確認する
- 混在状態をマイグレーションケースとして扱う。決して無視しない
- セッション中は結果をキャッシュする。再検出は不要
- ロックファイルの優先順位に従ってパッケージマネージャーを検出する
アーキテクチャ
project/
├── package.json # Step 1: deps scan
├── components.json # Step 2: style field
├── bun.lock|bun.lockb|pnpm-lock.yaml|yarn.lock|package-lock.json # Step 5: PM
└── src/|components/|app/ # Step 3-4: imports + attrs
→ 完全な例については detection-script.md を参照してください
5 ステップの検出アルゴリズム
ステップ 0: components.json が存在する場合、{runner} shadcn@latest info --json がベースを直接返します。以下の重み付きスキャンはそれを確認し、混在プロジェクトを検出します。
| ステップ | シグナル | 重み |
|---|---|---|
| 1 | package.json の依存関係（@base-ui/react、radix-ui / @radix-ui/*、react-aria-components） | 40% |
| 2 | components.json の style プレフィックス（base-*、radix-*/new-york、aria-*） | 20% |
| 3 | ソースファイル内の import パターン | 25% |
| 4 | Data 属性（data-state= / data-open / data-entering） | 15% |
| 5 | パッケージマネージャー（ロックファイル → bunx/npx/pnpm dlx/yarn dlx） | - |
判断テーブル
各ベースはそれぞれ独自のスコア（0〜100）を持ちます。
| スコア | 結果 | アクション |
|---|---|---|
| Base UI のみ >50 | Base UI | Base UI パターン（render）を使用 |
| Radix のみ >50 | Radix | Radix パターン（asChild）を使用 |
| React Aria のみ >50 | React Aria | React Aria パターン（トリガーラッパー、onPress）を使用 |
| 2 つ以上が >0（上記の既知のベース間依存を割り引いた後） | Mixed | 移行が必要 |
| すべて 0 | None | 新規セットアップ: init はデフォルトで Base UI になります。-b radix または -b aria を渡して選択します |
ベストプラクティス
すべきこと
- コンポーネントの作業の前に検出を実行する
- 精度のために 5 つのシグナルすべてを確認する
- 「mixed」状態は移行ケースとして扱う
すべきでないこと
- 確認せずに Radix（または新しいデフォルトである Base UI）を前提とする
- components.json の分析を省略する
- data 属性のシグナルを無視する
- Radix スタイルの Combobox からの
@base-ui/reactを mixed プロジェクトとしてカウントする
リファレンスガイド
概念
| トピック | リファレンス | 参照すべきタイミング |
|---|---|---|
| Radix パターン | radix-patterns.md | Radix UI のシグナルを特定するとき |
| Base UI パターン | baseui-patterns.md | Base UI のシグナルを特定するとき |
| アルゴリズム | detection-algorithm.md | スコアリングロジックや React Aria のシグナルを理解するとき |
テンプレート
| テンプレート | 使用するタイミング |
|---|---|
| detection-script.md | プロジェクトで検出を実行するとき |