CSS MCP Server

Universal CSS Analysis and Documentation MCP Server. Analyze any CSS with ~150 derived metrics (built on ~78 CSSMetrics fields plus selector/property counters) for complexity, specificity, and quality.

Features

• CSS Analysis: ~150 derived metrics (78 CSSMetrics fields plus selector/property counters) for CSS complexity, specificity, and quality

• MDN Documentation: Fetch CSS property docs from MDN Web Docs

• Browser Compatibility: Check cross-browser support for CSS properties

• Project Analysis: Analyze all CSS files in a project

Installation

# Using uv
uv pip install css-mcp

# Using pip
pip install css-mcp

Usage

Start Server

# Via CLI
css-mcp

# Via Python module
python -m css_mcp.server

Environment Variables

Available Tools

Programmatic Usage

Use the analyzer directly in Python for any CSS:

Example: Analyze Any CSS

from css_mcp.analyzer import CSSAnalyzer

# Analyze any CSS content
analyzer = CSSAnalyzer()
metrics = analyzer.analyze(css_content)

# Get complexity score
print(f"Complexity: {metrics.complexity_score}/100")

# Get optimization suggestions
suggestions = analyzer.get_suggestions()

Metrics

The analyzer provides ~150 derived metrics (built from 78 CSSMetrics fields plus selector and property counters), including:

Basic Metrics

• Total rules, selectors, properties

• File size (bytes, gzipped)

• Lines of code

Selector Metrics

• ID, class, element, universal selectors

• Pseudo-classes and pseudo-elements

• Combinators (descendant, child, sibling)

• Selector depth

Specificity Metrics

• Average, min, max specificity

• High specificity rules

• Specificity distribution

Property Metrics

• Unique properties

• Category distribution (layout, typography, etc.)

• Vendor prefixes

• !important usage

• CSS custom properties

Quality Metrics

• Duplicate selectors

• Duplicate properties

• Empty rules

• Complexity score

• Efficiency scores

Browser Compatibility

Built-in compatibility data for common CSS properties across:

• Chrome

• Firefox

• Safari

• Edge

Development

# Install dev dependencies
uv sync --group dev

# Run tests
pytest

# Type check
mypy css_mcp

# Lint
ruff check css_mcp

Installation via Bodai Marketplace

The css plugin is published through the Bodai marketplace. Add the marketplace, install the plugin, and the css-mcp HTTP server becomes available as mcp__css__* tools alongside three slash commands (/css-audit-project, /css-analyze, /css-check-compat). The plugin manifest lives at .claude-plugin/plugin.json and the server is registered in the colocated .mcp.json at http://localhost:3050/mcp — start the css-mcp server first, then run claude plugin install css --marketplace bodai-plugins from a fresh session.

License

BSD-3-Clause