skills.rest
freedomw1987
freedomw1987COMMUNITY
Explore all skills by this author →
𝕏@davidaasmGitHub

visual-ui-bug-debugging

Debug visual UI bugs using browser navigation and vision analysis.

2|Updated May 10, 2026
Search Tags:#api integration#browser testing#frontend debugging#ui debugging#visual bug#react debugging#tailwind debugging
One-click install
npx skills add https://github.com/freedomw1987/tree_monstor --skill visual-ui-bug-debugging
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-ui-bug-debugging
Source: https://github.com/freedomw1987/tree_monstor/tree/main/skills/debugging/visual-ui-bug-debugging
Command: npx skills add https://github.com/freedomw1987/tree_monstor --skill visual-ui-bug-debugging

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about visual-ui-bug-debugging

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

FAQPage Schema
Why does my React page render blank when the API checks return 200 and there are no terminal errors?▼

Blank page renders with working APIs often stem from React 19 silent full-tree unmounts or data shape mismatches. Visual UI debugging catches these by analyzing browser navigation and computed styles instead of relying solely on terminal outputs.

How do I debug invisible UI elements when there are no JavaScript console errors?▼

Invisible UI elements can result from missing Tailwind design tokens causing transparent components. Debugging this involves inspecting computed styles in the browser and cross-checking the Tailwind config to identify and restore missing color tokens.

What is the best way to catch silent JavaScript errors that freeze UI forms?▼

To catch silent JavaScript errors like backend invariant silent failures that freeze UI forms, use browser navigation and vision analysis. This approach identifies rendering issues and error swallowing that standard command-line tooling misses.

Can visual frontend debugging identify backend-frontend data shape mismatches?▼

Yes, visual frontend debugging identifies backend-frontend data shape mismatches by verifying UI component configuration and rendering states in the browser. It exposes client-side HTTP client error swallowing that hides these mismatches from terminal logs.

How do I fix a transparent popover dropdown that passes all API and DOM snapshot checks?▼

Fixing a transparent popover dropdown requires checking computed styles and Tailwind config tokens for missing background colors. Visual UI debugging guides you through inspecting these CSS-based rendering issues undetectable via standard DOM snapshots.

Related Skills

Explore More Software Engineering Skills→
vhqtvnvhqtvn
1

web-fixtures

Provide deterministic fixture data for frontend browser smoke tests.

Community
Intermediate
MarcoAntoliniMarcoAntolini
1

playwright-testing

Automate end-to-end and component testing of web applications with Playwright.

Community
Advanced
snowdamizsnowdamiz

mesh-http

Build HTTP servers with routing, middleware, and WebSocket support.

Community
Intermediate
allthriveaiallthriveai

react-component-analyzer

Diagnose React/TypeScript component issues with structured debugging guidance.

Official
Intermediate