skills.rest
Vincri126
Vincri126COMMUNITY
Explore all skills by this author →
GitHub

click-debug-panel

Capture UI events, network failures, and console exceptions into JSON verdicts.

Updated Aug 23, 2026
Search Tags:#claude#playwright#tauri#network-monitoring#ui-debugging#event-tracing#console-collector
One-click install
npx skills add https://github.com/Vincri126/MCO-Template --skill click-debug-panel
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: click-debug-panel
Source: https://github.com/Vincri126/MCO-Template/tree/main/.orchestrator/skills/click-debug-panel
Command: npx skills add https://github.com/Vincri126/MCO-Template --skill click-debug-panel

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

UI bugs are often buried in noisy console logs and event chaos, so this Skill layers deterministic collectors that capture pointer, focus, scroll, touch, network, and console activity to deliver a compact, structured diagnosis Claude can read within 50-150 tokens.

Core Features & Use Cases

  • Visual & headless event tracing: A floating event panel for humans plus headless collectors for Playwright/CI that monitor pointer, keyboard, focus, scroll, touch, drag, resize, and LLM/streaming patterns.
  • Network and console insight: Fetch/XMLHttpRequest interception detects CORS, timeouts, HTTP errors, duplicates, and large bodies while console interception surfaces React/Vue/security warnings, unhandled rejections, and uncaught exceptions.
  • Desktop bridge & diagnostic guide: The Tauri/Electron bridge writes combined reports to disk for non-browser environments and references provide interpretation guidance for pointer traps, scroll hijacking, touch delays, layout shifts, and memory pressure.

Quick Start

Inject the visual and headless collectors into the problematic UI, reproduce the bug, and ask Claude to read the combined JSON reports for a diagnosis.

Frequently Asked Questions about click-debug-panel

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

FAQPage Schema
How do I capture console errors and network failures for UI debugging?▼

UI event tracing uses injected collectors to monitor pointer, keyboard, focus, scroll, touch, and drag interactions. It captures these events in a floating visual panel for humans or headless collectors for Playwright/CI environments.

Can I use Playwright to trace UI events and network issues in CI?▼

Yes, you can use Playwright to trace UI events and network issues in CI. The Skill provides headless collectors that monitor interaction patterns and HTTP failures, writing structured JSON reports without requiring a visual panel.

Does this UI debugging approach work with Tauri and Electron desktop apps?▼

This UI debugging approach works with Tauri and Electron desktop apps using a dedicated bridge. The bridge captures combined network and console activity, writing diagnostic JSON reports directly to disk for non-browser environments.

How do I diagnose scroll hijacking and touch delays in web applications?▼

You diagnose scroll hijacking and touch delays by injecting collectors that trace scroll and touch events. The generated JSON reports combined with diagnostic references help identify these specific UI traps and layout shifts.

What is the best way to structure noisy console logs for AI analysis?▼

The best way to structure noisy console logs for AI analysis is intercepting them and converting the output into compact JSON verdicts. This formats unhandled rejections and warnings into 50-150 token summaries Claude can read.

Related Skills

Explore More Software Engineering Skills→
metric-space-aimetric-space-ai
2

playwright-interactive

Maintain a persistent Playwright session for iterative web and Electron QA.

Official
Advanced
miptah21miptah21
2

chrome-devtools

Inspect live browser state to diagnose UI, console, and network issues.

Community
Intermediate
onesmartguyonesmartguy
2

gitlab-ci-patterns

Automate GitLab CI/CD pipelines for build, test, and deployment workflows.

Community
Advanced
fsollafsolla

browser-testing-with-devtools

Inspect DOM, network traffic, and console logs via Chrome DevTools MCP.

Community
Advanced