Documentation Screenshot Annotations

Produce annotated UI screenshots in one specific house style: uniform-width orange (#e8590c) arrows with white halos, double-stroke blue outlines around targets, and (for overviews) a row of numbered callout cards over a dimmed screenshot. Never use stock arrow shapes, stroked polylines, or ad-hoc styles.

The geometry engine lives in scripts/annotate.py. Your job is to produce accurate coordinates and a config JSON; the script renders everything (supersampling, Bézier ribbons, halos, cards, shadows, WEBP export) exactly to spec. Do not reimplement the drawing by hand.

Workflow

1. Capture. Take screenshots at deviceScaleFactor: 2. Never eyeball coordinates: record every target's bounding box programmatically and save the boxes to JSON — including regions (panels, sidebars, block trees), not just buttons; eyeballed region outlines are the most common quality-gate failure. With Playwright:

   const viewport = { width: 1440, height: 900 };
   const page = await browser.newPage({ viewport, deviceScaleFactor: 2 });
   // ... navigate, prepare UI state ...
   const box = await page.locator('button:has-text("Export")').boundingBox();
   await page.screenshot({ path: 'shot.png' });
   

   Iframes: Playwright's locator(...).boundingBox() already returns main-viewport coordinates, even inside nested iframes (Playground nests main page → remote.html wrapper → the WordPress scope frame) — use the boxes as-is, no offsets. Only raw getBoundingClientRect() inside a frame's own evaluate() (or the Chrome DevTools MCP tools) needs the enclosing iframe's box offset added.