Сервер MCP (Model Context Protocol), который предоставляет актуальную документацию по CSS из MDN и комплексный анализ кода CSS.

Особенности

Документация и совместимость:

• Официальная документация MDN — загружает документацию напрямую из API MDN
• Совместимость браузера — включает данные поддержки браузера из BCD MDN
• Простой API — просто передайте имена свойств CSS, такие как "grid", "flexbox" или ":has"
• Markdown Conversion — преобразует HTML-документацию в чистую, читаемую markdown
• Автонормализация — поддерживает как простые слаги ("grid"), так и полные пути ("Web/CSS/grid")
• Smart Caching — кэш на базе SQLite с 7-дневным TTL для стремительно быстрых ответов

Анализ CSS:

• 150+ Metrics - Всесторонний анализ качества и сложности таблицы стилей
• Шаблоны дизайна — Обнаружение цветовых палитр, размеров шрифтов, шаблонов интервалов
• Качество кода — сложность селектора, анализ специфики, использование свойств
• Инсайты производительности — выявление чрезмерно сложных селекторов и избыточного кода

Установка

Для Клода Кода

Установка через Claude Code CLI:

Для VS Code

Установка в один клик:

Установка через 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",