StyleKit — Claude Code MCP server: features and setup
StyleKit lets an AI agent search design styles, retrieve tokens and component recipes, and check UI code against style rules. Connect it when you want generated interfaces checked against a chosen style.
claude mcp add --transport http stylekit-mcp https://www.stylekit.top/mcpWhat StyleKit does
The server searches styles and public assets, then returns style profiles, design tokens, and component recipes with JSX. It can also provide the npx shadcn add command for a style theme and inspect code for rule violations, with an explanation and a suggested fix. Its tools are read-only.
The checker handles JSX and HTML class attributes, cn() and clsx() calls, template literals, and variant prefixes such as dark: and hover:. Dynamic expressions can produce an inconclusive result; the checks do not assess visual quality or accessibility. The server can run through npx or over HTTP. The Claude Code command below starts it locally with npx.
What it helps with
- find a style by keyword or category
- retrieve design tokens for a chosen style
- get a JSX recipe for a button, card, or input
- check UI code against style rules
- get a shadcn command for a style theme
Example prompts for the agent
- Find a frosted-glass style and show me its button recipe.
- Check this JSX against the chosen style rules and suggest fixes.
- Give me the
npx shadcn addcommand for this style's theme.
How to install StyleKit
1Platform CLI: remote server
claude mcp add --transport http stylekit-mcp https://www.stylekit.top/mcp2Platform CLI
claude mcp add mcp -- npx -y stylekit-mcp1Platform CLI: remote server
codex mcp add mcp --url https://www.stylekit.top/mcp2Platform CLI
codex mcp add mcp -- npx -y stylekit-mcpConfig file
{
"mcpServers": {
"mcp": {
"url": "https://www.stylekit.top/mcp"
}
}
}{
"mcpServers": {
"mcp": {
"command": "npx",
"args": [
"-y",
"stylekit-mcp"
]
}
}
}Config file
{
"servers": {
"mcp": {
"type": "http",
"url": "https://www.stylekit.top/mcp"
}
}
}{
"servers": {
"mcp": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"stylekit-mcp"
]
}
}
}1Platform CLI: remote server
gemini mcp add -t http mcp https://www.stylekit.top/mcp2Platform CLI
gemini mcp add mcp npx -y stylekit-mcpStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about StyleKit
How do I install StyleKit in Claude Code?
Run claude mcp add mcp -- npx -y stylekit-mcp. Claude Code starts the MCP server through npx.
What does StyleKit do?
It lets an agent search styles, retrieve tokens and component recipes, and check UI code for violations of a style's rules.
What does the StyleKit linter check?
It reports rule violations with an explanation and a suggested fix. Dynamic expressions can yield an inconclusive result, and the checks do not assess visual quality or accessibility.
