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.
- CSS Analysis: ~150 derived metrics (78
CSSMetricsfields 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
# Using uv
uv pip install css-mcp
# Using pip
pip install css-mcp# Via CLI
css-mcp
# Via Python module
python -m css_mcp.server| Variable | Default | Description |
|---|---|---|
CSS_MCP_HTTP_PORT |
3050 | Server port |
CSS_MCP_HTTP_HOST |
localhost | Server host |
CSS_MCP_DEBUG |
false | Inherited Oneiric debug flag; sets the field on CSSMCPSettings but has no local behavioral effect (no code path in css_mcp/ reads settings.debug yet). Wire-up is tracked as a follow-up. |
| Tool | Description |
|---|---|
analyze_css |
Full CSS analysis with ~150 derived metrics |
analyze_css_summary |
Quick CSS summary (faster) |
get_docs |
MDN documentation for CSS properties |
get_browser_compatibility |
Check browser support for properties |
search_properties |
Search for CSS properties |
get_properties_by_category |
Get properties by category |
analyze_project_css |
Analyze all CSS in a project |
list_capabilities |
List available capabilities |
health_check |
Check server health |
Use the analyzer directly in Python for 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()The analyzer provides ~150 derived metrics (built from 78 CSSMetrics fields plus selector and property counters), including:
- Total rules, selectors, properties
- File size (bytes, gzipped)
- Lines of code
- ID, class, element, universal selectors
- Pseudo-classes and pseudo-elements
- Combinators (descendant, child, sibling)
- Selector depth
- Average, min, max specificity
- High specificity rules
- Specificity distribution
- Unique properties
- Category distribution (layout, typography, etc.)
- Vendor prefixes
!importantusage- CSS custom properties
- Duplicate selectors
- Duplicate properties
- Empty rules
- Complexity score
- Efficiency scores
Built-in compatibility data for common CSS properties across:
- Chrome
- Firefox
- Safari
- Edge
# Install dev dependencies
uv sync --group dev
# Run tests
pytest
# Type check
mypy css_mcp
# Lint
ruff check css_mcpThe 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.
BSD-3-Clause