Gives Claude real browser geometry so it can reason about overlapping elements, off-screen buttons, and responsive layout shifts that don't show up in the DOM. You get four tools: extract_bounding_boxes returns coordinates and viewport visibility for selectors, detect_visual_occlusion computes intersection ratios between elements, verify_spatial_relationships validates layout rules like "nav is above hero" or "sidebar doesn't overlap content", and compute_viewport_reflow tracks how elements shift across mobile to desktop breakpoints. Built on Playwright's bounding box APIs. Useful when debugging CSS issues in CI, validating responsive designs, or investigating why a clickable element isn't actually clickable in certain viewports.
claude mcp add --transport stdio vola-trebla-playwright-spatial-layout-mcp uvx playwright-spatial-layout-mcp