MDNからの最新のCSSドキュメントと包括的なCSSコード解析を提供するMCP(モデルコンテキストプロトコル)サーバーです。

特徴

ドキュメントと互換性:

• 公式MDNドキュメント - MDNのAPIから直接ドキュメントを取得する
• ブラウザ互換性 - MDNのBCDからのブラウザサポートデータを含む
• シンプルAPI - "grid"、"flexbox"、":has"などのCSSプロパティ名を渡すだけです。
• Markdown Conversion - HTMLドキュメントをクリーンで読みやすいマークダウンに変換します
• オート正規化 - シンプルスラッグ("grid")とフルパス("Web/CSS/grid")の両方をサポートします。
• スマートキャッシュ - 7日間TTL対応のSQLiteベースのキャッシュで、非常に高速な応答を実現します

CSS分析:

• 150+ Metrics - スタイルシートの品質と複雑さの包括的な分析
• デザインパターン - カラーパレット、フォントサイズ、間隔パターンを検出
• コード品質 - セレクタの複雑さ、特異性分析、プロパティの使用
• パフォーマンスインサイト - 過度に複雑なセレクターや冗長なコードの特定

設置

クロード・コードのために

Claudeコード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",