MDN의 최신 CSS 문서와 포괄적인 CSS 코드 분석을 제공하는 MCP(모델 컨텍스트 프로토콜) 서버입니다.

특징

문서 및 호환성:

• 공식 MDN 문서 - MDN API에서 직접 문서를 가져오기
• 브라우저 호환성 - MDN의 BCD에서 제공하는 브라우저 지원 데이터 포함
• 간단한 API - "grid", "flexbox", [[T2]와 같은 CSS 속성 이름을 전달하기만 하면 됩니다.
• 마크다운 변환 - HTML 문서를 깔끔하고 읽기 쉬운 마크다운으로 변환합니다
• 자동 정규화 - 단순 슬러그("grid")와 전체 경로("Web/CSS/grid") 모두를 지원합니다.
• 스마트 캐싱 - 7일 TTL을 가진 SQLite 기반 캐시로 매우 빠른 응답

CSS 분석:

• 150+ 메트릭스 - 스타일시트 품질 및 복잡성에 대한 종합적인 분석
• 디자인 패턴 - 색상 팔레트, 글꼴 크기, 간격 패턴 감지
• 코드 품질 - 셀렉터 복잡성, 특이성 분석, 속성 사용
• 성능 인사이트 - 지나치게 복잡한 셀렉터 및 중복 코드 식별

설치

클로드 코드를 위해

Claude 코드 CLI를 통해 설치하세요:

VS 코드를 위해

원클릭 설치:

VS 코드 CLI를 통해 설치:

MCP 클라이언트(클로드 데스크톱 등)를 위한

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",