Skip to content
Agentmart
Submit a tool

Playwright Spatial Layout MCP

MCP server that gives AI agents geometric spatial awareness of web page layouts using Playwright

Connector by vola-trebla · GitHub account verified by the MCP Registry

IndexedMITLocal (stdio)
Write a review

Install

Works with Claude Code, Codex, VS Code, Cursor, Windsurf, Claude Desktop. Read the repository before you give any tool access to your data.

npx agentmarket install connector/vola-trebla-playwright-spatial-layout-mcp

Asks which of your tools to add it to (Claude Code, Codex, Cursor, VS Code, Windsurf, Gemini CLI, Claude Desktop) and shows the change first. See https://agentmart.dev/cli.

Get the weekly diff

The weekly diff: one email a week with new agent tools, notable updates and grade changes, plus security alerts for tools you follow. Double opt-in, one-click unsubscribe.

We use your email only for this newsletter. Privacy

About

MCP server that gives AI agents geometric spatial awareness of web page layouts using Playwright

Reviews

Write a review

No reviews yet. Installed it? Reviews come from verified installers only. How reviews work

Permissions

What this server can do and what it asks for, from its tool list and install config. Checked Oct 25, 2026.

Tools
6 read · 0 write · 0 deleteRead-only
Secrets
None asked for
Install scripts
Not scanned yet
Runs as
Node.js package

Tools by what they do 6

Read from the source code; the running server may list different tools.

Read 6 · Look things up without changing anything.

  • calculate_perceptual_contrast
  • compute_viewport_reflow
  • detect_visual_occlusion
  • extract_bounding_boxes
  • verify_spatial_relationships
  • verify_stacking_context

Tools (6)

Read from the source code; the running server may differ. Descriptions are the server’s own words; hidden characters are shown as [U+…].

  • calculate_perceptual_contrast

    Measures color contrast between a text element and its background using both WCAG 2.x and APCA (WCAG 3.0 draft) formulas simultaneously. Use to answer: does this text pass accessibility contrast requirements? Is it actually readable even if it technically passes the legacy formula?

  • compute_viewport_reflow

    Measures how element positions and sizes change across multiple viewport sizes. Use to answer: does the layout break on mobile? Which elements shift most when resizing?

  • detect_visual_occlusion

    Checks if one element physically overlaps another by computing the intersection of their bounding boxes. Use to answer: is this button hidden under a sticky header? Does the cookie banner block the CTA?

  • extract_bounding_boxes

    Returns the geometric position, size, z-index, and viewport visibility for one or more DOM elements. Use to answer: where exactly on screen is this element? Is it visible? Is it off-screen?

  • verify_spatial_relationships

    Validates a set of spatial layout rules — e.g. 'nav must be above hero', 'sidebar must be left of content'. Returns pass/fail per rule with a human-readable reason. Use to answer: does the page layout match the design specification?

  • verify_stacking_context

    Reveals the full CSS stacking context chain for an element — which ancestors create new stacking contexts and why. Use to answer: why is my z-index:9999 element still behind a modal? Does this element create its own stacking context?

Signals

Stars
0
Forks
0
Open issues
0
Last commit
May 19, 2026 (5 months ago)
Last release
May 19, 2026 (5 months ago)

From GitHub (fetched Oct 24, 2026).

Details

Registry name
io.github.vola-trebla/playwright-spatial-layout-mcp
Version
0.2.0
Auth
No auth
Packages
npm playwright-spatial-layout-mcp
License
MIT
Repository
github.com/vola-trebla/playwright-spatial-layout-mcp
First seen
Oct 24, 2026
Last checked
Oct 24, 2026
Source
Official MCP Registrygithub-graphql

More from vola-trebla

Cite this page

Playwright Spatial Layout MCP. Agent Mart. https://agentmart.dev/connectors/vola-trebla-playwright-spatial-layout-mcp (last updated 2026-10-24)