visual-ui-bug-debugging

What problem does it solve?

This skill resolves elusive visual UI bugs that pass all terminal API and DOM snapshot checks, which are undetectable via standard command-line tooling alone. It guides users to use browser navigation and vision analysis to catch issues like broken image placeholders, invisible elements, layout overflows, and silent JavaScript errors that do not appear in terminal outputs.

Core Features & Use Cases

• Multi-pattern debugging guidance: Includes step-by-step troubleshooting for common high-impact bugs including blank list pages with working APIs, React 19 full-tree silent unmounts from render errors, backend invariant silent failures that freeze UI forms, and missing Tailwind design tokens causing transparent dropdown/popover panels.
• Production-grade edge case handling: Covers real-world scenarios like backend-frontend data shape mismatches, client-side HTTP client error swallowing, and React render timing issues that cause error states to not display.
• Use case example: If a user reports a popover dropdown is completely transparent but all API calls return 200 and there are no console errors, this skill guides you to inspect computed styles, cross-check Tailwind config tokens, and fix the missing color token to restore the panel's background.

Quick Start

Use the visual-ui-bug-debugging skill to investigate a user's report of a non-loading video on the production learning platform by opening the live URL in a browser, running vision analysis to confirm the player is missing, and checking the ReactPlayer component's prop name against the installed version's requirements.