Getting it into your agent
It runs from inside its repository, so the clone comes first — what it calls does not travel with the file alone.
git clone --depth 1 https://github.com/wellwelwel/lagunenpx agentmods add skills/wellwelwel/lagune/cdpWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/wellwelwel/lagune/cdp)<a href="https://agentmods.dev/skills/wellwelwel/lagune/cdp"><img src="https://agentmods.dev/badge/skills/wellwelwel/lagune/cdp/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/wellwelwel/lagune/cdp"><img src="https://agentmods.dev/badge/skills/wellwelwel/lagune/cdp.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00049 | $0.00624 |
| Opus 5.5 | $0.00020 | $0.00250 |
| Sonnet 5.5 | $0.00010 | $0.00125 |
| Haiku 4.5 | $0.00005 | $0.00062 |
Grade A, and why
cdp scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 13d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 45 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Rendered result verification
This skill owns the verification of what the browser actually renders. It drives a running page through Chrome's built-in DevTools Protocol (CDP) to inspect the DOM, computed styles, and layout, and to capture screenshots. It works against any URL, whatever app or domain is serving it.
Measure, never eyeball
For any spacing or alignment claim, measure the rendered DOM and report the numbers. Read geometry off the elements themselves, for example the box between an element and its container's edges, and state the values you found. A screenshot that looks aligned is not evidence.
When to use it
Reach for it when a change is hard to verify from the source alone: layout, spacing, alignment, overflow, theme tokens, or anything that only shows up once rendered. Skip it for simple, self-evident edits, for example adding a shadow, where the result is obvious from the diff.
Dependencies
The helper needs playwright and tsx. Check each with npm ls <package>, install whatever is missing as a development dependency with the package manager the root lockfile points to, then fetch the pinned browser with npx playwright install chromium.
Running it
The helper ships with this skill, at tools/cdp.ts next to this file. Run it from the project root under npx tsx, pointing at wherever the skill is installed, and write the PNGs to a directory the project ignores in git.
npx tsx <path-to-this-skill>/tools/cdp.ts --out ./temp/shots --shot 'label|<url>'
| Flag | Purpose |
|---|---|
--shot 'label|url' |
One capture, repeatable. The label names the PNG |
--measure <expr> |
Expression evaluated on every shot, its value printed with the shot |
--out <dir> |
Where the PNGs are written |
--attach <port> |
Reuse a Chromium already exposing a CDP endpoint |
--width, --height, --scale |
Viewport and device pixel ratio |
--settle <ms> |
Wait after load before measuring and capturing |
What ships with it
1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 13d ago First seen · 45 lines · 49 tokens per session scan A e182475a74b0
cdp is a skill published in the GitHub repository wellwelwel/lagune (173 stars, last pushed 2d ago), licensed MIT. It adds 49 tokens to every session and 624 once invoked, about $0.0002 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-10-04.
Other skills, from other repositories
webui-code
Use this skill when generating or reviewing WebUI code. This skill contains knowledge on WebUI code following Chrome's Lit-element architecture and styling guidelines.
figma-to-webui
Recreate Figma design frames as production-level Chromium WebUI code following Chrome's Lit-element architecture and styling guidelines. Use when asked to create WebUI code from a Figma frame URL.
responsiveness-check
Test website responsiveness across viewport widths using browser automation. Resizes a single session through breakpoints, screenshots each width, and detects layout transitions (column changes, nav switches, overflow). Produces comparison reports showing exactly where layouts break. Trigger with 'responsiveness…
octocode-chrome-devtools
Use when a live page needs Chrome DevTools/CDP evidence: network failures, console errors, performance, DOM/CSS actionability, screenshots/PDF, cookies/storage, click/fill/search, HAR, or auth-gated pages. Phrases like debug in Chrome, live page health, CDP snapshot, cookie bridge. Not for static crawl or bulk extract…
metis-browser
Control Metis Desktop Inspector built-in browser for local preview (HTML/SVG/file paths), page interaction, accessibility snapshots, and screenshots. Use when the user asks to open, show, preview, inspect, click, type, or verify UI in the in-app/built-in browser. Prefer browsernavigate over bash…
browser-7e96fe1d
A rendering skill for applying multiply, overlay, or screen blending to colour channels. Blending combines two colours to produce a new result.