annotate

/annotate — point-and-comment on the live app

Matt marks up the running app visually; the comments flow back here to be fixed. This skill is the loop you run. The implementation is the eight modules in overlay/, injected into the page from disk by the Playwright process — so nothing is pasted through your context and nothing is fetched over the network.

Setup

1. URL: use the [url] arg, else http://localhost:3000. Assume the dev server is already up (Matt keeps :3000 running — never kill it). If it's not, ask. If the [url] arg is a remote address (e.g. /annotate https://someothersite.com), there is no local dev server to wait for — that's a normal invocation, most often heading for Study mode (see below), which is built to work against any site, not just the local app.

2. Open the page: browser_navigate to the URL (reuse the existing browser).

3. Boot the overlay — one call, no server, no pasted source:

   browser_run_code_unsafe({ code: `async (page) => {
     const FILES = ["core.js","palette.js","ui.js","point.js","measure.js","study-motion.js","study.js","index.js"];
     for (const f of FILES) await page.context().addInitScript({ path: "<this skill's directory>/overlay/" + f });
     await page.reload({ waitUntil: "domcontentloaded" });
     return await page.evaluate(() => { window.__annotatorMods.index.setup(); return "ready"; });
   }` })
   

   addInitScript takes a path, so Playwright reads the files in its own process and injects them over CDP before the document's own scripts — the same mechanism as browser_evaluate, which Chromium does not subject to page CSP. Verified booting on github.com under default-src 'none', and on stripe.com, linear.app and localhost. Order matters: it is a dependency chain, and overlay.test.cjs asserts this list matches core.js's OWN_MODULE_FILES and the directory itself.

   What NOT to try — all four fail, and are recorded so nobody loses an afternoon rediscovering them. browser_run_code_unsafe runs the snippet in a bare vm sandbox whose only host object is page: no require ("require is not defined"), no dynamic import ("a dynamic import callback was not specified"), and page.addScriptTag({ path }) is refused by CSP both with and without a CDP Page.setBypassCSP — the bypass does not apply to a document that has already loaded.