React UI가 소스에서 올바른 것으로 알려진 데이터를 반영하지 않을 때(컴포넌트가 아무것도 렌더링하지 않거나 오래된 콘텐츠를 표시하고, API가 올바른 응답을 반환하며, react-query/데이터 페칭 훅이 멈춘 것처럼 보이거나, 네트워크 패널에 성공 200이 표시되지만 UI가 업데이트되지 않음) 중간 디버깅에 사용합니다. 라이브 상태를 검사하여 빌드나 스타일링이 아닌 런타임/타이밍 동작을 진단합니다. 빌드/컴파일 오류, 스타일링 전용 문제, 또는 API가 진정으로 잘못되거나 누락된 데이터를 반환하는 경우에는 사용하지 마십시오.
이 스킬은 React 애플리케이션에서 '데이터는 올바르게 도착했지만 UI가 업데이트되지 않는' 런타임/타이밍 버그를 진단하는 데 특화되어 있습니다. 개발자는 종종 네트워크 응답이 200(성공)임에도 불구하고 컴포넌트가 빈 화면이나 오래된 콘텐츠를 표시할 때 소스 코드를 다시 읽는 함정에 빠지기 쉽습니다. 이 스킬은 소스 코드 재검토보다 먼저 라이브 런타임 상태를 검사하도록 사고 순서를 재정렬함으로써 이러한 문제를 효율적으로 해결합니다. 주로 @tanstack/react-query v5.90 이상과 React 18을 대상으로 하며, React 파이버 트리를 탐색하여 쿼리 옵저버의 상태(`status`, `fetchStatus`, `dataUpdateCount`, `error`)를 확인하고, 강제로 다시 가져오기(refetch)를 통해 쿼리 함수 자체의 정상 여부를 판단합니다. 이를 통해 '데이터 경로 자체가 손상된 경우'와 '데이터 경로는 정상이지만 초기 쿼리가 중간에 제거된(고아 쿼리) 경우'를 명확히 구분하고, 후자의 경우 인증/세션 전환, 캐시 제거, 리마운트 경합 등 상위 생명주기/캐시 관리 코드를 집중적으로 조사하도록 안내합니다. 제공되는 코드 스니펫은 React 파이버 내부 구조와 react-query의 비공개 API에 의존하므로 버전에 따라 조정이 필요하며, 이 스킬은 Cursor, Claude Code, Codex 등 AI 코딩 어시스턴트와 함께 사용하도록 설계되었습니다.
npx skills add https://github.com/jaimegago/agent-skills/tree/HEAD/frontend-runtime-debugging데이터는 와이어 상에서 올바르지만 UI가 잘못되었습니다. 이것은 런타임/타이밍 버그이며, 시간을 낭비하게 만드는 본능은 소스 파일을 다시 읽는 것입니다. 저항하세요. 반사 신경을 재정렬하세요.
증상이 나타날 때, 즉 작업 시작 시가 아니라 중간 디버깅 시점에 사용하십시오. 다음 조건이 모두 충족될 때 사용하세요:
This repo contains 1 individual skill — each has its own dedicated page.
ElevenLabs text-to-speech with mac-style say UX.
Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.
Capture and automate macOS UI with the Peekaboo CLI.
Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".
Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.
Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".