StyleKit

stylekit-mcp

StyleKit の MCP サーバーです。Claude、Cursor、Windsurf からデザインスタイルを検索し、テンプレート、アセット、トークン、レシピ、Lint チェックを取得できます。

サーバーは公式 MCP SDK を使用し、stdio 経由でローカル実行されます。stylekit-core がバンドルされています。公開プロセスが依存するのは @modelcontextprotocol/sdk と zod で、ネットワークアクセスが必要なのはライブカタログデータとリモートアセットを取得する場合のみです。MIT ライセンスです。

ツール

すべてのツールは読み取り専用です。

ツール	機能
stylekit_search_styles	キーワードやカテゴリでスタイルを検索します
stylekit_list_assets	種類やクエリで公開テンプレートとデザインアセットをページネーション付きで参照し、ソースの来歴を確認します
stylekit_get_asset	名前空間付きの公開アセットの詳細と、ライセンスで許可されているソースファイルを取得します
stylekit_get_implementation_brief	AI 向けガイダンス、CSS、テンプレート、レシピ、トークン、準備状況、統合済みの Lint ルール、来歴をまとめて取得します（0.3.0）
stylekit_get_style	スタイルの全プロフィールを取得します。理念、カラーパレット、推奨事項と禁止事項、品質／機能の指標が含まれます
stylekit_get_style_tokens	型付きデザイントークンを取得します。ボーダー、シャドウ、タイポグラフィ、スペーシング、色が含まれます
stylekit_get_component_recipe	レンダリング済みコンポーネントの className と JSX を取得します（button/card/input）
stylekit_get_shadcn_install	スタイルのテーマに対応する npx shadcn add コマンドを取得します
stylekit_lint_code	生成された UI コードをスタイルのルールに照らしてチェックし、違反ごとに理由と修正案を示します

stylekit_lint_code は、開発の流れに組み込む価値のあるツールです。エージェントが UI コードを書いた後に呼び出すことで、スタイルの制約を想定するのではなく、検証できます。照合の前にバリアント接頭辞（dark:、md:、hover:）を解決し、JSX／HTML の class 属性、cn()／clsx() の呼び出し、テンプレートリテラルを認識します。

セットアップ

この設定を MCP クライアントに一度追加してください。

{
  "mcpServers": {
    "stylekit": {
      "command": "npx",
      "args": ["-y", "--prefer-online", "stylekit-mcp@latest"]
    }
  }
}

• Claude Desktop / Claude Code：claude_desktop_config.json または .mcp.json
• Cursor：.cursor/mcp.json
• Windsurf：Windsurf の MCP 設定

クライアントが MCP プロセスを起動すると、パッケージがすでにキャッシュされている場合も含め、npx は npm に最新の latest リリースを確認します。実行中の MCP プロセスは自動で置き換わりません。更新を読み込むには、サーバーまたはクライアントを再起動してください。再現性のあるセットアップにするには、stylekit-mcp@latest を [email protected] などの公開済みの特定バージョンに置き換えてください。npm のキャッシュオプションでは、--prefer-online がキャッシュ済みパッケージをどのように扱うかを説明しています。

ローカルでビルドしたコピーを実行する場合は、クライアントに絶対パスを指定してください。

{
  "mcpServers": {
    "stylekit": { "command": "node", "args": ["/abs/path/to/packages/mcp/dist/index.js"] }
  }
}

公開アセット

stylekit_list_assets は、kind と query の任意のフィルター、および offset／limit を受け付けます。名前空間、コンテンツレベル、利用可否、ライセンスと帰属表示のメタデータ、ページの取得元がライブ API かバンドル済みスナップショットかを含む、構造化されたページを返します。最後の結果を超えるオフセットを指定した場合、空のページが正常に返されます。

stylekit_get_asset は、アセットの完全な詳細を構造化データと JSON テキストで返します。contentLevel は実際に利用できる内容を示します。source と remote のアセットにはソースファイルが含まれる場合がありますが、metadata と restricted の項目には含まれません。availability は、バンドル済み、リモート、外部、制限付きのコンテンツを区別します。外部および制限付きの項目が提供するのはメタデータまたはソースリンクのみで、ダウンロード可能な完全なソースとしては提供されません。リモートテンプレートの実際のファイル一覧を返すにはライブ API が必要です。そのソースが利用できない場合、このツールはプレースホルダーをコードとして返すのではなく、エラーを報告します。

例

エディターの AI チャットで：

「StyleKit でフロストガラスのスタイルを検索して、そのボタンのレシピと shadcn のインストールコマンドを教えてください。」

エージェントは stylekit_search_styles → stylekit_get_component_recipe → stylekit_get_shadcn_install を呼び出し、そのまま使えるコードを返します。

開発

pnpm --filter stylekit-mcp build # compile to dist/
node scripts/smoke.mjs  # smoke-test all tools over stdio

ライセンス

MIT

リリース内容

公開された MCP パッケージには、上記で説明した公開アセット用ツール、ソースの出典情報、検出の信頼性に関する修正が含まれています。stylekit-core をバンドルしており、実行時の npm 依存関係は MCP SDK と Zod のままです。

生成前に brief ツールを呼び出し、その stylekit-brief-v1 ペイロードを後で検証できるよう保存してください。provenance.source はデータの出所を示し、contentHash はドリフトを検出します。

Lint は status: pass | fail | inconclusive を返します。ok が true になるのは、静的チェックが明確に合格した場合のみです。実行時の式は、既知のリテラルに違反がすでに含まれていない限り、判定不能として報告されます。必須要件の不足は参考情報として示されます。静的なコンポーネントのスニペットで不足を失敗として扱うには、strict: true と checkRequired: ["button"] を渡してください。必須チェックは各要素ではなく、入力全体を対象とします。これらのチェックは、視覚的な品質やアクセシビリティを保証するものではありません。