shadcn-ui
shadcn/ui の部品を探し、入れ、自分向けに直す手引き。Google の Stitch の公開元が出している。ただし shadcn の公式のスキルと書き方が食い違う所があり、両方を入れるなら公式に合わせる
npx skills add google-labs-code/stitch-skills/shadcn-ui入れる前にこのスキルがすること・注意点・SKILL.md の原文を確かめてください。解析は安全性の判定ではありません。
- インストール
- 53,833
- 実用度
- 34
- GitHub star
- 8,689
- 最終更新
- 2026/8/18
頼み方の例
そのままコピーして使えますshadcn-uiスキルを使って、このプロジェクトに入っている shadcn/ui の部品と設定（components.json）を確かめ、ログインの画面に要る部品の一覧を出してください。入れる命令は、実行せずに一覧で示してください。
対象のファイルや状況は、ご自身の作業に合わせて置き換えてください。
このスキルがすること
SKILL.md の記述から機械的に抽出- シェルコマンドを実行する記述があります
- パッケージを導入する記述があります
- 実行可能なスクリプトが 1 件同梱されています（シェル）
これは安全性の判定ではありません。 SKILL.md にそう書かれているという事実だけを並べています。実際に問題があるかは使い方と文脈で決まるため、当サイトでは断定しません。導入前に SKILL.md の原文を確認してください。
SKILL.md の規模
コードブロックの言語: bash、css、json、typescript
いつ使うか
shadcn/ui で画面を組むときの基本の手引きです。Google の Stitch の公開元が、画面の生成の後の実装用に出しています。
手引きの中身
- 考え方shadcn/ui は部品の置き場ではなく、コードを自分のプロジェクトに写す仕組み。自分のものとして直せる
- 探すMCP の道具で一覧・説明・見本を見る。独自の置き場（registry）や、画面のまとまり（blocks）も探せる
- 入れる
npx shadcn@latest add <部品>を勧める。手で写す手順もある - 始める新規は
npx shadcn@latest create（見た目・字体・土台の部品を Radix UI か Base UI から選ぶ）、既存はinit - 直す色は CSS 変数、変化形は
cva、拡張はcomponents/ui/の外に包む部品を作る - 確かめる型の検査、リンター、axe での点検、ライト・ダークの両方、画面幅
使わないほうがいいとき
shadcn の公式のスキルを入れているとき
shadcn（shadcn の公開元のもの）は、プロジェクトの設定を読み込んで細かい規約を強制する作りで、こちらより詳しく新しい書き方です。両方を入れると指示がぶつかります。
Stitch の画面を作るとき
画面の生成なら stitch-loop、デザインの決まりなら design-md です。
- shadcn公式のスキル。プロジェクトの設定を読み込んで細かい規約を強制する
- stitch-loopStitch で画面を生成する
- design-mdStitch のデザインの決まり
注意点
シェルの実行と同梱のスクリプト
SKILL.md の解析では、シェルコマンドの実行、パッケージの導入の記述と、実行できるシェルのスクリプトが 1 件同梱されていることが見つかっています。allowed-tools は shadcn の MCP、Read、Write、Bash、Web の取得です。
同梱ファイルは 9 件で、説明、部品の見本、導入の確認のスクリプトなどです。
公式のスキルと食い違う書き方がある
公式のスキルと食い違う書き方があります。2026-09-26 に当サイトで照らすと、次の点が違いました。
| 点 | このスキル | 公式の shadcn |
|---|---|---|
| 読み込み中のボタン | loading を足した包みの部品を作り、アイコンに h-4 w-4 | ボタンに読み込みの属性は無い。Spinner と data-icon で組む。部品の中のアイコンに大きさの指定をしない |
| 色の変数 | HSL の値の例（Tailwind v3 の書き方） | プロジェクトの Tailwind の版（v4 なら @theme inline）に合わせる |
| アイコン | lucide-react を前提にした例 | プロジェクトの設定のアイコンの種類に合わせる。決めつけない |
MCP の道具の名前は 2 種類が混ざっている
MCP の道具の名前は、2 種類が混ざっています。部品の一覧（list_components など）と、独自の置き場の検索（search_items_in_registries など）の名前が並んでいます。使う MCP サーバーに、その道具があるかを確かめてください。
インストール数
インストール数は約 5.1 万件です。同じリポジトリの 5 件は約 3.9 万〜6.1 万件で（2026-09-07 の上流集計）、1 件ずつ選ばれている形です。
インストール数の推移
日次で記録9月18日 〜 11月7日（49日分）
インストール数と 1 日あたりの増加は Skillselion が に集計した値です。上流の更新は数日おきなので、前日比ではありません。GitHub star と最終更新は に GitHub から取得しました。
併用すると強いスキル
design-md
Stitch の画面から DESIGN.md を起こさせる。次の画面を同じ意匠で作るための原本にする
stitch-loop
Google の Stitch で Web サイトの頁を 1 枚ずつ作って組み込み、次に作る頁の指示を自分で書いてバトンを渡す、を繰り返させる。サイトの構想と地図とデザインの決まりをファイルに持ち、回ごとに更新する
shadcn
shadcn/ui を「規約どおりに」書かせる。className の使い方から禁止事項まで持っている
よくある質問
部品を直してよいのですか
よい、が shadcn/ui の考え方です。部品のコードが自分のプロジェクトにあるので、見た目も動きも自由に直せます。ただ本文は、直接直すより components/ui/ の外に包む部品を作るほうを勧めています。
import のエラーが出る・部品が見つからないときは
本文の困ったときの節に、別名（@/）の設定、globals.css の読み込み、Radix の依存の確認が挙がっています。