CSS

The CSS MCP Server brings authoritative MDN CSS documentation and detailed stylesheet analysis directly into AI assistants like Claude Code, Gemini CLI, and Cursor AI.

You can get immediate answers about CSS syntax or browser compatibility and run a health check on your code without leaving your editor.

Features

• 📚 Live MDN Documentation: Pulls the latest CSS documentation straight from MDN’s API, so you always have the most current information.
• 🌐 Browser Compatibility Data: Checks browser support information from MDN’s Browser Compat Data (BCD).
• 📊 In-depth CSS Analysis: Provides over 150 metrics on your CSS, covering everything from selector complexity to code quality and performance.
• 🎨 Design Pattern Detection: Identifies design patterns in your code, like color palettes, font sizes, and spacing units.
• 🚀 Smart Caching: Uses an SQLite-based cache to make repeat requests for documentation significantly faster.
• 📂 Full Project Analysis: Scans all CSS files in a directory to give you a project-wide overview of your styles.

Use Cases

• Quick Syntax & Compatibility Checks: Instead of switching to a browser to look up the syntax for grid or check if you can use the :has selector, you can ask your AI assistant directly in your editor.
• Auditing Legacy CSS: When you inherit an old project with a massive, messy stylesheet, you can run analyze_project_css on the entire build directory. This gives you a high-level summary of selector complexity, redundant properties, and color usage to help plan a refactor.
• Enforcing Design System Consistency: Before a major release, run a project-wide analysis to find all unique colors and font sizes. This helps you spot inconsistencies and ensure the code adheres to your established design system.
• Code Reviews: Use the analyze_css tool on a specific file during a code review to get objective metrics on code quality. It can identify overly complex selectors or redundant code that might otherwise be missed.

Installation

For Claude Code:

claude mcp add css -- npx -y css-mcp

For VS Code:

code --add-mcp '{\"name\":\"css\",\"command\":\"npx\",\"args\":[\"-y\",\"css-mcp\"],\"env\":{}}'

For Other MCP Clients (like Claude Desktop):

{
  "mcpServers": {
    "css": {
      "command": "npx",
      "args": ["-y", "css-mcp"]
    }
  }
}

Available Tools

get_docs: This tool fetches CSS documentation for any property, selector, or concept.

• slug (string): The name of the CSS feature (e.g., "flexbox", ":has") or a full MDN path.

Example:

get_docs({ slug: "grid" });

get_browser_compatibility: This fetches browser support data for a CSS feature.

• bcd_id (string): The Browser Compat Data ID, like "css.properties.grid".

Example:

get_browser_compatibility({ bcd_id: "css.selectors.has" });

analyze_css: This tool analyzes a string of CSS code. By default, it returns a lightweight summary. For a full report with over 150 metrics, set summaryOnly to false.

• css (string, required): The CSS code you want to analyze.
• summaryOnly (boolean, optional): Set to false for the complete analysis. Defaults to true.

Example:

analyze_css({
  css: `
    .container {
      display: grid;
      color: #3b82f6;
    }
  `
});

analyze_project_css: This tool analyzes all CSS files within a specified path, which is useful for getting a complete overview of a project. It’s framework-agnostic and works on the final built CSS.

• path (string, required): The directory, file path, or glob pattern to analyze.
• includeFullAnalysis (boolean, optional): Set to true for the full 150+ metrics. Defaults to false.
• exclude (array of strings, optional): Additional glob patterns to exclude from the analysis.

Example:

// Analyze all CSS in the 'dist' folder
analyze_project_css({ path: "dist" });

FAQs

Q: What is the main benefit of the server’s cache?
A: Speed. The first time you fetch documentation for a specific CSS property, it takes around 400-500ms. After that, any subsequent requests for the same property are served from the cache in about 100ms.

Q: Why does it need Node.js 20+?
A: The MCP server uses modern JavaScript features and native modules like better-sqlite3 that require a recent Node version for performance and compatibility.

Q: Can it analyze SCSS or LESS files?
A: No. It works on compiled CSS only. Pass it the output from your build step (e.g., dist/styles.css), not source preprocessor files.

Q: What if MDN’s API is down?
A: The server falls back to its local cache if available. If no cached entry exists and the network request times out (after 10 seconds), it returns an error.

Q: How accurate is the selector complexity analysis?
A: It uses the same algorithm as CSS linters: counts ID, class, pseudo-class, and tag selectors per rule. A .nav li a:hover selector has complexity 4.

Q: Does it work offline?
A: Only for previously cached documentation. CSS analysis works fully offline since it runs locally.