cdp-layout-verificationlisted

# CDP Layout Verification Verify CSS layout claims (spacing, alignment, color, margins) against the real, live DOM of a running page, using the Chrome DevTools Protocol (CDP) directly over a WebSocket — rather than eyeballing a screenshot. ## Why this exists A headless screenshot can look "close enough" at a glance and lead to a false "looks good" conclusion, even when the actual computed margin, alignment, or color is wrong. Two concrete failures this skill prevents: - A homepage line appeared centered in a screenshot at several widths, but was actually offset ~111px left in the real DOM — only caught by measuring `getBoundingClientRect()` against the live page, after two rounds of screenshot-based "looks fine" were both wrong. - Three summary lines were meant to have an identical 11px gap between each, but a global `p + p { margin-top: ... }` rule silently added 30px to two of the three transitions. The screenshot looked plausible; only measuring each element's `top`/`bottom` in pixels revealed the inconsistency. Screenshots are still useful for a final human-readable check, but treat them as a supplement to measurement, never a replacement for it. When reporting any layout fix as verified, prefer citing actual measured numbers over "looks correct in the screenshot." ## Workflow 1. **Serve the built site.** Start (or reuse) a local server for the built output — e.g. `npx wrangler pages dev _site --port <port>` for an Eleventy/Pages project, or any s