What problem does it solve? When a user reports that a UI "looks wrong", guessing from screenshots leads to wrong root-cause hypotheses and wasted fix attempts. This Skill enforces a disciplined browser-based diagnosis workflow that replaces pixel-level speculation with console errors, DOM measurements, and controlled experiments. ## Core Features & Use Cases - Console-first diagnosis: Read browser console messages before forming any hypothesis, including reloading the page to capture load-time errors. - DOM measurement over pixels: Use JavaScript to count elements, compare coordinates, and detect stacked or duplicated containers, producing quotable facts instead of impressions. - Controlled experiments: Revert your change and re-measure with the same script to prove whether a fix actually addresses the root cause. - Use Case: A Blockly toolbox shows overlapping blocks. Instead of guessing, you read the console, find a missing i18n key breaking block initialization, verify by reverting, then convert the lesson into an automated guardrail check. ## Quick Start Use the diagnose-in-browser skill to find the root cause of this UI glitch by reading the browser console and measuring the DOM instead of guessing from my screenshot.
