Shadcn UI & Blocks

Shadcn UI & ShadcnBlocks 連携

このスキルは、shadcn/ui コンポーネントとプレミアムな ShadcnBlocks テンプレートを使用して、洗練されたフロントエンドを構築できるようにします。主な機能は、あらゆる UI のニーズに対して最適なブロックまたはコンポーネントをインテリジェントに推薦することです。単に適切なカテゴリだけでなく、そのカテゴリ内の適切なバリアントを提案し、その後セットアップとインストールを処理します。

使用するタイミング

次の場合にこのスキルを有効にします:

• 新しいフロントエンド、ランディングページ、マーケティングサイト、またはアプリ UI を作成する場合
• プロジェクトが React/Next.js と Tailwind CSS を使用している、または使用すべき場合
• 構築済みの UI セクション(ヒーロー、料金、機能、お客様の声など)が開発を加速させる場合
• ユーザーが特定の UI 要素(フォーム、チャート、ダイアログ、ナビゲーションなど)を必要としている場合
• ユーザーが shadcn、shadcn/ui、shadcnblocks、または Tailwind ベースの UI コンポーネントに言及した場合

ブロックとコンポーネントの比較

	ブロック	コンポーネント
内容	ページ全体のセクション	再利用可能な UI 要素
サイズ	ヒーロー、料金、フッターなど	ボタン、入力、ダイアログなど
数	71 カテゴリにわたる 1,338 個	60 以上のグループにわたる 1,189 個
アクセス	プレミアム(API キーが必要)	無料
インストール	@shadcnblocks/<name><number>	@shadcnblocks/<type>-<style>-<number>

ブロックを使用して、構築済みのセクションからページ全体のレイアウトを構成します。 コンポーネントを使用して、カスタムコード内の個々の UI 要素を実装します。

---

インテリジェントなブロック選択

0〜2 質問ルール

ブロックを推薦する際は、次の段階的な開示フローに従います:

• 0 質問: ユーザーのリクエストが直接マッチングできるほど具体的である場合(例:「メールアドレス取得フォーム付きのヒーローを追加して」→ cta_pattern: form_capture でマッチング)
• 1 質問: セクションは明確だが、スタイル/レイアウトが曖昧である場合(例:「機能セクションを追加して」→ レイアウトの好みを尋ねる)
• 最大 2 質問: セクションとスタイルの両方が不明確である場合(例:「製品を紹介するセクションを追加して」→ セクションの種類を尋ね、次にスタイルを尋ねる)

3 つ以上の質問は絶対にしないでください。 それでも曖昧な場合は、最適な 2〜3 個を選び、トレードオフを説明します。

意思決定フロー: 推論 → 質問 → 候補の絞り込み

ステップ 1 — リクエストから推論する(常に最初に行う)

何かを尋ねる前に、できるだけ多くの制約を抽出します:

• セクションの種類: ヒーロー、機能、料金、お客様の声、CTA、FAQ、ナビゲーションバー、フッター、お問い合わせ、統計
• 目的のキーワード: 「signup」→ convert/capture_leads、「trust」→ trust、「compare plans」→ compare
• レイアウトのヒント: 「grid」→ grid_cards、「side by side」→ split、「accordion」→ accordion interaction
• トーンのヒント: 「clean」→ minimal、「bold」→ bold、「professional」→ enterprise
• メディアのヒント: 「with screenshots」→ screenshot media、「video」→ video media
• 密度のヒント: 「simple」→ minimal density、「detailed」→ rich density

ステップ 2 — 的を絞った質問をする(必要な場合のみ)

AskUserQuestion を使用して、構造化された多肢選択形式で絞り込みます。セクションごとに事前定義された質問と選択肢については、references/block-index.md → selection_prompts を参照してください。

事前定義されたプロンプトがあるセクション: ヒーロー、機能、料金、お客様の声、CTA、FAQ、ナビゲーションバー、フッター、お問い合わせ、統計。

機能セクションのリクエストの例:

AskUserQuestion:
  question: "How do you want to showcase your features?"
  options:
    - "Card grid (3-4 columns with icons)" — Classic feature grid with icon + description per card
    - "Alternating image + text rows" — Deep-dive with large visuals, great for product tours
    - "Bento / asymmetric grid" — Modern editorial layout with mixed-size cards
    - "Simple icon list or checklist" — Compact, scannable benefit list

AskUserQuestion が利用できない場合は、同じ質問を番号付きの選択肢とともにインラインで尋ねます。

ステップ 3 — タグをマッチングして最適な 2〜3 個を返す

ユーザーの回答をタグフィルターにマッピングし、references/block-index.md のエントリとマッチングします。次の形式で正確に 2〜3 個の推薦を返します:

Here are the best matches for your [section type]:

1. **[block-id]** — [1-line "why this one"]
   Layout: [layout] · Tone: [tone] · [key differentiator]

2. **[block-id]** — [1-line "why this one"]
   Layout: [layout] · Tone: [tone] · [key differentiator]

3. **[block-id]** — [1-line "why this one"]
   Layout: [layout] · Tone: [tone] · [key differentiator]

Which one works best? I'll install it and set it up.

ユーザーが選択したら、インストールコマンドを提供し、それをページに組み込みます。

マッチングに使用するタグの軸

以下は、ブロックを区別するために references/block-index.md から使用される主要な軸です:

軸	わかること	値の例
layout	視覚的な配置	centered、split_right_media、grid_cards、bento、alternating
tone	美的な印象	minimal、modern、bold、enterprise、elegant、playful
goal	ビジネス上の目的	awareness、explain、trust、convert、capture_leads、compare
cta_pattern	アクションの種類	single_primary、primary_secondary、form_capture、multi_action
media	ビジュアルコンテンツ	screenshot、illustration、video、icons、avatars、logos
interaction	動的な挙動	static、accordion、tabs、carousel、toggle、hover
items_count	表示される項目数	few、moderate、many
content_density	コンテンツ量	minimal、standard、rich
complexity	実装の手間	low、medium、high

どのリファレンスをいつ使うか

シナリオ	使用するもの
最適なブロックを提案する（デフォルト）	references/block-index.md — 選択プロンプト付きのタグ付けされた候補
ユーザーが特定の番号のバリアントを希望する	references/block-catalog.md — すべてのバリアント番号を含む完全なカタログ
block-index にないセクション（例: ブログ、ギャラリー）	references/block-catalog.md — カテゴリのデフォルトにフォールバック
ユーザーがすべてのオプションを閲覧したい	https://shadcnblocks.com/explorer/blocks に誘導
個別の UI 要素が必要	references/component-catalog.md — 無料コンポーネント

---

カテゴリ早見リファレンス

まだ block-index.md にないセクションには、以下のデフォルトを使用します:

コンテンツとブログ

必要なもの	カテゴリ	最初に使うもの
ブログ一覧	blog（22 バリアント）	blog1
ブログ記事ページ	blogpost（7 バリアント）	blogpost1
変更履歴	changelog（7 バリアント）	changelog1
コードスニペット	code-example（5 バリアント）	code-example1

会社概要とチーム

必要なもの	カテゴリ	最初に使うもの
会社概要セクション	about（17 バリアント）	about1
チームページ	team（14 バリアント）	team1
会社の沿革	timeline（15 バリアント）	timeline1
求人情報	careers（9 バリアント）	careers1

Eコマース

必要なもの	カテゴリ	最初に使うもの
商品カード	product-card（10 バリアント）	product-card1
商品一覧	product-list（10 バリアント）	product-list1
商品詳細	product-detail（10 バリアント）	product-detail1
ショッピングカート	shopping-cart（11 バリアント）	shopping-cart1
チェックアウト	checkout（6 バリアント）	checkout1
注文履歴	order-history（5 バリアント）	order-history1

アプリとダッシュボード

必要なもの	カテゴリ	最初に使うもの
ダッシュボードのチャート	chart-card（27 バリアント）	chart-card10
データテーブル	data-table（32 バリアント）	data-table1
アプリのサイドバー	sidebar（21 バリアント）	sidebar1
アプリシェルのレイアウト	application-shell（14 バリアント）	application-shell1
ユーザープロフィール	user-profile（12 バリアント）	user-profile1

ポートフォリオ

必要なもの	カテゴリ	最初に使うもの
画像ギャラリー	gallery（48 バリアント）	gallery1
プロジェクト一覧	projects（25 バリアント）	projects1
プロジェクト詳細	project（33 バリアント）	project1
ケーススタディ	case-studies（6 バリアント）	case-studies1

ビジュアルと装飾

必要なもの	カテゴリ	最初に使うもの
背景パターン	background-pattern（40 バリアント）	background-pattern1
アニメーションシェーダー	shader（10 バリアント）	shader1
Bento グリッドレイアウト	bento（8 バリアント）	bento1

ナビゲーションとその他

目的	カテゴリ	はじめに使うもの
お知らせバー	banner (7 variants)	banner1
セール・プロモバー	promo-banner (7 variants)	promo-banner1
パートナーロゴ	logos (13 variants)	logos1
比較	compare (10 variants)	compare1

---

適切なコンポーネントの選択

完全なカタログについては references/component-catalog.md を参照してください。主なグループ:

目的	コンポーネントグループ	例
フォームレイアウト	Form (86)	form-signin-1
ラベル付き入力	Field (38)	field-standard-1
アドオン付き入力	Input Group (39)	input-group-standard-1
検索可能なセレクト	Combobox (42)	combobox-standard-1
ファイルアップロード	File Upload (44)	file-upload-standard-1
日付ピッカー	Date Picker (8)	date-picker-standard-1
アラートメッセージ	Alert (25)	alert-error-1
確認ダイアログ	Alert Dialog (39)	alert-dialog-standard-1
ローディングスケルトン	Skeleton (30)	skeleton-standard-1
トースト通知	Sonner (24)	sonner-standard-1
空の状態	Empty (22)	empty-standard-1
モーダルダイアログ	Dialog (17)	dialog-standard-1
サイドパネル	Sheet (29) / Drawer (22)	sheet-standard-1
アコーディオン	Accordion (21)	accordion-standard-1
データチャート	Chart (70)	chart-standard-1
コマンドパレット	Command (21)	command-standard-1
ドロップダウンメニュー	Dropdown Menu (30)	dropdown-menu-standard-1
キーボードショートカット	KBD (39)	kbd-standard-1

---

基本的なワークフロー

1. プロジェクトの基盤を確認する

プロジェクトで shadcn/ui が初期化されていることを確認してください。まだの場合は:

npx shadcn@latest init

これにより、プロジェクトのルートに components.json が作成されます。

2. ShadcnBlocks レジストリを設定する

components.json に @shadcnblocks レジストリがすでに含まれているか確認してください。まだの場合は、次を実行します:

bash "${CLAUDE_PLUGIN_ROOT}/skills/shadcn-ui/scripts/setup-shadcnblocks.sh" .

これにより、components.json に @shadcnblocks レジストリが追加され、.env に SHADCNBLOCKS_API_KEY が設定されます。

スクリプトを実行できない場合 (たとえば jq がない場合) は、手動で設定します:

1. .env に追加: SHADCNBLOCKS_API_KEY=<key>
2. components.json にレジストリを追加:

{
  "registries": {
    "@shadcnblocks": {
      "url": "https://shadcnblocks.com/r/{name}",
      "headers": {
        "Authorization": "Bearer ${SHADCNBLOCKS_API_KEY}"
      }
    }
  }
}

3. ブロックを選択してインストールする

上記のインテリジェント選択フローを使用して最適なブロックを推薦し、インストールします:

# Blocks (full page sections)
npx shadcn add @shadcnblocks/hero125
npx shadcn add @shadcnblocks/pricing3

# Components (UI elements)
npx shadcn add @shadcnblocks/accordion-standard-1
npx shadcn add @shadcnblocks/file-upload-standard-1

4. ページを構成する

ページレイアウトでブロックをインポートして構成します:

import { Navbar1 } from "@/components/navbar1";
import { Hero125 } from "@/components/hero125";
import { Feature3 } from "@/components/feature3";
import { Footer1 } from "@/components/footer1";

export default function LandingPage() {
  return (
    <>
      <Navbar1 />
      <Hero125 />
      <Feature3 />
      <Footer1 />
    </>
  );
}

ブロックは完全に編集可能なソースコードであり、ロックされた依存関係ではありません。インストール後に props とコンテンツをカスタマイズしてください。

ランディングページの組み立てパターン

一般的なマーケティング用ランディングページでは、各セクションにインテリジェント選択フローを使用します。よくある組み立て例:

npx shadcn add @shadcnblocks/navbar1      # Simple nav with CTA
npx shadcn add @shadcnblocks/hero125      # Modern centered hero
npx shadcn add @shadcnblocks/logos1        # Trust logos strip
npx shadcn add @shadcnblocks/feature3     # 3-column feature cards
npx shadcn add @shadcnblocks/stats1       # Metrics bar
npx shadcn add @shadcnblocks/testimonial1 # Social proof grid
npx shadcn add @shadcnblocks/pricing3     # 3-tier pricing cards
npx shadcn add @shadcnblocks/faq1         # Accordion FAQ
npx shadcn add @shadcnblocks/cta1         # Final call to action
npx shadcn add @shadcnblocks/footer1      # Multi-column footer

これらはそれぞれ「モダン SaaS」のトーンに合わせて選択されたものです。異なるトーン (エンタープライズ、ミニマル、ボールド、遊び心) では、選択フローが異なるバリアントを推薦します。

API キーの管理

ShadcnBlocks の API キーは複数の方法で指定できます (順に確認されます):

1. 環境変数 (最も簡単): シェルまたは .env ファイルに SHADCNBLOCKS_API_KEY を設定します
2. 1Password CLI: ヘルパースクリプトは op read を使用してキーを取得します。OP_SHADCNBLOCKS_REF に 1Password の参照パスを設定するか、デフォルトでは op://Platform Infra/ShadcnBlocks API Key/credential が使用されます

ヘルパースクリプトを使用してキーを取得します:

bash "${CLAUDE_PLUGIN_ROOT}/skills/shadcn-ui/scripts/get-api-key.sh"

セキュリティ: API キーをソースファイルにハードコードしないでください。常に .env で SHADCNBLOCKS_API_KEY を使用し、.env が .gitignore に含まれていることを確認してください。

トラブルシューティング

問題	解決方法
インストール時の認証エラー	.env に有効なキーで SHADCNBLOCKS_API_KEY が設定されていることを確認してください
レジストリが見つからない	components.json に registries キーが存在するか確認してください
components.json が見つからない	npx shadcn@latest init を実行してください
1Password へのアクセス	op signin を実行し、op vault list でボルトを確認してください
ブロックが見つからない	https://shadcnblocks.com でブロック名を確認してください

参照ファイル

• references/block-index.md — インテリジェントなブロック推薦のための選択プロンプト付きタグ付きピック（主要ソース）
• references/block-catalog.md — 71 カテゴリ、1,338 ブロックの完全なカタログ。バリアント番号とインストールコマンド付き
• references/component-catalog.md — 60 以上のグループ、1,189 コンポーネントの完全なカタログ。インストール構文付き
• references/setup-guide.md — トラブルシューティングを含む詳細なステップバイステップのセットアップ

スクリプト

• scripts/setup-shadcnblocks.sh — 自動プロジェクトセットアップ（キーの取得、レジストリの設定）
• scripts/get-api-key.sh — API キーの取得（環境変数または 1Password）