shadcn-first は何をしますか？
あなたの後でこのコードを保守する人がいます。手書きの div に独自クラスを付けたり、style={{}} を書くたびに、その人の負担は増え、コードは乖離していきます。手書きの UI は、ライブラリが無料で提供するクラフトマンシップ（フォーカスリング、ホバー・アクティブ状態、キーボードナビゲーション、スケルトン、空状態、ARIA）を静かに削ぎ落とします。
手順。決して省略しないこと。
- ブロック。
ui.shadcn.com/blocksには、サイドバー、ダッシュボード、ログイン、データテーブルが丸ごと用意されています。ブロックをインストールします。 - コンポーネント。 ブロックが合わなければ、レジストリからコンポーネントを使います。
- 合成 2～3個のコンポーネントを組み合わせます。
- 自分で書く。 ここだけです。コミットメッセージには、評価したブロックまたはコンポーネントと、それらが合わなかった理由を必ず書きます。
デザインをコンポーネントに合わせるのであって、コンポーネントをデザインに合わせてはいけません。ブランドやビジュアル言語は、1つのテーマのテーマ変数 で表現し、コンポーネントの横に画面ごとの CSS を決して書かないでください。
ツールとその使い分け
2つの MCP サーバーが設定されています。それぞれ役割が異なります。
shadcn-official（npx shadcn@latest mcp）はプロジェクトを認識します。リポジトリの components.json を読み込みます。実際の作業にはこちらを使ってください。
| ツール | 使用目的 |
|---|---|
get_project_registries | プロジェクトが初期化されていることを確認する |
search_items_in_registries | あいまい検索で目的のコンポーネントを見つける |
list_items_in_registries | 利用可能なすべてのコンポーネントを表示する |
view_items_in_registries | コンポーネントの実際のソースと依存関係を確認する |
get_item_examples_from_registries | API を推測せずに実際の使用例をコピーする |
get_add_command_for_items | 正確な npx shadcn add ... のコマンドを取得し、実行する |
get_audit_checklist | コードを書いた後に実行する。これがゲートです。 |
shadcn（@jpisnice/shadcn-ui-mcp-server）はレジストリ全体を対象とし、ブロックとテーマを知っています。list_blocks、get_block、list_themes、get_theme、get_component_demo。手順1とテーマ設定に使います。
プロジェクトに components.json がない場合、公式ツールはエラーになります。最初に npx shadcn@latest init を実行してから続けてください。
AI チャットインターフェースには prompt-kit（prompt-kit.com、shadcn 互換）を使ってください。chat-container、message、prompt-input、scroll-button、markdown、code-block、loader。同じルールで、ゼロから作らずインストールします。
人々がインストールせずに再発明しているコンポーネント
sidebar（折りたたみ可能、フッターユーザーメニュー付き）、command（Cmd+K パレット）、table + TanStack データテーブルブロック、tabs、sheet、dialog、alert-dialog、popover、tooltip、skeleton、sonner（トースト）、form（react-hook-form + zod）、breadcrumb、resizable、scroll-area、avatar、badge、separator、dropdown-menu、select、collapsible、chart。
これらを手書きで作り始めていることに気づいたら、やめてインストールしてください。
キーボードショートカット
コマンドパレットには Cmd+K を使ってください。command コンポーネントが標準で提供する cmdk の慣例です。Cmd+L はブラウザのアドレスバーに予約されており、Chrome では確実にインターセプトできません。誰かが Cmd+L を要求した場合は、Cmd+K をバインドし、Cmd+L も機会があれば追加し、その理由を説明してください。
「完了」は主張ではなく計測
完了を報告する前に、get_audit_checklist を実行して以下の数値を報告します。
- 削除したカスタム UI の行数
- インストールしたブロックとコンポーネントの数
- 残っている
style={{}}の数（grep -rc 'style={{' src/） - 画面ごと：
components/ui/からの要素数 vs 手書きの要素数
手書きのコードが残っている場合は、その理由を明記し、見逃さないようにします。スクリーンショットは画面がレンダリングされていることの証明であり、カウントはルールが守られていることの証明です。両方が揃って初めて「完了」です。
禁止事項
- UI に絵文字は使わない。本当の SVG アイコンを使う（Lucide は shadcn に同梱されています）。
- ブランドロゴにテキスト入り丸を使用しない。本当の SVG パスを入手する：SimpleIcons > svgl.app > gilbarbara/logos > favicon。
- アクセントカラーは最大1～2色。カードに色付きの左ボーダーを付けない。すべての要素にグラデーションをかけない。
- 色を変えるためにコンポーネントをフォークしない。テーマ変数を変更する。