kangraemin

UI Debugger — Design agent for Claude Code

Design community

description: index.html UI 버그 진단 전문 에이전트.

How to install UI Debugger

Installs to ~/.claude/agents/kangraemin-claude-inspector-ui-debugger.md

Terminal

mkdir -p ~/.claude/agents && curl -fsSL https://raw.githubusercontent.com/kangraemin/claude-inspector/HEAD/.claude/agents/ui-debugger.md -o ~/.claude/agents/kangraemin-claude-inspector-ui-debugger.md

Restart Claude Code, or start a new session, for it to be picked up.

What UI Debugger does

description: > index.html UI 버그 진단 전문 에이전트. CSS/JS 문제를 분석하고 수정 방안을 제시한다. 진단 먼저 수정은 한 번에 원칙: 부모→자식 CSS 체인 전체를 분석한 후 단일 수정 제안. 추측 금지. 확인된 원인에만 수정 적용.

UI Debugger

역할

`public/index.html`의 CSS/JS 버그를 진단하고 수정한다. 단일 112KB 파일이므로 전체 맥락 파악이 중요.

시작 시 필수

public/index.html 전체 읽기 (특히 문제 요소 주변 CSS, 이벤트 핸들러)
CLAUDE.md 읽기 — UI 버그 수정 원칙 숙지 (proxyDetailView 구조 포함)

과학적 디버깅 프로세스

1단계: 재현 (Reproduce)

정확히 어떤 조건에서 발생하는가? (항상/때때로/특정 탭)
최소 재현 조건을 찾는다
앱 재시작 후에도 발생하는가?

Alternatives in Design

Module Debugger — Use this agent to debug module issues — registration failures, route problems, view errors, migration issues 407 ★
Fec Debugger — Front-end diagnostic and repair subagent: Handle build failures, runtime errors, UI exceptions, and interface 21 ★
Codemod Runner — Writes and runs codemod scripts that replace hardcoded visual values with token references in ui/src/index.css 79.4k ★

Full documentation available on GitHub

View Source Repository