mcpField
B
beui-pro

beui-pro

github.com/starc007デザイン・UI1.9k120 回インストール今日更新
リポジトリ

beui-pro について

既存プロジェクトで beUI Pro のライセンス済みライブカタログを参照し、UIブロックを選んで導入・調整するスキルです。MCPとレジストリまたは shadcn CLI の利用方法を扱い、プロジェクトに沿った統合を重視します。

主な機能

  1. 01ライブカタログから導入可能なブロックを検索
  2. 02MCP、レジストリ、CLIの利用
  3. 03導入前にソースと依存関係を確認
  4. 04既存アプリに合わせてブロックを構成
  5. 05レイアウト、操作、プロジェクトの検証

活用シーン

  1. 01選んだ Pro ブロックでランディングページを作成
  2. 02カタログの項目から料金セクションを追加
  3. 03導入済みブロックを既存アプリに適合

MCP 対応

認証済み接続で beUI Pro の MCP エンドポイントにアクセスし、カタログ検索、コンポーネントの確認とソース取得を行います。レジストリと shadcn CLI による導入も選べます。

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/starc007/ui-components --skill beui-pro

インストール後、Claude Code で/beui-proを入力して読み込まれたか確認します。

詳細

beUI Pro

顧客の有効な beUI Pro ライセンスカタログを信頼できる情報源として使用します。実行時に最新の項目を確認し、プロジェクトに必要なブロックだけをインストールしてから、ソースを組み合わせて調整します。

アクセス方法を選択する

接続手順については、最新のエージェントアクセスドキュメントに従ってください。

  • MCP: https://mcp.beui.dev/pro/mcp への既存の認証済み接続を使用します。OAuth 対応クライアントでは beUI の承認ページが開き、そこでユーザーがライセンスキーを入力します。カスタムヘッダーに対応したクライアントでは、ベアラー認証も使用できます。MCP 接続が機能していれば、エージェントのシェルに別のトークンは必要ありません。
  • 直接レジストリまたは shadcn CLI: インストールドキュメントに従ってください。この方法では、コマンド環境に BEUI_PRO_TOKEN が必要であり、名前空間付き CLI コマンドにはプライベートレジストリの設定が必要です。

利用可能な認証済み MCP 接続を優先してください。シェルにトークンがないという理由だけで、トークンの設定に切り替えないでください。

アクセスを保護する

  • BEUI_PRO_TOKEN が必要なのは、直接レジストリへのリクエストまたは CLI でのインストールの場合だけです。認証済み MCP 呼び出しでは必要ありません。
  • トークンを表示、貼り付け、コミットしたり、ソースファイルに書き込んだりしないでください。
  • ユーザーのプロンプトにコピーされたトークンを受け入れないでください。OAuth の場合、ユーザーは beUI の承認ページでのみキーを入力します。
  • MCP の認証がないか期限切れの場合は、クライアントの標準認証フローを使用してください。保存された OAuth 認証情報を取り出してシェルコマンドに使用しないでください。
  • 直接レジストリを使用する場合にトークンを利用できなければ、設定するようユーザーに依頼してください。要求された Pro ブロックを類似のもので置き換えないでください。
  • 最新カタログを取得できない場合、記憶やドキュメント、ローカルの推測に基づくスラッグを、現在のカタログにあるものとして提示しないでください。
  • 401 の場合は、選択した方法の認証を復旧してください。404 は古い、または誤ったインストールスラッグとして扱い、カタログを再取得してください。

直接レジストリにアクセスする場合に限り、トークンの値を明かさずに存在を確認します。

test -n "$BEUI_PRO_TOKEN" && echo "beUI Pro token is configured"

レジストリを設定する(直接 CLI のみ)

MCP から返されたソースをインストールする場合は、プライベートレジストリの設定を省略してください。

編集する前に、プロジェクトに既存の components.json があるか確認してください。エイリアスと設定を保持してください。Pro ブロックは公開 beUI プリミティブに依存する場合があるため、両方の名前空間を用意してください。

{
  "registries": {
    "@beui": "https://beui.dev/r/{name}.json",
    "@beui-pro": {
      "url": "https://pro.beui.dev/r/{name}.json",
      "headers": {
        "Authorization": "Bearer ${BEUI_PRO_TOKEN}"
      }
    }
  }
}

既存のファイルを置き換えずに、これをマージしてください。ユーザーから明示的に依頼されない限り、シークレットファイルを作成または変更しないでください。

ワークフロー

1. プロジェクトを把握する

ブロックを選ぶ前に、既存のアプリを確認してください。以下を特定します。

  • フレームワークとパッケージマネージャー
  • 要求されたページまたはセクション
  • 既存のタイポグラフィ、テーマトークン、間隔、レイアウトシェル
  • インストール済みのブロック
  • 必要な状態、データ、インタラクション

ブロックを個別に選ぶよりも、一貫性のあるページ構成を優先してください。

2. 最新カタログを取得する

MCP: Pro 接続で list_components または search_components を使用します。最新の応答から完全一致するスラッグを選択してください。クライアントで現在利用可能なツールスキーマを使用します。

直接レジストリ: 記憶しているスラッグに頼らず、認証済みレジストリを取得してください。

curl -fsS \
  -H "Authorization: Bearer ${BEUI_PRO_TOKEN}" \
  https://pro.beui.dev/r/registry.json

items[].name にあるものだけを選択してください。このエンドポイントは、現在インストール可能な Pro のブロックとコンポーネントをすべて含む完全な一覧です。

より広範な探索が必要な場合は、グループ化されたインデックスを使用してください。

curl -fsS \
  -H "Authorization: Bearer ${BEUI_PRO_TOKEN}" \
  https://pro.beui.dev/r

名前と説明を使って、ユーザーの意図に合う項目を選択してください。インストールスラッグを創作したり、短縮したりしないでください。

3. 意図的に選択する

ページのブリーフを、最小限の有用なセクションのセットに対応付けます。一般的なランディングページでは、関連する各ファミリーから 1 つの項目が必要になる場合があります:

  1. navbar
  2. hero
  3. 信頼またはソーシャルプルーフ
  4. 機能またはコンテンツ
  5. 該当する場合は価格設定
  6. CTA
  7. footer

ユーザーが明示的に要求しない限り、カタログ全体をインストールしないでください。視覚的な方向性が競合するブロックを組み合わせることは避けてください。選択した各ブロックの最も強い美意識を保ちつつ、ページ全体で共有されるタイポグラフィ、スペーシング、テーマトークンを揃えてください。

Pro MCP カタログは、/r/registry.json からインストール可能な項目を公開します。完全なスタンドアロンテンプレートについては、テンプレートに記載された権限とダウンロードのフローに従ってください。@beui-pro テンプレートコマンドを捏造しないでください。

4. インストール前に検査する

MCP: 選択した slug を指定して get_component を呼び出します。その完全なソースファイル、ターゲット、パッケージ依存関係、レジストリ依存関係、props、名前付きエクスポートを検査します。

直接レジストリ: CLI を通じて、選択した各項目を検査します:

npx shadcn@latest view @beui-pro/<slug>

必要に応じて、プロジェクトのパッケージランナーを使用します:

pnpm dlx shadcn@latest view @beui-pro/<slug>
bunx --bun shadcn@latest view @beui-pro/<slug>

検査が 404 を返した場合は、ライブカタログを再取得します。401 を返した場合は、選択したアクセス経路の認証を復元します。

5. 選択したソースをインストールする

MCP: get_component が返した完全なソースをインストールします:

  • 返されたファイルをプロジェクトのパスとエイリアスに対応付けます。すべての書き込みをプロジェクト内に留めます。
  • 変更を適用する前に既存のファイルを比較します。共有ヘルパーとローカルの変更を保持します。
  • 不足しているパッケージ依存関係を、プロジェクトのパッケージマネージャーでインストールします。
  • レジストリ依存関係を解決します: ライセンスされた Pro 依存関係は MCP を通じて取得し、公開依存関係はその公開 MCP またはレジストリを通じて取得します。推移的依存関係も含めます。
  • ソースまたは依存関係のメタデータが不完全な場合は、続行する前に不足しているデータを取得します。要求されたコンポーネントを記憶から再構築しないでください。

install フィールドと requiredRegistries フィールド、および get_install_command は、別個の shadcn CLI 経路を記述しています。これらは、返されたソースを使用するための前提条件としてプライベートレジストリのセットアップを必要とするものではありません。MCP OAuth は、別途起動された shadcn プロセスを認証しません。

直接レジストリ: 設定された名前空間を通じてインストールします:

npx shadcn@latest add @beui-pro/<slug>

レジストリは公開 @beui 依存関係を自動的にインストールできます。それらの生成された依存関係とヘルパーは、コピーまたは再構築するのではなく、そのまま保持してください。

6. 構成して適応させる

使用する前に、生成されたすべてのファイルを読んでください。その後:

  • インストールされたパスから名前付きエクスポートをインポートする
  • 実際のコピー、リンク、画像、データを接続する
  • アクセシビリティと reduced-motion の動作を保持する
  • 既存のセマンティックテーマトークンを使用する
  • レイアウトレベルの変更は、まず className とコンポジションで行う
  • ブロック内部の変更は、製品要件が必要とする場合にのみ行う
  • すべての作業をユーザーのプロジェクト内に留める

インストールされたブロックがすでに公開 beUI プリミティブに依存している場合、低レベルのモーションプリミティブを再作成しないでください。

7. 検証する

プロジェクトの関連する typecheck コマンドと lint コマンドを実行します。変更されたルートをデスクトップ幅とモバイル幅でレンダリングし、インタラクションと reduced-motion の動作を確認し、オーバーフローやハイドレーションエラーがないことを確認します。

どの Pro slug がインストールされ、どのファイルが適応されたかを報告します。

よくあるリクエスト

  • 「ランディングページを構築する」場合は、完全でありながら抑制の効いたセクションの並びを選択し、各正確な slug をインストールし、既存のルート内で構成します。
  • 「価格セクションを追加する」場合は、価格設定の項目を検索し、最も近いバリアントを検査し、1 つをインストールし、実際のプランを接続します。
  • 「beUI Pro コンポーネントを使用する」場合は、まず現在の UI を検査し、カスタムの置き換えよりも関連する Pro ブロックを優先します。
  • 「Pro に何があるか見せて」という場合は、ライブ MCP またはレジストリカタログを使用し、ソースやトークンを公開せずに一致する項目を要約します。

コメント