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.
中文简介正在准备中。当前显示原文说明。
实测评分 未实测
查看安装方法安装前可以查看交给 AI 代理的指令内容。
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 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.
中文简介正在准备中。当前显示原文说明。
Responsive image generation and audit through a deterministic hook. It encodes every declared master into AVIF and WebP at the widths devices actually render, detects drift between masters and their generated variants, and pairs with the Picture component so pages serve the smallest fitting source. Use when adding, changing, or auditing raster images.
中文简介正在准备中。当前显示原文说明。
Design engineering principles for making interfaces feel polished. Use when building UI, reviewing frontend code, or working on any visual detail, from animations, hover states, shadows, borders, and typography to optical alignment and tabular numbers.
中文简介正在准备中。当前显示原文说明。
Authoritative reference for writing the project's prose. Use before writing, editing, or translating any document, command text, comment, or user-facing message.
中文简介正在准备中。当前显示原文说明。