StyleKit

stylekit-mcp

MCP server for StyleKit — search design styles and retrieve templates, assets, tokens, recipes, and lint checks from Claude, Cursor, or Windsurf.

The server runs locally over stdio using the official MCP SDK. It bundles stylekit-core; the published process depends on @modelcontextprotocol/sdk and zod, and needs network access only for live catalogue data and remote assets. It is MIT-licensed.

Tools

All tools are read-only. Five tools total: get_style carries the optional tokens, recipe, and brief sections so the catalogue stays small.

stylekit_get_style returns the philosophy, palette, do/don't rules, quality signals and the shadcn install command. Pass include to attach:

• tokens — typed design tokens: border, shadow, typography, spacing, colors;
• recipe — one component's className + JSX (component picks the recipe id);
• brief — the complete stylekit-brief-v1 contract (tokens, recipes, global CSS, merged lint rules, provenance).

stylekit_lint_code is the one worth building into your loop: call it after the agent writes UI code, so a style's constraints are verified rather than assumed. It resolves variant prefixes (dark:, md:, hover:) before matching, and understands JSX/HTML class attributes, cn()/clsx() calls, and template literals.

Setup

Add this configuration once to your MCP client:

{

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

• Claude Desktop / Claude Code: claude_desktop_config.json or .mcp.json
• Cursor: .cursor/mcp.json
• Windsurf: the Windsurf MCP config

When the client starts the MCP process, npx checks npm for the current latest release, including when the package is already cached. A running MCP process does not replace itself; restart the server or client to load an update. For a reproducible setup, replace stylekit-mcp@latest with an exact published version such as stylekit-mcp@0.6.0. The npm caching options describe how --prefer-online handles cached packages.

To run a locally built copy instead, point your client at the absolute path:

{

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

Public assets

stylekit_list_assets accepts optional kind and query filters plus offset/limit. It returns a structured page with the namespace, content level, availability, license and attribution metadata, and whether the page came from the live API or bundled snapshot. An offset beyond the last result is an empty successful page.

stylekit_get_asset returns the complete asset detail as structured data and JSON text. contentLevel tells you what is actually available: source and remote assets can include source files; metadata and restricted entries do not. availability distinguishes bundled, remote, external and restricted content. External and restricted entries provide metadata or source links only; they are not represented as downloadable full source. Remote templates require the live API to return their actual file set; if that source is unavailable, the tool reports an error instead of returning a placeholder as code.

Example

In your editor's AI chat:

"Search StyleKit for a frosted glass style, then give me its button recipe and the shadcn install command."

The agent calls stylekit_search_styles → stylekit_get_style with include: ["recipe", "brief"] and hands back ready-to-use code.

Development

pnpm --filter stylekit-mcp build # compile to dist/

node scripts/smoke.mjs # smoke-test all tools over stdio

License

MIT

Release contents

The published MCP package includes the public asset tools, source provenance, and discovery reliability fixes described above. It bundles stylekit-core; the runtime npm dependencies remain the MCP SDK and Zod.

Call stylekit_get_style with include: ["brief"] before generation and save its stylekit-brief-v1 payload for later validation. provenance.source identifies the data origin; contentHash detects drift.

Lint returns status: pass | fail | inconclusive. ok is true only for a conclusive static pass. Runtime expressions are reported as inconclusive unless known literals already contain a violation. Missing requirements are advisory; pass strict: true and checkRequired: ["button"] to fail them in a static component snippet. Required checks cover the entire input, not each element. These checks do not certify visual quality or accessibility.