browser-automation

Control Chrome browser tabs directly via Chrome DevTools Protocol (CDP). Use this skill for direct browser-control and debugging tasks: opening tabs, navigating pages, injecting scripts, executing JavaScript, inspecting browser tabs, extracting DOM, or getting page HTML/text. Do not use it for end-to-end UI correctness verification, visual QA, or screenshot evidence reports; use visual-verify for those workflows instead. Triggers on: "Chrome DevTools Protocol", "CDP", "Chrome CDP control", "inject script", "execute JavaScript", "extract DOM", "get page HTML/text", CDP调试, 浏览器CDP控制, 注入脚本, 执行脚本, 提取DOM, 获取页面HTML.

Verifies UI correctness during frontend development by running DOM assertions against a live browser and capturing screenshot evidence. Use this skill proactively whenever you make a UI change and need to confirm it rendered correctly — don't wait for the user to ask. This includes: verifying a new component appeared on screen, checking that a click interaction works end-to-end, confirming layout dimensions and overflow are correct, detecting unintended visual regressions after a style change, and producing a final verification report when a UI task is complete. Also invoke this skill whenever the visual-verify-on-trigger rule directs you here. Triggers on: verify UI, check the page, visual verification, DOM assertion, 验证页面, 视觉验证, UI验收, 截图对比, 检查渲染结果, visual checkpoint, baseline screenshot.

Figma visual inspection for design-to-implementation visual QA. Use this skill only when the task provides a Figma URL or exported Figma HTML and a dev page to compare against, using Chrome CDP and Visual Element Tree (VET) overlays to inspect layout, spacing, style, and annotated evidence. If there is no Figma source, use visual-verify instead. Triggers on: Figma视觉走查, Figma还原度, 设计稿对比, 走查, Figma URL + page comparison, exported Figma HTML + page comparison, visual diff against Figma, compare dev page to Figma, 页面和设计稿diff, 还原度检查, 标注视觉差异.

Capture a screenshot of a specific DOM element on an open browser tab using Chrome DevTools Protocol (CDP). Use this skill whenever you need to take a screenshot of a single element rather than the full page — for visual testing, UI comparison, capturing a component in isolation, or extracting part of a webpage as an image. Triggers on: "screenshot element", "capture element", "截取元素截图", "截图某个元素", "截取网页中某个组件", visual diff of a specific component, or any task involving element-level screenshots via CDP.

Export Figma design layers to HTML + images based on a natural language description. Use this skill whenever a user provides a Figma URL and wants to extract specific layers, convert Figma designs to HTML, or find and export matching design components from a Figma file. Triggers on: Figma URL + description of what to extract, "从Figma导出", "Figma转HTML", "extract from Figma", "Figma layer export", or any request involving Figma design-to-code conversion.

Generate semantically aligned VET (Visual Element Tree) overlays for two pages (a standard/reference page and a dev/implementation page), then produce a pixel diff to reveal layout and structural differences. Use this skill when asked to visually compare two pages, check if a UI implementation matches its reference, perform a layout diff, or produce VET screenshots for analysis. The key challenge this skill solves is that VET's automatic depth-based colour assignment produces inconsistent colour schemes across pages — this skill aligns the colours by semantic role so the diff is meaningful.

Analyse VET (Visual Element Tree) overlay images and identify structural visual discrepancies between a standard page and a dev page. Given original screenshots, VET overlays, diff images, and a VET colour mapping, this skill reads the images and returns a list of distinct issues — descriptions only, no measurement. Use this skill to triage what is visually different before handing each issue off for detailed clarification. Triggers on: analyse VET diff, identify layout issues, triage visual regression, list VET discrepancies, what's different between pages.

Measure and annotate a single visual issue identified from VET overlay comparison. Given one issue description, live browser tabs, and reference screenshots, this skill locates the relevant elements, queries their exact computed styles via CDP, and produces two annotated screenshots (red for the dev page problem, green for the standard page expectation). Use this skill when you have one specific visual discrepancy to prove with numbers and screenshots. Triggers on: measure this issue, clarify visual diff, annotate layout bug, prove CSS difference, quantify spacing discrepancy, produce annotated screenshot for issue.