القائمة
Perform visual testing and UI verification using screenshots and DOM inspection. Use when verifying UI appearance, comparing with designs, or checking for visual regressions.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Automated browser testing and debugging using Browser DevTools MCP. Use when testing web pages, debugging frontend issues, verifying UI behavior, or automating browser interactions.
Use when the user wants to run JavaScript in the browser, run code in Node, or batch multiple MCP tool calls. Run script, execute code, batch tools.
Debug Node.js backend processes using non-blocking tracepoints, logpoints, exceptionpoints, and JavaScript execution. Use when debugging API servers, workers, or backend scripts.
Debug web applications by inspecting console logs, network requests, JavaScript errors, and using non-blocking tracepoints/logpoints. Use when debugging web pages, inspecting API calls, or tracing code execution.
Monitor and debug web applications using OpenTelemetry, console logs, network requests, and distributed tracing. Use when correlating frontend and backend requests or debugging request flow across services.
Analyze web page performance using Web Vitals and network timing metrics. Use when optimizing load times, checking Core Web Vitals, or investigating slow pages.
| name | visual-testing |
| description | Perform visual testing and UI verification using screenshots and DOM inspection. Use when verifying UI appearance, comparing with designs, or checking for visual regressions. |
Perform visual testing and UI verification using screenshots and DOM inspection.
This skill activates when:
content_take-screenshot) — selector or ref for elementannotate: true overlays numbered labels [1],[2],… mapping to ARIA refs (e1,e2). Use annotateContent for headings, cursorInteractive for div/span buttonscontent_save-as-pdf)Important: Do not use screenshot to understand page structure. Call a11y_take-aria-snapshot first, then screenshot for visual verification.
interaction_resize-viewport)figma_compare-page-with-design)content_get-as-html)| Device | Width | Height |
|---|---|---|
| Mobile S | 320px | 568px |
| Mobile M | 375px | 667px |
| Mobile L | 425px | 812px |
| Tablet | 768px | 1024px |
| Laptop | 1366px | 768px |
| Desktop | 1920px | 1080px |