StyleKit

Name: StyleKit
Author: Anx

Pulls StyleKit design styles, tokens, recipes, lint and repair checks into an AI coding client

Official · Anx TypeScript Remote (hosted) · Streamable HTTP Local · stdio Developer tools Design

GitHub npm Website

52 popularity score ★ 778 ↓ 126/wk

Connect your client

Remote (hosted)

Add in one click

Add to Cursor Add to VS Code Add to LM Studio Add to Goose

Opens the app, which asks before it adds the server.

Or add it by command or config

Its docs show no set-up for a particular client: add this address in your client the way it adds a remote MCP server.

Addressits hosted endpoint

https://www.stylekit.top/mcp

Local (npm)

Add in one click

Add to Cursor Add to VS Code Add to LM Studio Add to Goose

Opens the app, which asks before it adds the server.

Or add it by command or config

Claude CodeTerminal

claude mcp add stylekit -- npx -y --prefer-online stylekit-mcp@latest

Claude Desktopclaude_desktop_config.json

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

Cursor~/.cursor/mcp.json

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

VS Code.vscode/mcp.json

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

Codex~/.codex/config.toml

[mcp_servers.stylekit]
command = "npx"
args = ["-y", "--prefer-online", "stylekit-mcp@latest"]

Gemini CLITerminal

gemini mcp add --scope user stylekit npx -- -y --prefer-online stylekit-mcp@latest

Local (from source)

Add in one click

Add to Cursor Add to VS Code Add to LM Studio

Opens the app, which asks before it adds the server. Then replace each <NAME> in its settings with your value.

Or add it by command or config

FirstTerminal

git clone https://github.com/AnxForever/stylekit.git
cd stylekit
git checkout mcp-v0.5.0
pnpm install
pnpm --filter stylekit-mcp build

Claude CodeTerminal

claude mcp add stylekit -- node '<ABSOLUTE_PATH_TO_CLONE>/packages/mcp/dist/index.js'

Claude Desktopclaude_desktop_config.json

{
  "mcpServers": {
    "stylekit": {
      "command": "node",
      "args": [
        "<ABSOLUTE_PATH_TO_CLONE>/packages/mcp/dist/index.js"
      ]
    }
  }
}

Cursor~/.cursor/mcp.json

{
  "mcpServers": {
    "stylekit": {
      "command": "node",
      "args": [
        "<ABSOLUTE_PATH_TO_CLONE>/packages/mcp/dist/index.js"
      ]
    }
  }
}

VS Code.vscode/mcp.json

{
  "servers": {
    "stylekit": {
      "type": "stdio",
      "command": "node",
      "args": [
        "<ABSOLUTE_PATH_TO_CLONE>/packages/mcp/dist/index.js"
      ]
    }
  }
}

Codex~/.codex/config.toml

[mcp_servers.stylekit]
command = "node"
args = ["<ABSOLUTE_PATH_TO_CLONE>/packages/mcp/dist/index.js"]

Gemini CLITerminal

gemini mcp add --scope user stylekit node -- '<ABSOLUTE_PATH_TO_CLONE>/packages/mcp/dist/index.js'

Settings 11

`STYLEKIT_MCP_TOOLSET`	Optional: Tool subset for stdio: all, core, assets or design. An unknown value stops the server. Default `all`.
`MCP_HTTP_TOKEN` secret	Optional: Bearer token clients must send in --http mode. Unset means no token is checked. For --http mode.
`MCP_HTTP_PORT`	Optional: Port for --http mode when --port is not given. Unset picks a random free port. For --http mode.
`MCP_HTTP_HOST`	Optional: Address to bind in --http mode when --host is not given. Default `127.0.0.1`. For --http mode.
`MCP_HTTP_PATH`	Optional: Path the MCP endpoint is served at in --http mode. Default `/mcp`. For --http mode.
`MCP_ALLOWED_ORIGINS`	Optional: Comma-separated Origin allowlist. Unset allows all origins, or only loopback ones on a loopback bind. For --http mode.
`MCP_ALLOWED_HOSTS`	Optional: Comma-separated Host header allowlist. On a loopback bind it defaults to localhost names. For --http mode.
`MCP_RATE_LIMIT`	Optional: Requests per minute per client IP. 0 turns the limit off. Default `120`. For --http mode.
`MCP_TRUST_PROXY`	Optional: Set to 1, true or yes to take the client IP from proxy headers. Default `false`. For --http mode.
`MCP_MAX_BODY_BYTES`	Optional: Largest request body accepted, in bytes. Default `1000000`. For --http mode.
`STYLEKIT_MCP_BASE_URL`	Optional: Overrides the StyleKit catalogue origin, for a self-hosted copy. For --http mode.

What it does

stylekit-mcp is the MCP server for StyleKit, an open catalogue of named visual styles for web pages: glassmorphism, neo-brutalist and brand-inspired looks among them. A coding assistant uses it to pick one style and then build against that style's concrete rules, instead of guessing at what "make it look modern" means.

There are 10 tools and all of them only read. You can search styles and pull a style's profile, its typed design tokens or Tailwind and JSX recipes for components like buttons. Another tool gives the shadcn command that installs its theme. The implementation brief bundles the rules and tokens with a content hash, so you can tell later whether the source data changed. Two asset tools browse StyleKit's public templates and hand back source files where the licence allows it.

The useful loop is lint then repair. stylekit_lint_code reads JSX, HTML or a bare class string and flags classes that break the style, each with a reason and a suggested fix. stylekit_repair_code, which arrived in 0.5.0, swaps those classes for the style's own tokens and returns the edited code plus anything it could not fix. It does not touch your files; the assistant applies the result.

By default it runs over stdio. Since 0.5.0 you can also start it with --http to serve stateless Streamable HTTP on 127.0.0.1, and a STYLEKIT_MCP_TOOLSET setting cuts the tool list down for stdio clients. In HTTP mode the same subsets live at /mcp/core, /mcp/assets and /mcp/design (src/server.ts and src/http.ts at tag mcp-v0.5.0). Style data comes from the live catalogue with a five-minute cache and falls back to a bundled snapshot, marked with origin and fallbackReason, when the network is down. StyleKit's developer page labels the MCP server a public beta.

What it needs

To run it yourself	Node.js 20+
Runs on	macOS, Windows, Linux

Node.js 20 or later with npx (engines in package.json at 0.5.0). Network access to stylekit.top for live data and remote templates, or only the bundled snapshot is served. The shadcn command it returns needs a project with tsconfig.json. To serve HTTP, start it yourself with npx -y stylekit-mcp@latest --http --port <port> and point clients at the address. Building from source needs git and pnpm.

Limits

Size cap Search returns 15 styles by default, up to 50 with limit. Asset lists return 20 by default, up to 100.
Size cap stylekit_lint_code and stylekit_repair_code accept at most 100,000 characters of code per call.
Read only It writes no files. Repair returns rewritten code for the assistant to apply and leaves unfixed classes for you to review.
Limit Lint is static class matching: runtime class expressions come back inconclusive, and missing required classes fail only with strict set to true.
Not covered Its makers say lint does not certify visual quality or accessibility. Repair leaves spacing, layout, structure and variable references alone.
Not covered External and restricted assets give metadata and links only, and remote template source needs the live catalogue.
Early release StyleKit's developer page labels the MCP server a public beta.
Limit In --http mode with no MCP_HTTP_TOKEN set, any client that reaches the port can call the tools. Without --port or MCP_HTTP_PORT it binds a random free port.
Limit STYLEKIT_MCP_BASE_URL is read only in --http mode. Over stdio the server always uses the public StyleKit catalogue.

The documented config runs stylekit-mcp@latest. npm now lists 0.6.0, and its README describes five tools, with tokens, recipes and the brief folded into stylekit_get_style. That release has no tag or source in the repository, so this page follows 0.5.0. Pin stylekit-mcp@0.5.0 to get the tools listed here.

Who it suits

Suits front-end developers who generate pages with Claude or Cursor and want the agent to commit to one named style, especially in Tailwind or shadcn/ui projects, and to check and fix its own output with lint and repair. It needs no key and only reads, so it is easy to try. Teams that want one shared endpoint can run the --http mode behind a token. It is less useful for teams enforcing their own design system or where people must review the visual result: it offers StyleKit's catalogue and class-level checks, not design review.

Tools 10

10 only read. A ? marks an optional parameter.

stylekit_search_styles: Searches the style catalogue by keyword and category, with paging.query?: stringcategory?: enumlimit?: integeroffset?: integer
stylekit_list_assets: Lists public templates and design assets by kind or query, with licence and source details.kind?: enumquery?: stringoffset?: integerlimit?: integer
stylekit_get_asset: Fetches one public asset, including source files where its licence allows.kind: enumid: stringincludeSource?: booleanfiles?: array
stylekit_get_style: Returns one style's philosophy, colours, do/don't rules and quality signals.slug: string
stylekit_get_style_tokens: Returns a style's typed tokens for borders, shadows, type, spacing and colours.slug: string
stylekit_get_component_recipe: Gives the Tailwind className and JSX for a style's button, card or input recipe.slug: stringcomponent: string
stylekit_get_shadcn_install: Returns the npx shadcn add command for a style's theme.slug: string
stylekit_lint_code: Checks UI code against a style's rules and gives a reason and fix for each breach.slug: stringcode: stringcheckRequired?: arraystrict?: boolean
stylekit_repair_code: Rewrites off-style classes using the style's own tokens and returns the new code with a list of edits.slug: stringcode: string
stylekit_get_implementation_brief: Returns a style's build bundle: rules, global CSS, tokens, recipes, lint rules and a content hash.slug: stringsections?: array

Popularity

52 popularity score, on our list (the bar is 36)

★ 778 ↓ 126/wk

GitHub stars, whole repository	778	16.8 points
Stars in 30 days	+188	10 points
npm downloads, last week	126	16.8 points
Official server	Yes	8 points

It lives in the folder packages/mcp of anxforever/stylekit, which holds more than this server. Its stars are the whole repository's, so in the score they never count for more than its own downloads.

Measured 2026-11-07. How the score works.

Where it is published

Code	anxforever/stylekit/packages/mcp ★ 778, the whole repository
npm	stylekit-mcp 0.6.0, 2026-11-07
Hosted	`https://www.stylekit.top/mcp` Streamable HTTP · no sign-in

What it can reach

Runs	On your machine, or on the maker's servers
Reaches	The internet
Changes things	No: it reads only
Sign-in	None
Licence	MIT (npm)
Last code change	2026-11-07

Runs as a local Node process over stdio by default. All 10 tools are marked read-only and touch no local files. Code passed to lint and repair is processed in memory and returned. It sends requests to StyleKit's public catalogue at stylekit.top for styles and templates, so search terms reach that site. No account or key is needed. With --http it listens on 127.0.0.1 unless --host or MCP_HTTP_HOST says otherwise, limits each IP to 120 requests a minute by default and asks for a bearer token only when MCP_HTTP_TOKEN is set. The suggested config runs stylekit-mcp@latest, so each client start may load a new release.

Over time

GitHub stars, whole repository 778 +188 (+32 %)

778590

9 Oct 20267 Nov 2026

npm downloads a week 126 +103 (+448 %)

6808

6 Jul 20267 Nov 2026

Before the site measured it, read from npm's daily download counts.

Popularity score 52 −3 (−6 %)

5533

9 Oct 20267 Nov 2026

What is rising across the directory

Sources

Page checked 2026-11-07.

Badge for your README

Shows this server's rank in its category, and stars for a server that runs on your machine. It updates every hour.

MarkdownREADME.md

[![StyleKit on EveryMCPServer](https://everymcpserver.com/badge/stylekit.svg)](https://everymcpserver.com/servers/stylekit)

Connect your client

Add in one click

Or add it by command or config

Add in one click

Or add it by command or config

Add in one click

Or add it by command or config

Settings 11

What it does

What it needs

Limits

Who it suits

Tools 10

Similar servers

style-system

Primitiv

Inspo

ux-ui-agent-skills

AINDF

MasterGo Magic MCP