skills.rest
dtsong
dtsongCOMMUNITY
Explore all skills by this author →
GitHub

ui-bug-investigator

Diagnose non-CSS UI bugs in Next.js App Router applications.

1|1|Updated Feb 21, 2026
Search Tags:#debugging#next.js#diagnostic#frontend qa#ui bug#component map
One-click install
npx skills add https://github.com/dtsong/claude-code-windows-setup --skill ui-bug-investigator
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-bug-investigator
Source: https://github.com/dtsong/claude-code-windows-setup/tree/main/skills/frontend-qa/ui-bug-investigator
Command: npx skills add https://github.com/dtsong/claude-code-windows-setup --skill ui-bug-investigator

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers quickly identify and diagnose non-CSS related user interface bugs in Next.js applications, reducing debugging time.

Core Features & Use Cases

  • Symptom-Targeted Checks: Analyzes component maps based on specific bug symptoms like blank pages, data loading failures, or state issues.
  • Diagnostic Reporting: Generates a structured report detailing findings, confidence levels, and potential root causes.
  • Use Case: A user reports that clicking a button does nothing. This Skill can analyze the relevant components to pinpoint if the issue lies in event handling, data flow, or rendering logic.

Quick Start

Investigate a 'blank page' symptom for the component map located at '.claude/qa-cache/component-maps/dashboard.json'.

Frequently Asked Questions about ui-bug-investigator

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

FAQPage Schema
How do I debug a blank page in a Next.js App Router application?▼

Debug a Next.js blank page by analyzing the component map to run targeted diagnostic checks for rendering, state, and data flow failures. This Skill isolates non-CSS UI bugs and outputs a structured DiagnosisReport detailing root causes.

Why does clicking a button do nothing in my Next.js frontend?▼

A Next.js button click doing nothing is diagnosed by checking the component map for event handling and data flow bugs. The Skill runs symptom-targeted checks to pinpoint the non-CSS failure and generates a report for handoff.

What is a component map for frontend UI diagnostics?▼

A component map is a structured file that defines frontend UI architecture for diagnostic analysis. The Skill parses this map to identify rendering, state, and event handling issues within Next.js applications, producing a structured DiagnosisReport.

Can I use this diagnostic tool for CSS layout and styling bugs?▼

This diagnostic tool is explicitly designed for non-CSS related UI bugs. It targets rendering, state, event handling, and data flow issues in Next.js applications, meaning CSS layout and styling bugs fall outside its diagnostic scope.

How do I start a UI bug investigation using a component map?▼

Start a UI bug investigation by providing a specific symptom, like a data loading failure, and the component map file path. The Skill analyzes the specified scope, runs targeted checks, and produces a DiagnosisReport for persistence.

What are the limitations of using automated diagnostics for Next.js UI bugs?▼

Automated UI bug diagnostics are limited by scope constraints and input sanitization protocols, targeting only non-CSS rendering, state, or event issues. Complex environmental or backend failures outside the component map may require manual investigation.

Related Skills

Explore More Software Engineering Skills→
SnakeOSnakeO
9

debug:nextjs

Diagnose and fix Next.js SSR, hydration, routing, and build-time issues.

Community
Advanced
devmuslimdevmuslim

handoff-template

Generate a structured handoff document detailing completed items, known issues, and next steps.

Community
Basic
ouzayrouzayr

fullstack-js

Build full-stack JavaScript apps with drizzle-zod, wouter, react-hook-form, react-query, and Tailwind CSS.

Community
Advanced
seiei-sogenseiei-sogen

dev-debug

Categorize and resolve test failures, build errors, and runtime exceptions.

Community
Advanced