uilint-mcp

MCP (Model Context Protocol) server for UILint - enables AI agents to validate UI code.

Overview

uilint-mcp provides an MCP server that allows AI coding assistants (like Claude in Cursor) to check UI consistency, query style guides, and scan markup snippets directly from your editor.

Installation

npm install -g uilint-mcp

Setup with Cursor

Add to your Cursor MCP settings (.cursor/config.json or global settings):

{
  "mcpServers": {
    "uilint": {
      "command": "node",
      "args": ["/path/to/uilint-mcp/dist/server.js"]
    }
  }
}

Or if installed globally:

{
  "mcpServers": {
    "uilint": {
      "command": "uilint-mcp"
    }
  }
}

Available Tools

Once configured, your AI assistant has access to these tools:

scan_snippet

Scan a markup snippet for UI consistency issues.

Example prompts:

• "Check this JSX for UI issues: <button className='bg-blue-600'>Click</button>"
• "Scan this HTML snippet for consistency"

Parameters:

• markup (string) - The HTML/JSX markup to scan
• styleguidePath (string, optional) - Full path to the style guide file
• model (string, optional) - Ollama model to use

scan_file

Scan an entire file for UI consistency issues.

Example prompts:

• "Scan src/components/Button.tsx for UI issues"
• "Check app/page.tsx against the style guide"

Parameters:

• filePath (string) - Path to file to scan
• styleguidePath (string, optional) - Full path to the style guide file
• model (string, optional) - Ollama model to use

Usage Examples

Once configured in Cursor, you can use natural language:

You: Check this button for UI consistency issues:
<button className="bg-blue-600 text-white px-3 py-2 rounded">Click Me</button>

AI: [Uses scan_snippet tool]
Found 1 issue:
⚠️ Color #2563EB (blue-600) is not in the style guide.
   Expected: #3B82F6 (primary blue)

Prerequisites

For LLM-powered features, you need Ollama installed locally:

# Install Ollama, then pull the default model
ollama pull qwen3-coder:30b

Direct Usage

You can also run the MCP server directly:

# Start the server
uilint-mcp

# Or with custom path
node /path/to/uilint-mcp/dist/server.js

Related Packages

• uilint-core - Core library
• uilint - Command-line interface
• uilint-react - React component

Documentation

For full documentation, visit the UILint GitHub repository.

License

MIT