skills.rest
ngareleo
ngareleoCOMMUNITY
Explore all skills by this author →
𝕏@ngareoelGitHub

debug-ui

Diagnose React UI bugs through DOM snapshots, console logs, and state inspection.

1|Updated Apr 10, 2026
Search Tags:#ui#react#troubleshoot#debug#browser#bug
One-click install
npx skills add https://github.com/ngareleo/xstream --skill debug-ui-ngareleo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: debug-ui
Source: https://github.com/ngareleo/xstream/tree/main/.claude/skills/debug-ui
Command: npx skills add https://github.com/ngareleo/xstream --skill debug-ui-ngareleo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers identify, analyze, and resolve visual bugs, rendering issues, and runtime errors in React-based user interfaces.

Core Features & Use Cases

  • UI Bug Diagnosis: Guides users through reproducing and inspecting layout and rendering problems.
  • Browser Inspection Delegation: Automatically channels browser actions like navigation, screenshots, and network requests to the browser skill.
  • Client-side State Inspection: Provides commands to evaluate the DOM and application state to pinpoint issues.
  • Use Case: When encountering a UI layout glitch, use this Skill to snapshot the DOM, check console logs, and inspect network requests all within a structured troubleshooting framework.

Quick Start

Use the debug-ui skill to diagnose a rendering issue by reviewing the DOM snapshot and console logs after reproducing the bug in the browser.

Frequently Asked Questions about debug-ui

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

FAQPage Schema
How do I debug a React UI rendering issue?▼

To diagnose a UI bug in React, this Skill guides you through reproducing the issue, snapshotting the DOM, and analyzing console logs, network requests, and application state to pinpoint the root cause.

What is the best way to inspect DOM state when troubleshooting a React layout glitch?▼

The best way to inspect DOM state is to use commands that evaluate the DOM and application state to pinpoint issues. The Skill channels browser actions like navigation and screenshots to the browser skill for structured inspection.

Can I use this to troubleshoot React runtime errors and network failures?▼

Yes, you can troubleshoot React runtime errors and network failures. The Skill facilitates detailed diagnosis by guiding you through console and network analysis to identify and resolve visual bugs and runtime errors.

Does React UI debugging require a specific browser environment?▼

React UI debugging delegates browser actions to the browser skill. You need the browser skill available to handle navigation, screenshots, and network requests during the troubleshooting workflow.

Why is my React component not rendering correctly after a network request?▼

Your React component may not render correctly due to state issues or failed network requests. The Skill helps diagnose this by evaluating client-side state and inspecting network requests to isolate the rendering problem.

Related Skills

Explore More Design & Creative Skills→
baasith6baasith6

visual-qa-testing

Automate visual QA testing of web applications with Cursor's integrated browser.

Community
Intermediate
tfsugjptfsugjp
3

web-design-reviewer

Inspect web pages and apply source-level fixes for visual design issues.

Official
Intermediate
ni-kismetni-kismet
6

playwright-cli

Automate browser navigation, form filling, screenshots, and data capture with Playwright.

Official
Advanced
zaid-khan-codezaid-khan-code
3

react-debugging

Map React DOM elements to owning components and inspect their props.

Community
Intermediate