shadcn-ui

shadcn-ui スキルの概要

shadcn-ui は何のためのものか

shadcn-ui スキルは、shadcn/ui コンポーネントを単なる差し込み用ライブラリとして扱うのではなく、実際のアプリの中で計画・インストール・調整するための支援をします。Design Implementation に向けて、適切なコンポーネントの選定、依存関係の接続、コピーしたコードを既存プロダクトに合わせて形づくる作業を実用的に進めたい開発者に最適です。

この shadcn-ui スキルが違う理由

shadcn/ui はコードベースにコピーして使うため、主な判断軸は「どのパッケージを import するか」ではなく、「適切なコンポーネントをどう導入し、その後の実装をどう自分たちで持つか」です。カスタマイズ性、Tailwind ベースのスタイリング、Radix や Base UI のプリミティブ、そしてブラックボックス的な UI の挙動を避けたい場合に、この shadcn-ui スキルが役立ちます。

最適な利用シーン

shadcn-ui のインストール支援、コンポーネントの探索、パターン選定、フォーム・テーブル・認証フロー・レイアウト・再利用可能な UI ブロックの安全な出発点が必要なときに使ってください。逆に、コードベースの文脈がない純粋なビジュアルモックアップが欲しい場合や、スタックが React、Tailwind、コンポーネントをコピーして組み込むワークフローに対応していない場合は、あまり向いていません。

shadcn-ui スキルの使い方

正しくインストールして起動する

shadcn-ui スキルは次のコマンドでインストールします:
npx skills add google-labs-code/stitch-skills --skill shadcn-ui --global

そのうえで、アプリの文脈、対象コンポーネント、期待する挙動を明示したタスクで呼び出してください。良いプロンプトは、フレームワーク、ルーティング方式、スタイル制約、さらにインストールだけ欲しいのか、カスタマイズまで欲しいのかを具体的に伝えています。

スキルに適切な入力を与える

弱いプロンプトは「ボタンを追加して」です。より良いプロンプトは、「Next.js アプリで signup 画面用に shadcn-ui の button、card、form コンポーネントを導入し、Tailwind classes は既存の neutral テーマに揃え、必要なファイル変更も示してください」といったものです。ここまで具体的だと、スキルが適切なコンポーネントを選びやすくなり、汎用的な出力を避けられます。

まず読むべきファイル

最初に SKILL.md でワークフローを確認し、続いて README.md、resources/component-catalog.md、resources/setup-guide.md、resources/customization-guide.md、resources/migration-guide.md を見てください。さらに examples/form-pattern.tsx、examples/data-table.tsx、examples/auth-layout.tsx を参照すると、shadcn-ui が実際のアプリパターンでどう使われるかがわかります。

コンポーネント起点のワークフローで進める

shadcn-ui を使うときは、まずコンポーネントのカテゴリを特定し、次に依存関係を確認し、その後でサンプルパターンを見て、最後に自分のアプリに合わせてコードを調整します。Design Implementation の作業では、レイアウトのゴール、状態、制約を最初に伝えてください。製品意図をコンポーネント構成に落とし込めるとき、このスキルは最も力を発揮します。

shadcn-ui スキルの FAQ

すでに shadcn/ui を知っていても shadcn-ui スキルは必要ですか

はい、インストール判断を素早く行い、実装ミスを減らしたいなら必要です。shadcn-ui スキルは docs の要約ではありません。「どのコンポーネントがあるか」から「何をコピーし、何を設定し、コードベース内で何を変えるべきか」へ進むための助けになります。

shadcn-ui は Next.js 専用ですか

いいえ。ワークフローは React ファーストですが、このスキルの本質は単一フレームワークではなく、コンポーネントの所有と統合にあります。Tailwind CSS をすでに使っていて、ローカルのコンポーネントファイルを受け入れられるプロジェクトで特に強みを発揮します。

shadcn-ui の最大の境界は何ですか

ホスト型のコンポーネントライブラリではないことです。チームがパッケージ方式のアップグレード、ローカルコードの最小化、Tailwind を使わないビジュアルシステムを前提にしているなら、shadcn-ui は相性がよくないかもしれません。コードの所有権と独自の Design Implementation が、中央集約されたライブラリ管理より重要なときに最適です。

shadcn-ui は初心者向けですか

ほどほどに向いています。初心者でも一般的な UI パターンには使えますが、ファイル配置、スタイリングトークン、コンポーネントの組み立て方は理解している必要があります。最短ルートは、まずシンプルな 1 コンポーネントから始めて、インストールを確認してから大きなフォームやテーブルへ広げることです。

shadcn-ui スキルの改善方法

コンポーネントだけでなく、デザイン目標を明示する

入力が具体的なほど、shadcn-ui の出力も良くなります。「モーダルを作って」ではなく、「チーム削除用の destructive-confirmation dialog を作り、warning 状態、cancel ボタン、loading の submit 状態を付けてください」と伝えてください。そうすることで、実装のどこを最適化すべきかがスキルに伝わります。

スタックと制約を早めに共有する

フレームワーク、TypeScript の使い方、Tailwind の設定、app router か pages router か、Radix UI か Base UI のプリミティブを使っているかを伝えると、このスキルはよりよく機能します。これらの情報は、shadcn-ui のインストール手順、依存関係の選択、そして出力後にどれだけ調整が必要かに影響します。

欲しい実装経路をはっきり指定する

素早く導入したいなら、最小限のインストールと最初の画面までを依頼してください。design system の流れで進めたいなら、再利用可能な variants、token との整合、共有レイアウトプリミティブを求めてください。そうすれば、コードが足りなすぎることも、抽象化しすぎることも防げます。

まず動くベースから反復する

最初の結果でコンポーネント構造を確認し、そのうえで spacing、variants、アクセシビリティラベル、empty/error/loading 状態を詰めていきます。よくある失敗は UI 意図の指定不足なので、改善に必要なのはたいてい大きな追加依頼ではなく、2 回目のプロンプトをより鋭くすることです。