Skip to main content
Glama

CSS Stacking Context and Paint Order Inspector

css-stacking-context-and-paint-order-inspector
Read-onlyIdempotent

UI developers need to know why an element is behind another element, clipped unexpectedly, or trapped inside a stacking context.

Input Schema

NameRequiredDescriptionDefault
css_snippetYesMust be a non-empty CSS text snippet. Ignore unsupported at-rules gracefully and continue parsing what can be understood.
html_snippetYesMust be a non-empty HTML text snippet. The tool must parse a static DOM tree from this input only.
selected_elementYesMust identify exactly one element in the provided HTML. Accept a CSS selector or element path string. If it matches zero or multiple elements, return a selection error.
show_paint_orderYesBoolean flag controlling whether the paint order trace is included in the result.
show_stacking_context_chainYesBoolean flag controlling whether the stacking context chain is included in the result.

Output Schema

NameRequiredDescriptionDefault
likely_fix_hintsNo
paint_order_traceNo
diagnostic_summaryNo
layering_explanationNo
stacking_context_chainNo
clipping_and_containment_warningsNo

Schema Changelog

Changes observed during successful MCP inspections.

  1. Added

TDQS

C2.5/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Annotations already declare readOnlyHint, idempotentHint, and openWorldHint=false, so safety is covered elsewhere. The description contributes nothing behavioral beyond that: it doesn't mention static-DOM-only parsing, graceful handling of unsupported at-rules, or selection-error behavior — all of which appear only in the schema, not the description.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness3/5

Is the description appropriately sized, front-loaded, and free of redundancy?

A single, tight sentence with no waste, but its content is a motivation statement rather than front-loaded operational information. Concise to the point of being uninformative about invocation.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

This is a complex, five-required-parameter static analysis tool; the output schema spares it from explaining return values, and the schema covers parameter detail. Still, the description never states that it parses a provided CSS/HTML pair against a selected element — the core mechanic an agent needs to select it correctly is missing.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so all five parameters (including the two boolean toggles) are fully documented in structured fields. The description adds no parameter meaning at all, which makes the baseline 3 appropriate rather than higher.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose3/5

Does the description clearly state what the tool does and how it differs from similar tools?

The sentence describes the user problem ('why an element is behind another element, clipped unexpectedly, or trapped inside a stacking context') rather than a concrete verb+resource action. Combined with the title and tool name, an agent can infer it diagnoses CSS stacking/paint-order issues, but the description itself never says what the tool produces or does.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

No guidance on when to use this versus alternatives, and no recognition that a sibling named css-stacking-context-inspector exists with an overlapping purpose. The 'UI developers need to know why...' framing hints at a debugging scenario but gives no explicit trigger conditions.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Try in Browser

Glama MCP Gateway

Add one secure layer between your agents and this server.

Resources