skills.rest
jarrodmedrano
jarrodmedranoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

visual-debugger

Automate visual debugging of web applications using Playwright MCP.

2|Updated Jan 11, 2026
Search Tags:#screenshots#UI testing#web automation#console monitoring#visual debugging#Playwright MCP#browser inspection
One-click install
npx skills add https://github.com/jarrodmedrano/jarrod-claude-skills --skill visual-debugger
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-debugger
Source: https://github.com/jarrodmedrano/jarrod-claude-skills/tree/main/.claude/skills/visual-debugger
Command: npx skills add https://github.com/jarrodmedrano/jarrod-claude-skills --skill visual-debugger

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Interactive visual debugging of web applications is streamlined by automating browser-based inspection, testing, and debugging tasks.

Core Features & Use Cases

  • Element inspection: verify visibility, rendering, and positioning of UI components.
  • Interactive testing: perform clicks, form interactions, and user-flow verifications.
  • Responsive design validation: test layouts across mobile, tablet, and desktop viewports.
  • Console monitoring: capture and analyze runtime errors and warnings.
  • Navigation & state checks: validate page loads, routes, and authenticated sessions.

Quick Start

Use the visual-debugger skill to start an automated visual debugging session against a target URL. The workflow involves navigating to the page, performing actions, capturing screenshots, and reporting findings.

Frequently Asked Questions about visual-debugger

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automate visual debugging of web application UI elements?▼

Automated visual debugging uses Playwright MCP to navigate target pages, interact with UI elements, capture screenshots, monitor console messages, and generate actionable findings.

Can I check responsive design layouts across different browser viewport sizes?▼

Responsive design validation is performed using browser_resize to test layouts across mobile, tablet, and desktop viewports, capturing screenshots to verify UI rendering at each breakpoint.

How do I capture and analyze browser console errors during web automation?▼

Console monitoring is executed via browser_console_messages to capture and analyze runtime errors and warnings emitted during page navigation, clicks, and form interactions.

Does visual debugging with Playwright MCP support user flow and navigation validation?▼

Navigation and state checks validate page loads, routes, and authenticated sessions using browser_navigate, browser_click, and browser_wait_for to perform deterministic user-flow verifications.

What's the best way to verify button clicks and form interactions in a web app?▼

Interactive testing verifies button clicks and form interactions using browser_click, capturing screenshots and snapshots as evidence to confirm expected UI behavior and user-flow outcomes.

What do I need to start an automated visual debugging session against a target URL?▼

Starting an automated visual debugging session requires a target URL and the Playwright MCP toolset to execute browser_navigate, browser_take_screenshot, and browser_snapshot actions for evidence capture.

Related Skills

Explore More Software Engineering Skills→
tomeraitztomeraitz
8

debugger

Execute automated browser user flows and monitor console logs with Playwright MCP.

Community
Advanced
krl76krl76

unity-console

Capture, filter, and export Unity console logs during play mode.

Community
Intermediate
stlwolfstlwolf
2

playwright-browser

Automate browser operations and DOM inspection via Playwright MCP.

Community
Advanced
apeejay-educationapeejay-education

gstack

Automate QA dogfooding with a headless browser for UI verification and screenshots.

Official
Intermediate