ShadcnSpace — AIエージェントスキル & デベロッパーガイド

ShadcnSpace は、React、Next.js App Router、Tailwind CSS v4、Base UI、Radix UI を使用して構築された、100以上のプロダクション対応Shadcn UIブロック、フルページテンプレート、ダッシュボードシステム、マーケティングセクション、アニメーション付きマイクロインタラクションを提供するプレミアムオープンソースディストリビューションおよびレジストリです。

Webサイト: https://shadcnspace.com
ブロックディレクトリ: https://shadcnspace.com/blocks
コンポーネントディレクトリ: https://shadcnspace.com/components
フルページテンプレート: https://shadcnspace.com/templates
ドキュメント: https://shadcnspace.com/docs
MCPサーバー: https://mcp.shadcnspace.com/mcp
GitHub: https://github.com/shadcnspace/shadcnspace

クイックスタート — ShadcnSpaceの使い方

以下の4つの簡単なステップに従って、任意のNext.jsまたはReactプロジェクトでShadcnSpaceを使い始めてください。

ステップ1: プロジェクトでShadcnを初期化する

プロジェクトにまだShadcn UIが設定されていない場合:

# shadcn UIの初期化
npx shadcn@latest init

ヒント: Base UIとTailwind CSS v4がプリセットされた構成には、ビジュアルプロジェクト作成ツールhttps://ui.shadcn.com/createを使用してください。

ステップ2: `components.json`でレジストリを設定する

プロジェクトのcomponents.jsonファイルに公式@shadcn-spaceレジストリを追加します:

無料ブロック＆コンポーネント向け:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "base-nova",
  "registries": {
    "@shadcn-space": "https://shadcnspace.com/r/{name}.json"
  }
}

Proユーザー向け (ライセンスキー付き):

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "base-nova",
  "registries": {
    "@shadcn-space": {
      "url": "https://shadcnspace.com/r/{name}.json",
      "params": {
        "email": "${EMAIL}",
        "license_key": "${LICENSE_KEY}"
      }
    }
  }
}

.env または .env.local ファイルに [email protected] と LICENSE_KEY=your-key を追加してください。

ステップ3: ブロック＆コンポーネントをインストールする

Base UIまたはRadix UIのいずれかを使用して、パッケージマネージャーでインストールコマンドを実行します:

# Base UI (推奨デフォルト)
npx shadcn@latest add @shadcn-space/hero-01

# Radix UI
npx shadcn@latest add @shadcn-space/radix/hero-01

ステップ4: コードにインポートして使用する

コンポーネントは、完全なソースコード所有権でsrc/components/shadcn-space/フォルダに直接コピーされます:

import Hero01 from "@/components/shadcn-space/hero-01";

export default function LandingPage() {
  return (
    <main>
      <Hero01 />
    </main>
  );
}

Base UI vs Radix UI — 完全コマンドガイド

ShadcnSpaceはデュアルバリアントサポートを提供します。すべてのブロック、コンポーネント、フルページは、Base UIとRadix UIの両方のプリミティブでメンテナンスされています。

違いを理解する

Base UI (推奨): shadcn UIのモダンな基盤。統一された@base-ui/reactパッケージ、Slotの代わりに明示的なrenderプロップ、および別個のPositionerコンポーネントを使用します。
Radix UI: クラシックなヘッドレス基盤。個別の@radix-ui/react-*パッケージと、Slotを使用したasChildプロップを使用します。

1. Base UI コマンド

レジストリ名前空間経由 (推奨 — Shadcn CLI v3)

# ブロック＆コンポーネント
npx shadcn@latest add @shadcn-space/<アイテム名>

# 例:
npx shadcn@latest add @shadcn-space/hero-01
npx shadcn@latest add @shadcn-space/bento-grid-01
npx shadcn@latest add @shadcn-space/button-06
npx shadcn@latest add @shadcn-space/pricing-01
npx shadcn@latest add @shadcn-space/sidebar-01

# フルページ:
npx shadcn@latest add @shadcn-space/pages/<ページ名>
# 例:
npx shadcn@latest add @shadcn-space/pages/landing-page-01

直接URL経由 (Shadcn CLI v2 / フォールバック)

# ブロック＆コンポーネント
npx shadcn@latest add https://shadcnspace.com/r/<アイテム名>.json

# ページ
npx shadcn@latest add https://shadcnspace.com/r/pages/<ページ名>.json

2. Radix UI コマンド

レジストリ名前空間経由 (推奨 — Shadcn CLI v3)

# ブロック＆コンポーネント
npx shadcn@latest add @shadcn-space/radix/<アイテム名>

# 例:
npx shadcn@latest add @shadcn-space/radix/hero-01
npx shadcn@latest add @shadcn-space/radix/bento-grid-01
npx shadcn@latest add @shadcn-space/radix/button-06
npx shadcn@latest add @shadcn-space/radix/pricing-01
npx shadcn@latest add @shadcn-space/radix/sidebar-01

# フルページ:
npx shadcn@latest add @shadcn-space/pages/radix/<ページ名>
# 例:
npx shadcn@latest add @shadcn-space/pages/radix/landing-page-01

直接URL経由 (Shadcn CLI v2 / フォールバック)

# ブロック＆コンポーネント
npx shadcn@latest add https://shadcnspace.com/r/radix/<アイテム名>.json

# ページ
npx shadcn@latest add https://shadcnspace.com/r/pages/radix/<ページ名>.json

3. パッケージマネージャー構文

すべての主要なパッケージランナーで、任意のShadcnSpaceインストールコマンドを実行できます:

パッケージマネージャー	コマンド構文
npm	`npx shadcn@latest add @shadcn-space/<名前>`
pnpm	`pnpm dlx shadcn@latest add @shadcn-space/<名前>`
bun	`bunx --bun shadcn@latest add @shadcn-space/<名前>`
yarn	`yarn dlx shadcn@latest add @shadcn-space/<名前>`

4. 高度なCLIコマンド

# 複数のブロックを1つのコマンドでインストール:
npx shadcn@latest add @shadcn-space/navbar-01 @shadcn-space/hero-01 @shadcn-space/footer-01

# 確認プロンプトなしで既存ファイルを強制的に上書き:
npx shadcn@latest add @shadcn-space/hero-01 --overwrite

トラブルシューティング＆問題解決

ShadcnSpaceのインストールや使用中に問題が発生した場合、以下の修正を試してください:

1. 問題: 「ブロック / コンポーネントが見つかりません」

原因: コンポーネントスラッグの入力ミス、またはcomponents.jsonに@shadcn-spaceレジストリが存在しない。
解決策:
1. https://shadcnspace.com/blocks で正確なブロック名を確認してください。
2. components.jsonに以下が含まれていることを確認:
```
"registries": {
  "@shadcn-space": "https://shadcnspace.com/r/{name}.json"
}
```
3. Radix UIコンポーネントをインストールする場合、radix/ をプレフィックスとして付けてください: npx shadcn@latest add @shadcn-space/radix/<名前>。
4. ページをインストールする場合、プレフィックスがpages/であることを確認: npx shadcn@latest add @shadcn-space/pages/<名前>。

2. 問題: 「アクセス拒否 / 401 Unauthorized / 認証情報不足」

原因: 認証なしでProブロックをインストールしようとしている。
解決策:
1. プロジェクトの.envまたは.env.localに認証情報を追加:
```
[email protected]
LICENSE_KEY=your-license-key
```
2. components.jsonで@shadcn-spaceにparamsが指定されていることを確認:
```
"registries": {
  "@shadcn-space": {
    "url": "https://shadcnspace.com/r/{name}.json",
    "params": {
      "email": "${EMAIL}",
      "license_key": "${LICENSE_KEY}"
    }
  }
}
```
3. 環境変数を有効にするために、ターミナルまたはコマンドプロンプトを再起動してください。

3. 問題: プリミティブ / TypeScript型の不一致 (Base UI vs Radix UI)

原因: Base UIのみがインストールされているプロジェクトでRadix UIブロックを使用している、またはその逆。
症状: Module not found: Can't resolve '@radix-ui/react-...' または Cannot find module '@base-ui/react' が表示される。
解決策:
- プロジェクトがBase UIを使用している場合: 標準のBase UIバリアント (@shadcn-space/<名前>) をインストールしてください。@base-ui/react がインストールされていることを確認 (pnpm add @base-ui/react)。
- プロジェクトがRadix UIを使用している場合: Radixバリアント (@shadcn-space/radix/<名前>) をインストールしてください。必要な @radix-ui/react-* パッケージが存在することを確認。
- 既存のプロジェクトをRadixからBase UIに移行するには、移行ガイドに従ってください。

4. 問題: 「ファイルが既に存在します」というプロンプトまたは競合

原因: コンポーネントまたはその依存ファイルがすでにインストールされている。

解決策: --overwrite フラグを渡してください:

npx shadcn@latest add @shadcn-space/hero-01 --overwrite

5. 問題: スタイルが壊れている、または色が欠けている

原因: globals.css にセマンティックカラートークン (--background、--foreground、--primary、--border など) が不足している。
解決策: ShadcnSpaceは標準のCSS変数トークンを利用します。globals.css または Tailwind CSS v4 の @theme にセマンティックデザイントークンが含まれていることを確認してください。任意の16進カラーコードをハードコードしないでください。

6. 問題: `components.json` が見つからない

原因: プロジェクトがまだshadcn CLIで初期化されていない。
解決策: プロジェクトのルートで npx shadcn@latest init を実行してください。

ドキュメント＆ヘルプディレクトリ

詳細なドキュメント、ガイド、または支援が必要な場合は、以下の公式ドキュメントページをご覧ください:

ガイド / リソース	URL	内容
はじめに (イントロダクション)	https://shadcnspace.com/docs/getting-started/introduction	概要、哲学、リポジトリの紹介
CLIインストールガイド	https://shadcnspace.com/docs/getting-started/how-to-use-shadcn-cli	CLIの完全なチュートリアル、v3とv2の比較、動画ガイド、トラブルシューティング
Radix UIからBase UIへの移行	https://shadcnspace.com/docs/getting-started/migrate-to-baseui	`asChild` から `render` と `Positioner` へのコード移行のステップバイステップガイド
MCPサーバーセットアップガイド	https://shadcnspace.com/docs/getting-started/mcp-server-docs	Cursor、Windsurf、Claude Code、およびその他のAI IDEの設定
コンポーネント使用ガイド	https://shadcnspace.com/docs/getting-started/component	UIプリミティブ、ボタン、ドロップダウン、ダイアログ、入力フィールド
ブロックガイド	https://shadcnspace.com/docs/getting-started/blocks	マーケティング、ヒーロー、プライシング、お客様の声、ベントーグリッド、ダッシュボード
AIプロンプトガイド	https://shadcnspace.com/docs/getting-started/copy-prompt	シングルパスランディングページとダッシュボード構成のためのプロンプト
インタラクティブCLIビルダー	https://shadcnspace.com/cli	スタイル、テーマ、アイコン用のカスタムビジュアルコマンドビルダー
v0で開くガイド	https://shadcnspace.com/docs/getting-started/open-v0	v0内でShadcnSpaceブロックを開いてカスタマイズする方法
インタラクティブブロックギャラリー	https://shadcnspace.com/blocks	100以上の全ブロックのビジュアルライブプレビューとコードのコピー
コンポーネントカタログ	https://shadcnspace.com/components	マイクロインタラクション、アニメーションテキスト、ドック、マーキー
フルページテンプレート	https://shadcnspace.com/templates	完全なプロダクション対応ページテンプレート
GitHub Issues & コミュニティ	https://github.com/shadcnspace/shadcnspace/issues	バグ報告、機能リクエスト、コミュニティディスカッション

ShadcnSpace MCPサーバー統合

公式ShadcnSpace MCPサーバーをAI IDE (Cursor、Windsurf、Claude Code、Lovable、Bolt、v0) に接続して、チャットセッション内で直接UIブロックの検索、インストール、管理を行えます。

Cursorセットアップ (`~/.cursor/mcp.json`)

{
  "mcpServers": {
    "shadcnspace": {
      "url": "https://mcp.shadcnspace.com/mcp",
      "headers": {
        "Authorization": "Bearer [email protected]:your-license-key"
      }
    }
  }
}

(無料枠のユーザーは headers フィールドを省略できます。無料ブロックは認証なしでインストールできます)。

Windsurfセットアップ

Windsurf設定 → MCPサーバー で、以下を追加:

サーバーURL: https://mcp.shadcnspace.com/mcp
認証: Bearer [email protected]:your-license-key

Claude Codeセットアップ

claude mcp add shadcnspace https://mcp.shadcnspace.com/mcp

Lovable & Boltセットアップ

サーバーURL: https://mcp.shadcnspace.com/mcp
トランスポート: HTTP
認証: Bearerトークン [email protected]:your-license-key

利用可能なMCPツール

ツール	目的
`searchBlocks`	キーワードでブロックを検索 (例: `hero`、`pricing`、`stats`、`sidebar`)
`listBlocks`	ShadcnSpaceで利用可能なすべてのブロックを一覧表示
`getBlockInstall`	ブロックをインストールするための正確なCLIコマンドを返す (Base UIまたはRadix UI)
`searchPages`	フルページテンプレートを検索
`getPageInstall`	完全なページのインストールコマンドを返す
`listInstalledBlocks`	現在のプロジェクトにインストールされているブロックを検査
`get_audit_checklist`	アクセシビリティ、テーマ設定、レスポンシブデザインのチェックリストを返す

エージェントの使用パターンとプロンプト

Cursor、Claude Code、WindsurfでAIエージェントにプロンプトを送る際は、以下の構造化パターンを使用してください:

単一ブロックの生成

ShadcnSpaceのHero 01 (Base UI) を使用して、SaaS向けのコンバージョンの高いヒーローセクションを追加してください。

ShadcnSpaceのRadix UI Pricing 01を使用して、月額/年額切り替え機能付きのプライシングセクションを作成してください。

ShadcnSpaceのダッシュボードブロックを使用して、管理サイドバーと統計カードを追加してください。

フルランディングページの構成 (ワンパス)

ShadcnSpaceブロックを使用して、完全なSaaSランディングページを構築してください:
- ナビバー: ShadcnSpaceのスティッキーグラスモーフィックナビバー
- ヒーロー: インタラクティブバッジとビデオプレビュー付きのHero 01
- 機能: マイクロアニメーション付きのBento Grid 01
- ソーシャルプルーフ: ShadcnSpaceのテスティモニアルマーキー
- プライシング: 3層プランと請求トグル付きのPricing 01
- フッター: ShadcnSpaceのフッター01

ShadcnSpaceブロックを使用して、完全なダッシュボードを構築してください:
- サイドバー: 折りたたみ可能なナビゲーション付きサイドバー01
- ヘッダー: プロフィールと検索付き
- 分析: KPIカード
- データテーブル: ソートとフィルター付き
- 設定パネル

置換パターン

現在のヒーローセクションを、コードの品質を損なうことなく、ShadcnSpaceの際立つHero 01に置き換えてください（TypeScriptの型はそのまま維持）。

現在の汎用shadcn/uiボタンを、ShadcnSpaceの高度なボタンバリアント (Button 06: ローディング、アイコン、バッジ付き) に移行してください。

お気に入りのAIに質問する

ドキュメント

ShadcnSpace — AIエージェントスキル & デベロッパーガイド

クイックスタート — ShadcnSpaceの使い方

ステップ1: プロジェクトでShadcnを初期化する

ステップ2: components.jsonでレジストリを設定する

無料ブロック＆コンポーネント向け:

Proユーザー向け (ライセンスキー付き):

ステップ3: ブロック＆コンポーネントをインストールする

ステップ4: コードにインポートして使用する

Base UI vs Radix UI — 完全コマンドガイド

違いを理解する

1. Base UI コマンド

レジストリ名前空間経由 (推奨 — Shadcn CLI v3)

直接URL経由 (Shadcn CLI v2 / フォールバック)

2. Radix UI コマンド

レジストリ名前空間経由 (推奨 — Shadcn CLI v3)

直接URL経由 (Shadcn CLI v2 / フォールバック)

3. パッケージマネージャー構文

4. 高度なCLIコマンド

トラブルシューティング＆問題解決

1. 問題: 「ブロック / コンポーネントが見つかりません」

2. 問題: 「アクセス拒否 / 401 Unauthorized / 認証情報不足」

3. 問題: プリミティブ / TypeScript型の不一致 (Base UI vs Radix UI)

4. 問題: 「ファイルが既に存在します」というプロンプトまたは競合

5. 問題: スタイルが壊れている、または色が欠けている

6. 問題: components.json が見つからない

ドキュメント＆ヘルプディレクトリ

ShadcnSpace MCPサーバー統合

Cursorセットアップ (~/.cursor/mcp.json)

Windsurfセットアップ

Claude Codeセットアップ

Lovable & Boltセットアップ

利用可能なMCPツール

エージェントの使用パターンとプロンプト

単一ブロックの生成

フルランディングページの構成 (ワンパス)

置換パターン

関連スキル

steipete/sag

steipete/oracle

steipete/peekaboo

mattpocock/design-an-interface

mattpocock/prototype

mattpocock/grill-me

ステップ2: `components.json`でレジストリを設定する

6. 問題: `components.json` が見つからない

Cursorセットアップ (`~/.cursor/mcp.json`)