Skip to content
agentusehub

Write better CSS with an MDN-aware helper

An MCP server that consults MDN docs, reports browser compatibility, and analyzes your CSS for the agent.

Time saved
Not reported
Setup time
Not reported
Running cost
Not reported
Cost range
Not reported

Use case overview

An MCP server that consults MDN docs, reports browser compatibility, and analyzes your CSS for the agent.

Reported experience

  1. What they did

    You add the server to Claude Code, VS Code or another MCP client with an npx command. The agent can then call tools to fetch MDN docs for a CSS feature, pull browser compatibility data, and analyze pasted CSS or a project's built CSS files. Analysis returns a short summary by default, and you ask in plain language.

  2. How it went

    The README gives no real-world results. It lists first fetches at about 400-500ms and cached ones at about 100ms. Summary analysis costs roughly 1-2k tokens.

  3. Worth knowing

    Full 150+ metric analysis uses about 10k+ tokens, so keep the default summary mode. It needs Node 20+ and native build tools for the SQLite cache.

Example prompts

Try with Claude Code
Review the CSS in [path to stylesheet or project] and check each questionable property or feature against MDN docs for browser support in [browsers, e.g. the last 2 versions of Safari and Chrome]. Fix issues you find, like unsupported properties or redundant rules, and explain each change. Finish with a short compatibility report listing what's safe to ship and what needs a fallback.
Software & DevOps

Port a Chrome extension to Safari

The author had ChatGPT take the Session Buddy extension source from Chrome, port it to Safari and install it, taking about 20 minutes.

ChatGPT