From browser-devtools-mcp
Perform visual testing and UI verification using screenshots and DOM inspection. Use when verifying UI appearance, comparing with designs, or checking for visual regressions.
npx claudepluginhub serkan-ozal/browser-devtools-claude --plugin browser-devtools-mcpThis skill uses the workspace's default tool permissions.
Perform visual testing and UI verification using screenshots and DOM inspection.
Captures screenshots, tests responsive viewports, compares with Figma designs, and inspects DOM to verify UI appearance, detect regressions, and check styling issues.
Validates UI changes via screenshot analysis, visual regression testing, design system compliance, and accessibility checks using tools like Playwright and Cypress.
Performs visual regression testing by capturing and comparing Playwright screenshots before/after changes across desktop, tablet, and mobile viewports to detect layout shifts, color changes, and UI bugs.
Share bugs, ideas, or general feedback.
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 |