一台MCP（模型上下文协议）服务器，提供来自MDN的最新CSS文档和全面的CSS代码分析。

特色

文档与兼容性：

• 官方MDN文档 - 直接从MDN API获取文档
• 浏览器兼容性 - 包含来自MDN浏览器支持数据的BCD
• 简单 API - 只需传递 CSS 属性名称，如 "grid"、"flexbox" 或 ":has"
• Markdown 转换 - 将 HTML 文档转换为干净、易读的 markdown
• 自动归一化 - 支持简单滑块（"grid"）和完整路径（"Web/CSS/grid"）
• Smart Caching - 基于SQLite的缓存，支持7天TTL缓存，响应速度极快

CSS分析：

• 150+ Metrics - 对样式表质量和复杂性的全面分析
• 设计模式 - 检测色彩调色板、字体大小、间距模式
• 代码质量 - 选择器复杂度、特异性分析、属性使用
• 性能洞察 - 识别过于复杂的选择器和冗余代码

安装

为了克劳德·代码

通过 Claude Code CLI 安装：

对于VS代码

一键安装：

通过VS Code CLI安装：

针对MCP客户端（Claude Desktop等）

CSS MCP Server

An MCP (Model Context Protocol) server that provides up-to-date CSS documentation from MDN and comprehensive CSS code analysis.

Features

Documentation & Compatibility:

• Official MDN Docs - Fetches documentation directly from MDN’s API
• Browser Compatibility - Includes browser support data from MDN’s BCD
• Simple API - Just pass CSS property names like "grid", "flexbox", or ":has"
• Markdown Conversion - Converts HTML documentation to clean, readable markdown
• Auto-normalization - Supports both simple slugs ("grid") and full paths ("Web/CSS/grid")
• Smart Caching - SQLite-based cache with 7-day TTL for blazing-fast responses

CSS Analysis:

• 150+ Metrics - Comprehensive analysis of stylesheet quality and complexity
• Design Patterns - Detect color palettes, font sizes, spacing patterns
• Code Quality - Selector complexity, specificity analysis, property usage
• Performance Insights - Identify overly complex selectors and redundant code

Installation

For Claude Code

Install via the Claude Code CLI:

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

For VS Code

One click install:

Install via VS Code CLI:

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

For MCP Clients (Claude Desktop, etc.)

Add to your MCP settings configuration:

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

For Development

npm install -g css-mcp

Or use with npx:

npx css-mcp --self-test

Requirements

• Node.js 20+
• Build tools for native modules (usually pre-installed on most systems)

Usage

Available Tools

get_docs

Fetch CSS documentation for any property, selector, function, or concept.

Parameters:

• slug (string) - CSS feature name or MDN path

Examples:

// Simple slugs (auto-normalized)
get_docs({ slug: "grid" });
get_docs({ slug: ":has" });
get_docs({ slug: "flexbox" });
get_docs({ slug: "@media" });
get_docs({ slug: "::before" });

// Full MDN paths also work
get_docs({ slug: "Web/CSS/grid" });
get_docs({ slug: "en-US/docs/Web/CSS/border-radius" });

Returns:

{
  "source": "mdn-doc",