shadcn-management

Shadcn コンポーネント管理

前提条件

プロジェクトのセットアップを確認します：

shadcn___get_project_registries

components.json が存在しない場合は、ユーザーに次のコマンドを案内します：npx shadcn@latest init

クイック追加ワークフロー

シンプルなコンポーネントの追加（例：「日付ピッカーを追加」）には、次の手順を使用します：

1. 検索 - レジストリでコンポーネントを探します：

   shadcn___search_items_in_registries(registries, query)
   

2. 表示 - 実装の詳細を取得します：

   shadcn___view_items_in_registries(items: ["@shadcn/component-name"])
   

3. 例 - 使用例を取得します：

   shadcn___get_item_examples_from_registries(registries, query: "component-demo")
   

4. インストール - 追加コマンドを取得します：

   shadcn___get_add_command_for_items(items: ["@shadcn/component-name"])
   

5. 出力 - インストールコマンドとコード例を提示します

複雑な構築ワークフロー

複数のコンポーネントを使う機能（例：「ログインフォームを作成」）については、references/workflows.md を参照してください。

複雑な構築ワークフローを使用するケース：

• 機能に3つ以上のコンポーネントが必要な場合
• コンポーネントの階層を計画する必要がある場合
• セクション全体（フォーム、ダッシュボード、モーダル）を構築する場合

コンポーネントの命名パターン

よく使う検索クエリ：

• フォーム：form、input、select、checkbox、radio-group
• レイアウト：card、dialog、sheet、drawer、tabs
• フィードバック：alert、toast、skeleton、progress
• ナビゲーション：button、dropdown-menu、navigation-menu

デモの検索クエリの例：form-demo、card-with-form、dialog-demo

実装後

必ず監査を実行します：

shadcn___get_audit_checklist

カスタムスタイリングとテーマ設定

Shadcn は、デフォルトのスタイリングを備えた構造的な基盤を提供します。独自の見た目にする場合：

次の場合は frontend-design スキルを呼び出します：

• ユーザーがデフォルトの shadcn テーマを超える、独自性のある特徴的なビジュアルスタイルを求めている
• 独自のタイポグラフィ、配色、またはモーション効果が必要
• クリエイティブなデザインが必要なランディングページやマーケティングサイトを構築する
• ユーザーが「カスタムスタイリング」、「独自のデザイン」、「ありきたりではない」と言及している

ワークフロー：

1. コンポーネントの構造と構成には shadcn-management を使用します
2. 見た目のカスタマイズには frontend-design を呼び出します：
   • globals.css のカスタム CSS 変数
   • tailwind.config.js の Tailwind テーマ拡張
   • アニメーションとマイクロインタラクションの強化
   • タイポグラフィと色の調整

カスタマイズ対象：

• @/app/globals.css - CSS 変数、カスタムフォント
• tailwind.config.js - テーマの色、フォント、アニメーション
• コンポーネント単位の className オーバーライド