CSS SOTA
What CSS you can actually ship today, from live Baseline data and MDN browser-compat-data.
Sollte ich dies verwenden
Qualität und Sicherheit
Basierend auf einer automatisierten Analyse der Tool-Definitionen und der Einhaltung des Protokolls.
Kontextkosten
Dies ist die ungefähre Anzahl der Tokens, die jedes Mal verbraucht werden, wenn die Tools des Servers in den Kontext eines Modells geladen werden. Höhere Werte verringern die Aufmerksamkeit, die für andere Aufgaben verfügbar ist.
Installieren
Installation mit einem Klick
Fügen Sie dies Ihrer Datei `claude_desktop_config.json` hinzu:
{
"mcpServers": {
"css-sota-mcp": {
"url": "https://css-sota-mcp.lusrodri.workers.dev/mcp"
}
}
}Remote-Endpunkte
https://css-sota-mcp.lusrodri.workers.dev/mcpstreamable-httpWas es kann
Tool-Inventar
Tools (6)
🟢search_css_features(query, baseline, since, until, limit)
Search CSS features on the Web Platform Dashboard (webstatus.dev) by keyword, Baseline status, and the date range in which they reached Baseline. Use this to answer questions like "which CSS features for scroll animations are Baseline yet?" or "what limited-support CSS is there for anchoring?". Returns live Baseline data. For the browser versions a specific property shipped in, use check_support instead.
Eingabe-Schema
{
"type": "object",
"properties": {
"query": {
"description": "Free-text search over feature names and descriptions, e.g. \"container queries\", \"anchor\", \"scroll\". Omit to list all CSS features matching the other filters.",
"type": "string",
"maxLength": 120
},
"baseline": {
"description": "Filter by Baseline status: \"widely\" (interoperable for 30+ months, safe to use), \"newly\" (interoperable across all major engines recently), or \"limited\" (not yet available across all major engines).",
"type": "string",
"enum": [
"limited",
"newly",
"widely"
]
},
"since": {
"description": "Only features that became Baseline Newly available on or after this date (YYYY-MM-DD). Combined with `baseline`, this means \"went Newly in this range AND is status X today\".",
"type": "string",
"pattern": "^\\d{4}-\\d{2}-\\d{2}$"
},
"until": {
"description": "Only features that became Baseline Newly available on or before this date (YYYY-MM-DD).",
"type": "string",
"pattern": "^\\d{4}-\\d{2}-\\d{2}$"
},
"limit": {
"default": 25,
"description": "Maximum number of features to return.",
"type": "integer",
"minimum": 1,
"maximum": 100
}
},
"$schema": "https://json-schema.org/draft/2020-12/schema"
}Ausgabe-Schema
{
"type": "object",
"properties": {
"query": {
"type": "string",
"description": "The dashboard query that was executed."
},
"total": {
"description": "Total matches upstream, across all pages.",
"type": "integer",
"minimum": -9007199254740991,
"maximum": 9007199254740991
},
"truncated": {
"type": "boolean",
"description": "Whether more matches exist than were returned."
},
"features": {
"type": "array",
"items": {
"type": "object",
"properties": {
"id": {
"type": "string"
},
"name": {
"type": "string"
},
"baseline": {
"anyOf": [
{
"type": "string"
},
{
"type": "null"
}
]
},
"baselineDate": {
"anyOf": [
{
"type": "string"
},
{
"type": "null"
}
]
},
"spec": {
"anyOf": [
{
"type": "string"
},
{
"type": "null"
}
]
}
},
"required": [
"id",
"name",
"baseline",
"baselineDate",
"spec"
],
"additionalProperties": false
}
}
},
"required": [
"query",
"truncated",
"features"
],
"$schema": "https://json-schema.org/draft/2020-12/schema",
"additionalProperties": false
}🟢whats_new(since, until, transition, limit)
List CSS features that crossed a Baseline threshold within a date range, newest first. Use this to answer "what CSS can I start using now?", to write release notes, or to catch up after time away. Defaults to the last 180 days. The date is when a feature became interoperable across browsers, which is usually well after it first shipped in one.
Eingabe-Schema
{
"type": "object",
"properties": {
"since": {
"description": "Start of the window (YYYY-MM-DD), inclusive. Defaults to 180 days before today.",
"type": "string",
"pattern": "^\\d{4}-\\d{2}-\\d{2}$"
},
"until": {
"description": "End of the window (YYYY-MM-DD), inclusive. Defaults to today.",
"type": "string",
"pattern": "^\\d{4}-\\d{2}-\\d{2}$"
},
"transition": {
"default": "newly",
"description": "Which threshold was crossed in the window: \"newly\" for features that became interoperable across all major engines (the usual meaning of new), \"widely\" for those that reached the 30-month Widely available mark, or \"any\" for both.",
"type": "string",
"enum": [
"newly",
"widely",
"any"
]
},
"limit": {
"default": 50,
"description": "Maximum number of features to return.",
"type": "integer",
"minimum": 1,
"maximum": 100
}
},
"$schema": "https://json-schema.org/draft/2020-12/schema"
}Ausgabe-Schema
{
"type": "object",
"properties": {
"since": {
"type": "string"
},
"until": {
"type": "string"
},
"count": {
"type": "integer",
"minimum": -9007199254740991,
"maximum": 9007199254740991
},
"truncated": {
"type": "boolean"
},
"features": {
"type": "array",
"items": {
"type": "object",
"properties": {
"id": {
"type": "string"
},
"name": {
"type": "string"
},
"transition": {
"type": "string",
"enum": [
"newly",
"widely"
]
},
"date": {
"type": "string"
},
"baseline": {
"anyOf": [
{
"type": "string"
},
{
"type": "null"
}
]
},
"spec": {
"anyOf": [
{
"type": "string"
},
{
"type": "null"
}
]
}
},
"required": [
"id",
"name",
"transition",
"date",
"baseline",
"spec"
],
"additionalProperties": false
}
}
},
"required": [
"since",
"until",
"count",
"truncated",
"features"
],
"$schema": "https://json-schema.org/draft/2020-12/schema",
"additionalProperties": false
}🟢get_feature(feature_id, include_mdn)
Get everything known about one CSS feature: Baseline status and dates, the browser versions it shipped in, its description, spec links, Web Platform Tests scores, usage, and MDN reference prose. Accepts a web-features id ("container-queries") or a display name ("Container queries"). Use search_css_features first if you do not know the id.
Eingabe-Schema
{
"type": "object",
"properties": {
"feature_id": {
"type": "string",
"minLength": 1,
"maxLength": 120,
"description": "The web-features id, e.g. \"anchor-positioning\", \"container-queries\", \"subgrid\". A display name such as \"Anchor positioning\" also works."
},
"include_mdn": {
"default": true,
"description": "Fetch MDN reference prose for the feature. Set false for a faster, terser answer.",
"type": "boolean"
}
},
"required": [
"feature_id"
],
"$schema": "https://json-schema.org/draft/2020-12/schema"
}Ausgabe-Schema
{
"type": "object",
"properties": {
"id": {
"type": "string"
},
"name": {
"type": "string"
},
"found": {
"type": "boolean"
},
"description": {
"anyOf": [
{
"type": "string"
},
{
"type": "null"
}
]
},
"baseline": {
"anyOf": [
{
"type": "string"
},
{
"type": "null"
}
]
},
"baselineLowDate": {
"anyOf": [
{
"type": "string"
},
{
"type": "null"
}
]
},
"baselineHighDate": {
"anyOf": [
{
"type": "string"
},
{
"type": "null"
}
]
},
"spec": {
"type": "array",
"items": {
"type": "string"
}
},
"browsers": {
"type": "object",
"propertyNames": {
"type": "string"
},
"additionalProperties": {
"type": "object",
"properties": {
"version": {
"anyOf": [
{
"type": "string"
},
{
"type": "null"
}
]
},
"date": {
"anyOf": [
{
"type": "string"
},
{
"type": "null"
}
]
}
},
"required": [
"version",
"date"
],
"additionalProperties": false
}
},
"bcdKeys": {
"type": "array",
"items": {
"type": "string"
}
},
"caniuse": {
"type": "array",
"items": {
"type": "string"
}
},
"mdnUrl": {
"anyOf": [
{
"type": "string"
},
{
"type": "null"
}
]
},
"suggestions": {
"type": "array",
"items": {
"type": "string"
}
}
},
"required": [
"id",
"name",
"found",
"description",
"baseline",
"baselineLowDate",
"baselineHighDate",
"spec",
"browsers",
"bcdKeys",
"caniuse",
"mdnUrl",
"suggestions"
],
"$schema": "https://json-schema.org/draft/2020-12/schema",
"additionalProperties": false
}🟢check_support(bcd_key, property, value, all_browsers)
Look up which browser versions support a CSS property, value, selector, at-rule or function, from MDN browser-compat-data bundled with this server (no network call). Give either a BCD key ("css.properties.anchor-name") or a property with an optional value ("display" + "grid"). Also reports vendor prefixes, partial implementations and the Baseline status of the feature the key belongs to.
Eingabe-Schema
{
"type": "object",
"properties": {
"bcd_key": {
"description": "A browser-compat-data key, e.g. \"css.properties.text-wrap-style\", \"css.selectors.has\", \"css.at-rules.container\", \"css.types.color.color-mix\". Takes precedence over property/value.",
"type": "string"
},
"property": {
"description": "A CSS property name, e.g. \"display\", \"anchor-name\". Used when bcd_key is absent.",
"type": "string"
},
"value": {
"description": "A value for that property, e.g. \"grid\" for display. Falls back to the property's own support when the value is not tracked separately.",
"type": "string"
},
"all_browsers": {
"default": false,
"description": "Include every browser in the dataset (Opera, Samsung Internet, WebView, IE) rather than only the seven that determine Baseline.",
"type": "boolean"
}
},
"$schema": "https://json-schema.org/draft/2020-12/schema"
}Ausgabe-Schema
{
"type": "object",
"properties": {
"resolved": {
"type": "boolean"
},
"key": {
"anyOf": [
{
"type": "string"
},
{
"type": "null"
}
]
},
"featureId": {
"anyOf": [
{
"type": "string"
},
{
"type": "null"
}
]
},
"baseline": {
"anyOf": [
{
"type": "string"
},
{
"type": "null"
}
]
},
"deprecated": {
"type": "boolean"
},
"experimental": {
"type": "boolean"
},
"support": {
"type": "object",
"propertyNames": {
"type": "string"
},
"additionalProperties": {
"type": "object",
"properties": {
"since": {
"anyOf": [
{
"type": "string"
},
{
"type": "null"
}
]
},
"prefix": {
"anyOf": [
{
"type": "string"
},
{
"type": "null"
}
]
},
"alternativeName": {
"anyOf": [
{
"type": "string"
},
{
"type": "null"
}
]
},
"partial": {
"type": "boolean"
},
"removedIn": {
"anyOf": [
{
"type": "string"
},
{
"type": "null"
}
]
}
},
"required": [
"since",
"prefix",
"alternativeName",
"partial",
"removedIn"
],
"additionalProperties": false
}
},
"mdnUrl": {
"anyOf": [
{
"type": "string"
},
{
"type": "null"
}
]
},
"spec": {
"anyOf": [
{
"type": "string"
},
{
"type": "null"
}
]
},
"suggestions": {
"type": "array",
"items": {
"type": "string"
}
}
},
"required": [
"resolved",
"key",
"featureId",
"baseline",
"deprecated",
"experimental",
"support",
"mdnUrl",
"spec",
"suggestions"
],
"$schema": "https://json-schema.org/draft/2020-12/schema",
"additionalProperties": false
}🟢audit_css(source, target, include_passing)
Scan CSS source and report every feature in it that does not meet a browser support target. Targets are either a Baseline level ("baseline-widely", "baseline-newly") or an explicit browser list ("chrome 120, safari 17.4, firefox 128"). Reports the offending line, what is wrong (unsupported, too old, prefix-only, partial), and the minimum version that would work. Browserslist queries like "last 2 versions" are not supported. IMPORTANT when reading Baseline-level results: Baseline describes a whole feature, and a feature can be "Limited" because one part of it is not interoperable while the exact declaration you wrote works everywhere. "Cursor styles" is Limited, so `cursor: pointer` is reported — yet it only lacks iOS Safari, where a cursor is meaningless rather than broken. Each finding therefore also names the browsers missing that specific key, or says that the key ships everywhere and the status comes from elsewhere in the feature. Read that line before removing anything: a key that ships everywhere is still not proof the code works, since it may be inert without the parts that do not.
Eingabe-Schema
{
"type": "object",
"properties": {
"source": {
"type": "string",
"minLength": 1,
"maxLength": 400000,
"description": "The CSS source to audit. Malformed CSS is tolerated and scanned best-effort."
},
"target": {
"default": "baseline-widely",
"description": "Support target. Either a Baseline level (\"baseline-widely\", \"baseline-newly\") or a comma-separated browser list (\"chrome 120, safari 17.4, firefox 128\"). Known browsers: chrome, chrome_android, edge, firefox, firefox_android, safari, safari_ios, opera, opera_android, samsunginternet_android, webview_android, ie.",
"type": "string"
},
"include_passing": {
"default": false,
"description": "Also list the features that meet the target, not just the ones that fail.",
"type": "boolean"
}
},
"required": [
"source"
],
"$schema": "https://json-schema.org/draft/2020-12/schema"
}Ausgabe-Schema
{
"type": "object",
"properties": {
"target": {
"type": "string"
},
"featuresChecked": {
"type": "integer",
"minimum": -9007199254740991,
"maximum": 9007199254740991
},
"failing": {
"type": "integer",
"minimum": -9007199254740991,
"maximum": 9007199254740991
},
"unknown": {
"type": "integer",
"minimum": -9007199254740991,
"maximum": 9007199254740991
},
"findings": {
"type": "array",
"items": {
"type": "object",
"properties": {
"key": {
"type": "string"
},
"featureId": {
"anyOf": [
{
"type": "string"
},
{
"type": "null"
}
]
},
"kind": {
"type": "string"
},
"name": {
"type": "string"
},
"line": {
"type": "integer",
"minimum": -9007199254740991,
"maximum": 9007199254740991
},
"occurrences": {
"type": "integer",
"minimum": -9007199254740991,
"maximum": 9007199254740991
},
"snippet": {
"type": "string"
},
"status": {
"type": "string",
"enum": [
"pass",
"fail",
"unknown"
]
},
"reasons": {
"type": "array",
"items": {
"type": "string"
}
},
"baseline": {
"anyOf": [
{
"type": "string"
},
{
"type": "null"
}
]
}
},
"required": [
"key",
"featureId",
"kind",
"name",
"line",
"occurrences",
"snippet",
"status",
"reasons",
"baseline"
],
"additionalProperties": false
}
}
},
"required": [
"target",
"featuresChecked",
"failing",
"unknown",
"findings"
],
"$schema": "https://json-schema.org/draft/2020-12/schema",
"additionalProperties": false
}🟢dont_make_me_think(mode, topic, html, css, url)
UI/UX guidelines and a review of a page against them. mode="guidelines" returns the principles — Nielsen's 10 heuristics, Hick's and Fitts's laws, WCAG 2.2, neurodiversity-inclusive design, motion and microinteractions (including when Lottie or Rive are worth their bundle cost), SVG craft and animation, light-first theming, lightness and responsiveness — optionally filtered by topic. Read them BEFORE designing or building UI. mode="review" statically reviews supplied HTML and CSS, or a URL, and reports what violates which principle. The review reads source and does not render it, so it cannot measure computed contrast, real target sizes, or where focus lands — it catches what is visible in the markup, which is most of what actually goes wrong.
Eingabe-Schema
{
"type": "object",
"properties": {
"mode": {
"default": "guidelines",
"description": "guidelines: return the principles to design against. review: check HTML/CSS or a URL against them.",
"type": "string",
"enum": [
"guidelines",
"review"
]
},
"topic": {
"description": "Restrict guidelines to one area. Omit for all of them. Ignored when mode is \"review\".",
"type": "string",
"enum": [
"heuristics",
"laws",
"wcag",
"neurodiversity",
"motion",
"svg",
"theme",
"performance",
"responsive"
]
},
"html": {
"description": "HTML source to review.",
"type": "string",
"maxLength": 400000
},
"css": {
"description": "CSS source to review.",
"type": "string",
"maxLength": 400000
},
"url": {
"description": "Page to fetch and review. Only the HTML and its inline styles are read — linked stylesheets are not followed, so pass `css` as well for a full review.",
"type": "string",
"format": "uri"
}
},
"$schema": "https://json-schema.org/draft/2020-12/schema"
}Ausgabe-Schema
{
"type": "object",
"properties": {
"mode": {
"type": "string"
},
"version": {
"type": "string"
},
"principles": {
"type": "array",
"items": {
"type": "object",
"properties": {
"id": {
"type": "string"
},
"topic": {
"type": "string"
},
"title": {
"type": "string"
},
"principle": {
"type": "string"
},
"why": {
"type": "string"
},
"rules": {
"type": "array",
"items": {
"type": "string"
}
},
"source": {
"type": "string"
}
},
"required": [
"id",
"topic",
"title",
"principle",
"why",
"rules",
"source"
],
"additionalProperties": false
}
},
"reviewed": {
"type": "array",
"items": {
"type": "string"
}
},
"findings": {
"type": "array",
"items": {
"type": "object",
"properties": {
"principleId": {
"type": "string"
},
"principleTitle": {
"type": "string"
},
"severity": {
"type": "string",
"enum": [
"blocker",
"major",
"minor"
]
},
"message": {
"type": "string"
},
"evidence": {
"anyOf": [
{
"type": "string"
},
{
"type": "null"
}
]
},
"line": {
"anyOf": [
{
"type": "integer",
"minimum": -9007199254740991,
"maximum": 9007199254740991
},
{
"type": "null"
}
]
},
"source": {
"type": "string"
},
"occurrences": {
"type": "integer",
"minimum": -9007199254740991,
"maximum": 9007199254740991
}
},
"required": [
"principleId",
"principleTitle",
"severity",
"message",
"evidence",
"line",
"source",
"occurrences"
],
"additionalProperties": false
}
},
"counts": {
"type": "object",
"properties": {
"blocker": {
"type": "integer",
"minimum": -9007199254740991,
"maximum": 9007199254740991
},
"major": {
"type": "integer",
"minimum": -9007199254740991,
"maximum": 9007199254740991
},
"minor": {
"type": "integer",
"minimum": -9007199254740991,
"maximum": 9007199254740991
}
},
"required": [
"blocker",
"major",
"minor"
],
"additionalProperties": false
}
},
"required": [
"mode",
"version",
"principles",
"reviewed",
"findings",
"counts"
],
"$schema": "https://json-schema.org/draft/2020-12/schema",
"additionalProperties": false
}Community
Nachweis