Debugging UI Flows

Overview

Static reading of frontend and API code often produces confident wrong guesses. A broken user journey needs a temporary, correlated trail across the UI and the handlers behind it: the human reproduces once, the agent reads the sink (or a paste), and the first divergence names the real fault.

Core discipline:

No fix until the trail shows the first divergence — then densify only there, fix the cause, and delete every debug line you added.

This skill is for this bug's trail. It is not permanent production observability.

When to Use

• A UI bug needs reproduction (“button does nothing”, “wrong data after save”, “stuck loading”)
• The flow fails at a specific step and it is unclear whether the client, the API, or the wiring is wrong
• The agent is guessing from code alone and needs runtime evidence
• The user will reproduce locally (“add logs and I’ll repro”, “trace this flow”, “why is this request wrong”)