shadcn-component-boundaries について
shadcn-component-boundariesは、shadcnを使うプロジェクトでUIコンポーネントを整理するスキルです。プロジェクト設定に基づいて所有区分を判断し、一方向の依存境界を定めます。
主な機能
- 01components.jsonからディレクトリ別名を解決
- 02レジストリのプリミティブと製品コンポーネントを区別
- 03再利用範囲に応じた配置
- 04feature → common → uiの依存を遵守
- 05ui境界とスタイルバリアントを確認
活用シーン
- 01shadcnプロジェクトへのコンポーネント追加
- 02既存コンポーネントの移動やレビュー
- 03配置と依存方向の確認
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/shadcn-component-boundariesを入力して読み込まれたか確認します。
同梱ファイルreferences/placement-examples.md
詳細
shadcn コンポーネントの境界
有効化の条件
shadcn を使用するプロジェクトで、UI コンポーネントを作成、移動、ラップ、またはレビューするときに、このスキルを読み込みます。
厳守事項
components.json（componentsとuiのaliases）またはインストール済み shadcn スキルのプロジェクトコンテキストコマンドを使ってパスを解決します。components/とsrc/components/のどちらかを決めつけてはいけません。- 解決した
uiディレクトリは、shadcn または互換レジストリからインストールされた、レジストリ管理下のプリミティブ専用とします。 - 製品独自のラッパー、複合コンポーネント、セクション、ドメインコンポーネント、または機能の振る舞いを
uiディレクトリに配置してはいけません。 - 再利用可能な製品独自コンポーネントは、解決した components ディレクトリ内の
common/に配置します。 - 機能固有のコンポーネントは、名前付きの機能フォルダーに配置するか、その機能と同じ場所に配置します。
- 合成します。プリミティブに製品の振る舞いを追加するのではなく、レジストリプリミティブを
common/または機能フォルダーでラップします。 - 依存関係は一方向に保ちます。feature → common → ui。
uiディレクトリからcommonや機能フォルダーをインポートしてはいけません。 - グローバルスタイルシートのセマンティックトークンを使用します。トークンをクォーク、レジストリプリミティブをアトムとして扱い、パスに分子や有機体の名前を無理に付けないでください。
@shadcn/lintが設定されている場合、shadcn/no-restyleによってuiの境界が守られます。呼び出し元ではclassNameを通じてレイアウト用クラスを渡せますが、見た目はバリアントとサイズで決まります。呼び出し元でスタイルを変更するのではなく、プリミティブにバリアントを追加してください。
判断基準
| コンポーネントの所有者 | 配置先 |
|---|---|
| shadcn または互換レジストリのプリミティブ | 解決した ui ディレクトリ |
| 再利用可能な製品独自コンポーネント | <components>/common/ |
| 機能固有のコンポーネント | <components>/<feature>/ または機能と同じ場所 |
| ルートまたはページの合成 | フレームワークのルート／ページディレクトリ |
| テーマトークン | グローバルスタイルシートの変数 |
実行手順
components.jsonを読み、componentsとuiのエイリアスをディレクトリに解決します。- カスタムマークアップを作成する前に、インストール済みのプリミティブを検索します。
- 上の表を使って、所有者と再利用の範囲を分類します。
- コンポーネントを配置します。例外については references/placement-examples.md を参照してください。
- 製品独自のファイルが
uiに入っていないこと、逆方向のインポートが追加されていないことを確認します。
出力条件
作成または移動したすべてのコンポーネントについて、所有者の分類と最終パスを明記し、依存関係の方向が守られていることを確認します。
参考資料
- references/placement-examples.md — 配置判断の具体例。
コメント
Markdown 対応