What problem does it solve? Intermittent frontend bugs—stale state, wrong ordering, refresh-dependent rendering, optimistic-update failures—are hard to localize because the visible symptom rarely matches the layer that actually broke. This Skill provides a disciplined diagnostic workflow that finds the first boundary where correct data becomes incorrect, instead of guessing from screenshots or PR timing. ## Core Features & Use Cases - Boundary-by-boundary tracing: Compare the same entity across DOM, component props, derived state, raw client state (Zustand/SWR), network responses, and pure transformation functions to pinpoint the exact failing layer. - Safe fixture replay and regression attribution: Build minimal sanitized fixtures, replay them against a suspected commit and its real parent, and separate the revision that introduced a latent bug from the data event that exposed it. - Acceptance-gated execution: Runs only inside the isolated, approved environment established by the parent acceptance skill, with read-only production handling and no credential or private-content exposure. - Use Case: A virtualized chat list shows a stale message after navigation. Use this Skill to compare raw store records, derived items, and virtual-list IDs, discover that a mutation updated Zustand but not the SWR cache, and fix the earliest incorrect boundary with a regression test. ## Quick Start Use the debug-frontend-with-browser skill to diagnose why the message list shows stale items after navigating back, tracing each state boundary until you find the first incorrect one.
