css-sota-mcp

by lusrodri

Not rated
GitHub

About

Tells agents what CSS you can actually ship today — Baseline status, per-browser support, stylesheet audits and UX reviews — from live webstatus.dev and MDN browser-compat-data.

Details

Author
lusrodri
Categories
Developer Tools, Other

Setup

Install css-sota-mcp in your MCP client (Claude Desktop, Cursor, Windsurf, and others).

Repository: https://github.com/lusrodri/css-sota-mcp

Follow the installation instructions in the repository README, then restart your MCP client.

An MCP server that answerswhat CSS you can actually ship today— from live Baseline data and MDN browser-compat-data, not from a model's training set.

Agents are confidently wrong about browser support. They will tell youanchor-nameis fine, or that:has()needs a polyfill, depending on when their weights were frozen. This server replaces the guess with the current answer.

- Endpointhttps://css-sota-mcp.lusrodri.workers.dev/mcp(Streamable HTTP, no auth)
- Docscss-sota-mcp.pages.dev
- Registryio.github.LuSrodri/css-sota-mcp, listed in the
official MCP Registry

check_supportandaudit_cssanswer with no network call at all — the data they need is compiled into the Worker.

Named after Steve Krug's rule: a page should be self-evident. Two modes.

mode: "guidelines"returns the principles to design against — Nielsen's 10 heuristics, Hick's and Fitts's laws, WCAG 2.2, neurodiversity-inclusive design, motion and microinteractions (including when Lottie or Rive earn their bundle cost), SVG craft and animation, light-first theming, lightness, responsiveness. Filter withtopic. The knowledge base ismcp/src/data/ux-guidelines.json; every principle carries its rationale, actionable rules and a source.

mode: "review"checks HTML and CSS — or a fetchedurl— and reports what violates which principle, with the line and the evidence.

It reads source; it does not render it.A Worker has no layout engine, so the review cannot measure computed contrast, real target sizes, or where focus actually lands. It catches what is visible in the markup: missingalt, blocked zoom, animation with no reduced-motion path, a removed focus ring, a dark-only palette, vague link text, a nav past Hick's range. A clean result is a floor, not a pass, and the tool says so in its own output.

Two target styles, because they answer different questions:

- A Baseline levelbaseline-widely,baseline-newly. Asks "is this interoperable enough to ship?", judged againstweb-features' Baseline status.
- An explicit browser listchrome 120, safari 17.4, firefox 128. Asks "does this work formyusers?", judged against per-browser versions.

Browserslist queries (last 2 versions,>0.5%) arenotaccepted. Resolving them needs usage data this server does not carry, and approximating them would produce confidently wrong audits — exactly the failure mode the server exists to fix. The tool says so rather than guessing.

claude mcp add --scope user --transport http css-sota https://css-sota-mcp.lusrodri.workers.dev/mcp

--scope userregisters it once for every project on the machine. Leave it out and the server is added to the current project only.

Remote servers go in through Connectors, not throughclaude_desktop_config.json— that file only takes local stdio servers. OpenSettings → Connectors → Add custom connectorand paste:

https://css-sota-mcp.lusrodri.workers.dev/mcp

The endpoint is unauthenticated, so the connector asks for no client id and no secret.

Openplayground.ai.cloudflare.com, paste the endpoint into the MCP server field, and connect. The six tools appear immediately.

npx @modelcontextprotocol/inspector@latest

Set transport to Streamable HTTP and connect to the endpoint.

The endpoint is public and unauthenticated on purpose: every tool is read-only over public datasets, so there is nothing to protect from disclosure. What is worth protecting is the account's request budget and the server's standing with the upstreams it proxies.

120/minute is sized against real usage rather than a round number: an agent working through a task calls a handful of tools per turn, so a burst of twenty is unremarkable and 120 leaves room for a shared address running several clients.

Cloudflare's own guidance prefers keying rate limits on a user or tenant id rather than an IP, since an IP can be shared behind NAT or a privacy relay. This endpoint has no authentication and so no such id; the limit is set generously enough that the trade is a fair one.

If you expect sustained traffic above this, run your own instance — the whole thing is one Worker and deploys in a minute.

mcp/ The MCP server — a Cloudflare Worker landing/ Documentation site — Vite, on Cloudflare Pages

What the landing page serves to crawlers

The docs site is how an agent finds this server without being told about it, so it publishes more than HTML:

Two things the page doesnotdo are worth stating, because both were true until recently. The endpoint URL is no longer injected only by script — it is in the markup, so anything that reads the HTML without executing it still learns the one fact the page exists to convey. And the Worker origin now carries aLink: …; rel="canonical"header pointing at the docs site, so the two hostnames describing this server do not compete to be the one that gets cited.

The page makesno third-party requests. The three typefaces are served from this origin, pinned inlanding/public/fonts/and declared inlanding/src/fonts.css— latin subsets only, and one file per family where upstream is variable. They came from fonts.googleapis.com until that stylesheet turned out to be the longest pole in the page's largest contentful paint: render-blocking, on another host, and itself a hop to athirdhost for the files. Regenerate them withlanding/scripts/fetch-fonts.js; it is deliberately not a build step, since refetching on every build would put a third party back in the critical path one level down.

@mdn/browser-compat-dataunpacks to ~20 MB, far past a Worker's bundle budget. At build timemcp/scripts/build-data.jsextracts the CSS slice of it plus theweb-featurescatalog, drops every field the server never reads, and encodes per-browser support positionally. The result is about 1 MB of JSON — 120 KB gzipped — which ships inside the Worker.

The generated files are gitignored. Every build, test and deploy regenerates them, so the data always matches whatever version npm resolved.

Two details worth knowing, both found the hard way:

- web-featuresencodes Baseline as"high"/"low"/false, while api.webstatus.dev and all Baseline documentation saywidely/newly/limited. The build normalises to the latter so the two halves of the server never disagree.
- MDN reorganised its CSS reference underWeb/CSS/Reference/…. Compat data records the slug a page had when the entry was written, so building a raw GitHub path frommdn_url404s.get_featureresolves the canonical slug through MDN first, then reads the source.

npm install npm run dev --workspace mcp # wrangler dev on :8787 npm test --workspace mcp # vitest npm run typecheck # both workspaces node mcp/scripts/smoke.js # real MCP protocol call against :8787 node mcp/scripts/smoke.js <url> # ...or against a deployment

smoke.jsspeaks the 2025-era Streamable HTTP flow — the same one the AI Playground and MCP Inspector use — so a passing run means those clients will work too.

Pushing tomaindeploys both. Cloudflare builds from this repo directly — no API token is stored in GitHub, and Cloudflare issues its own build credential.

The Worker's build command isnotoptional:mcp/src/data/generated/is gitignored, andsrc/data/index.tsimports it statically, so a build that skips it fails to bundle.

Because the two are independent products, neither waits for the other..github/workflows/verify.ymlcovers that gap — it smoke-tests the live endpoint on a schedule and on demand.

server.jsonis the registry's record of this server. Because the server is remote, it carries aremotesentry pointing at the Worker rather than apackagesone — there is no artifact to install, and so no package-ownership marker to place anywhere.

.github/workflows/publish-mcp.ymlrepublishes it on avtag:

git tag v0.2.0 && git push origin v0.2.0

The tag sets the version, soserver.json's own value is only a fallback for a manualworkflow_dispatchrun. The job authenticates with OIDC — proving it runs in this repository is what grants theio.github.LuSrodri/namespace — so there is no token stored in GitHub, matching how the rest of this repo deploys.

It deliberately does not run on every push. The registry record points at a URL, not at a build, so it stays correct across deploys; only a metadata change needs a new version.

Every push to a PR branch uploads a Worker version and builds the landing site, each reachable before merge:

The branch alias is the useful one — it stays put as you push. A branch namedfix/thingbecomesfix-thing-css-sota-mcp.lusrodri.workers.dev. Point theAI Playgroundor MCP Inspector at it to try a PR's server for real;node mcp/scripts/smoke.js <url>/mcpworks against it too.

A landing preview callsits own branch's Worker, not production.landing/vite.config.tsderives the alias fromCF_PAGES_BRANCHat build time, so a PR touching both halves is previewed as a matched pair. Without this the preview would show a new front end against the old server — green preview, broken on merge. An explicitVITE_MCP_ORIGINstill wins, and production builds fall through to the default.

The alias is derived rather than looked up, so a mismatch points the demo at a URL that 404s. That fails visibly: the endpoint is printed on the page and the hero reports it could not reach the server. The Pages build log prints the wiring on every preview build.

One caveat remains:no automatic PR comment.Cloudflare normally posts the preview links on the pull request; this account cannot enable that (12044: This account does not have access to Workers Previews). The URLs work — you construct them from the branch name.

npm run deploy --workspace mcp # Worker npm run deploy --workspace landing # Pages

Both need Cloudflare credentials — eitherwrangler login, orCLOUDFLARE_API_TOKENandCLOUDFLARE_ACCOUNT_IDin the environment. Note thatwrangler loginneeds a real terminal; in a non-interactive shell it refuses and asks for the token variable instead.

Cloudflare gates Workers behind these, and the errors only surface at deploy time:

- Workers enabled on the account.Until the Workers & Pages dashboard has been opened once, every Workers API call fails with10034: You need to verify your email address to use Workers— which is misleading, since a verified email does not clear it. Opening the page does.
- Aworkers.devsubdomain, if you want a*.workers.devURL. Absent one, the API answers10007.
- The Cloudflare GitHub App installed, for Git-based deploys. Without it the repository connection API answers8000008, regardless of account permissions.

MCP TypeScript SDK v2·Cloudflare Workers·webstatus.dev·@mdn/browser-compat-data·web-features

The server usescreateMcpHandler, which returns a web-standard{ fetch }object and serves requests statelessly — so there is no Durable Object, no KV, and no session affinity. Any isolate can answer any request.

This is a web browser that enables your coding agent, such as Claude Code, to visit websites on your behalf and assist you in identifying bugs or creating UI test cases.

Official Chrome DevTools MCP server for controlling and inspecting a live Chrome browser from coding agents such as Gemini, Claude, Cursor, and Copilot.

Live browser debugging for AI assistants — DOM, console, network via MCP.

An MCP server for accessing the official Angular documentation.

Debug web applications by connecting to Chrome's developer tools via the Chrome DevTools Protocol.

An MCP server for AI-assisted frontend development using Chrome DevTools. Requires Google Chrome.

Chrome DevTools Session MCP is a paid remote MCP endpoint for AI agent browser DevTools MCP. It exposes structured JSON tools, a public server card, token-based access, usage receipts, and a

Access Chromium and PDFium source code repositories using Google's official CodeSearch APIs, supporting advanced search, Gerrit integration, and issue tracking.

GadgetHumans API Hub — 24 Free MCP Tools

24 free MCP tools for AI agents — weather, crypto, search, DNS, QR codes, passwords, UUIDs, hashes, math, currency, geocoding, affiliate product search. Free tier: 100 requests/day. Pro: $2.99/mo.

Integrates Google's Gemini for advanced codebase analysis, web search, and processing of text, PDFs, and images.

An AI-assisted web development tool for creating, modifying, and deploying code through natural language conversations.

No reviews yet — be the first

Sign in to leave a review

Use Google, GitHub, or an email account so ratings stay tied to real people.

Email sign in

No reviews posted yet.