visual-review
比人工截图更精确发现层级与溢出错误，适合前端 QA 与开发。
需访问浏览器调试接口，可能要求远程执行脚本权限
利用浏览器已解析的绘制顺序计算遮挡、裁剪与对齐，自动校验视觉布局问题。
用浏览器已解析的绘制顺序来判定遮挡、裁剪和对齐问题，而不是只看平面截图。通过 chrome‑devtools 的 evaluate_script 查询 paint order，可以精确发现 z‑index、overflow: hidden 或固定覆盖层导致的隐藏或裁剪问题，还能做光学质心等度量来判断文本视觉对齐。遇到难以肉眼判断的视觉 bug，先跑这套测量再决定修复方案。
▸ 展开 SKILL.md 英文原文
Verify UI/layout/styling changes are correct by computing occlusion, clipping, and alignment from the browser's resolved paint order via the chrome-devtools MCP `evaluate_script` tool — instead of eyeballing a flat screenshot. Invoke BEFORE declaring any UI, site, or styling/layout change correct. Screenshots have no depth buffer, so z-index/occlusion/clip bugs are exactly where "just look at it" fails; the `evaluate_script` routines below turn those fuzzy visual judgments into deterministic measurements — including optical center-of-mass, which measures the glyph ink's true visual center so differently-sized labels can be aligned by more than eye.
帮我安装这个 skill：https://raw.githubusercontent.com/nubjs/nub/main/.claude/skills/visual-review/SKILL.mdcurl -fsSL "https://raw.githubusercontent.com/nubjs/nub/main/.claude/skills/visual-review/SKILL.md"# Visual review — compute occlusion, don't perceive it A flat PNG has no depth buffer and no stacking-context model, so layering and clipping bugs (z-index, `overflow: hidden`, fixed/sticky overlays) are exactly where eyeballing fails. The browser already resolved the paint order; query it with `evaluate_script` (chrome-devtools MCP). **Run both passes.** Geometry catches occlusion the eye misses; the eye catches font-metric and color issues geometry misses. ## Optical ≠ mathematical A layout can be geometrically consistent and still look wrong. Never declare a spacing/alignment/centering change correct from measurements alone — change it, screenshot it, look, and adjust by eye. Expect t