Visual verification of a running page through Chrome's DevTools Protocol, capturing screenshots and measuring the rendered DOM. Use when a frontend change can only be confirmed once rendered, for layout, spacing, alignment, overflow, or theme tokens.
日本語の概要は準備中です。原文の説明を表示しています。
実行スコア 未検証
インストール方法を見るインストールする前に、エージェントに与えられる指示の中身を確認できます。
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.
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.
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.
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.
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 |
Put any query params the page supports, a forced theme, a route, or a flag, straight in the URL. Take the same shot before and after a change when the point is the difference between them.
まだレビューはありません。使ってみた感想をお寄せください。
ログインなしで書き込めます。使ってみた感想、質問、動かなかった環境などを気軽にどうぞ。
まだコメントはありません。最初のコメントを書いてみませんか。
Authoritative architecture reference for Lagune, covering repository layout, the three owners, the published skills, the catalog, the engine command and its fallback, and the tracking-map model. Use when a decision depends on repo shape.
日本語の概要は準備中です。原文の説明を表示しています。
Authoritative reference for the Lagune dashboard, a live view of a project's .lagune/ chain with a locked-down local action surface. Use before changing anything under src/dashboard/ or src/types/dashboard/.
日本語の概要は準備中です。原文の説明を表示しています。
Authoritative engineering reference covering code conventions, comments, TypeScript type rules, testing, and commit messages. Use before writing or changing any source file, and when suggesting a commit message.
日本語の概要は準備中です。原文の説明を表示しています。
Do the work the prompt asks for, with security guarding the build as it happens. Loads the charter, matches the security knowledge the work touches, builds safe-by-default, then checks its own result against what it used.
日本語の概要は準備中です。原文の説明を表示しています。
Establish or update the project's security charter, the safe-by-default principles every later phase must respect. Reads the project's files to learn what it is and uses, weighs any description you give against them, and asks when something is unclear.
日本語の概要は準備中です。原文の説明を表示しています。
Detect what the system actually does by reading the code, and map the security-relevant findings (login, uploads, payments, data exposure, and so on) with the evidence later phases need. Scans the whole project, named files, or a focused scope.
日本語の概要は準備中です。原文の説明を表示しています。