click-debug-panel

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.