should-i-render

should-i-render は、測定・キュレーションされたスナップショットからReactコンポーネントを選択するための読み取り専用MCPサーバーです。コンポーネントの適合性に関する質問に対して、簡潔な判定とハーネスの事実を返し、ソースのダンプは返しません。

バンドルされているスナップショットには、現在公開されている should-i-render インデックスが含まれています。これは stdio 上で動作し、API キー、データベース、ネットワークアクセスは不要で、すべてのテキスト応答は約 500 トークンに制限されています。

vibecodng.com でホストされている無料ベータ版は、ライブインデックスを読み取り、API キーごとに UTC 日あたり 100 回のツール呼び出しを含みます。ブラウザでキーを作成し、HTTP 対応の MCP クライアントを https://vibecodng.com/mcp に接続してください。プライベートでオフライン、バージョン管理された、クォータのないスナップショットが必要な場合は、この npm パッケージを使用してください。

ローカルでの使用

{
  "mcpServers": {
    "should-i-render": {
      "command": "node",
      "args": ["/path/to/should-i-render/server.js"]
    }
  }
}

Node 20 以降が必要です。npm test を実行して、バンドルされたスナップショット、ツールメタデータ、構造化レスポンス、および応答上限を確認してください。

npm を使用すれば、チェックアウトは不要です：

{
  "mcpServers": {
    "should-i-render": {
      "command": "npx",
      "args": ["-y", "should-i-render@0.1.0"]
    }
  }
}

ホスティングサービスは、後日、より新しいデータ、より高いクォータ、チームワークフローのための有料プランを追加する可能性があります。公開されているオフラインパッケージは、以下のライセンスの下で引き続き利用可能です。

ツール

• find_component({task, pattern?, style?, palette?}) は、コンポーネントの説明文、パターン、スタイル、測定結果に基づいて、最大3つの検証済みでレンダリングに適したものをランク付けします。失敗の警告は推奨から除外されます。パレットスラッグを渡すと、そのCSS変数が追加されます。

• palette_pick({mood?}) は、1～3つのキュレーションされたアクセシブルなパレット（16進数の役割とコピー可能なCSS変数ブロックを含む）を返します。

• check_component({name}) は、完全な判定、スキップ条件、測定ストリップを返します。

• alternatives({name}) は、同じパターンの候補をランク付けします。

• install_plan({name}) は、依存関係、ベアハーネスのギャップ、プロバイダ要件、セットアップノート、ライセンス、作者クレジット、測定されたギャラリーページ、上流ソース、およびソースがサポートする場合の正確な shadcn コマンドを返します。

• skip_list({pattern, style?}) は、明示的な失敗警告と最も悪い測定結果の違反を最初に表示します。

すべてのツールには、タイトル、読み取り専用注釈、出力スキーマ、構造化コンテンツ、および制限されたテキスト応答が含まれます。

パレット

このパッケージには、24 個のオリジナル 4 色パレットがバンドルされています。各パレットは、accent、surface、text、muted を定義し、すべてのテキストオンサーフェスペアは WCAG AA コントラスト 4.5:1 以上で検証されています。パレットスラッグまたは dark、light、pastel、neon、retro、earth、warm、cold、mono などのムードを指定して palette_pick を使用してください。

:root {
  --bw-accent: #E85D4A;
  --bw-surface: #FFF7F1;
  --bw-text: #34231F;
  --bw-muted: #775F57;
}

自動テーマ設定はファーストパーティコンポーネントに適用されます。サードパーティのエントリは手動マッピングが必要です。

測定ストリップの意味

RENDERS は準備されたハーネスのマウント結果です。A11Y は記録された axe 違反の合計です。KB はハーネスベースラインに対する限界 gzip バンドルサイズです。BARE は準備された shadcn スタイルヘルパーなしでの 2 回目のビルド＆マウントパスです。PROVIDER はプロバイダ不足のマウントエラーが測定されたことを意味します。

スタイル軸

パターンとスタイルは異なる質問に答えます。パターンはコンポーネントの機能（button、calendar、carousel、text reveal など）です。スタイルはそれが属する視覚的な世界（minimal-flat、brutalism、spatial、bento、dark-futuristic など）です。両方でフィルタリングすることは、インタラクションが固定されているが製品言語が固定されていない場合に役立ちます。

スタイルは編集上の分類であり、パッケージの機能ではありません。同じパターンとスタイルを持つ 2 つのエントリでも、依存関係、アクセシビリティの問題、バンドルコスト、ベア互換性、プロバイダ要件が大きく異なる場合があります。

データ

data/components.json は、公開されているコンポーネントレコードの特定時点のエクスポートです。説明文、測定結果、ソースと作者のクレジット、ライセンスメタデータ、パターンとスタイル、相対プレビューパスが含まれます。プレビュー画像やビデオのバイトは含まれません。data/palettes.json はバンドルされたパレットカタログです。

SHOULD_I_RENDER_DATA=/path/to/components.json を設定すると、同じ形状の別のスナップショットをテストできます。

制限事項

• ハーネスは現在、React コンポーネントのみを測定します。

• カバレッジは、網羅的なレジストリクロールではなく、キュレーションされています。

• スナップショットは特定時点のものです。上流のコンポーネント API や依存関係はエクスポート後に変更される可能性があります。

• ハーネス結果は制御された測定値であり、本番 QA ではありません。アプリケーション内のブラウザ、デザインシステム、アクセシビリティ、セキュリティ、またはユーザーテストに代わるものではありません。

• デモは各コンポーネントのソース API に対して記述され、スクリーンショットを駆動します。デモは意図された状態をカバーできますが、すべてのプロップ、インタラクション、サーバー動作、データロードパスをカバーするわけではありません。

• アクセシビリティカウントがクリーンであることは、記録されたデモがこのハーネスで axe の所見がなかったことを意味します。アクセシビリティ認定ではありません。

• 判定とスタイルラベルは、記録された測定値とソース API に基づく編集上の判断です。

ライセンス

サーバーコードは MIT ライセンスです。コンパイルされたインデックスメタデータは CC BY 4.0 で、mrkeyoor.com への帰属が必要です。個々のコンポーネントソースプロジェクトは、それぞれのライセンスと作者クレジットを保持します。

貢献について

• 誤った判定や古いコンポーネントレコードを見つけましたか？ Issue を開いてください。

• MCP サーバーとランキングロジックへのコード変更は歓迎します。応答を制限内に収め、プルリクエストを開く前に npm test を実行してください。

• data/components.json は測定された vibecodng インデックスから生成されるため、データ修正はスナップショットへの直接編集ではなく、最初に Issue として開始する必要があります。