Debug Broken UI (Reticle)

When a running web app misbehaves but the console is empty and the code looks fine, this skill gathers in-page evidence and returns the file:line to open.

Dev & CodingIntermediate★ 442⑂ 109AI score 9/10Last updated: Sep 5, 2026

What it does

Reads the click, the network request, the state store, storage and the console together as one causal window inside the running app.
Starts with reproduction via reticle_act_and_wait to get a verdict (no / contradicted / unknown), then drills only into the channel the act summary already flagged — saving wasted tool round trips.
Ships a symptom→cause→next-step diagnosis table: no request fired (unbound handler or stale cache), 2xx but nothing changed (success path bug), dead click (occluded, 0×0, disabled), "element not found" (virtualised list not mounted), pre-existing console errors.
Ends with reticle_inspect, returning the component and source: { file, line } so the investigation closes on a location rather than a hypothesis.
Requires re-running the reproduction as an asserted verdict before declaring a fix — and explicitly forbids weakening the check to make it pass.

Who it's for

Frontend/full-stack engineers on SPAs chasing bugs that reviews and screenshots cannot explain.
Teams hitting UI-vs-state desync, tokens that never persist, or virtualised lists.
Anyone who must turn a vague "it's broken" ticket into a concrete file and line.

Examples

"The Save button does nothing" → replay the click, see zero requests, inspect reveals an invisible overlay occluding the button, get the component's file:line.
"The list never refreshes" → request is 200 and the DOM is fine, but stateDiffs is empty, pinpointing a success-path bug where the response is never read.
"It looks logged in but a refresh logs me out" → reticle_storage proves the token was never written, pointing to the persistence code.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/reticlehq/reticle/HEAD/skills/debug-broken-ui/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)

Download the ZIP with the button below.
In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.

↓ Download ZIP

Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the skills/debug-broken-ui folder from the GitHub repo reticlehq/reticle into my ~/.claude/skills/debug-broken-ui/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/reticlehq/reticle.git && mkdir -p ~/.claude/skills && cp -r reticle/skills/debug-broken-ui ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

Clone the repository: git clone https://github.com/reticlehq/reticle.git
Copy the skill into your Claude Code skills folder: mkdir -p ~/.claude/skills && cp -r reticle/skills/debug-broken-ui ~/.claude/skills/
In the web project you want to debug, install the Reticle server: RETICLE_INSTALL_SOURCE=npx_skill npx @reticlehq/server@latest init
Follow the repo's install-and-verify skill to confirm the MCP connection and page instrumentation (including registering your store).
Restart Claude Code, start your dev server, then ask something like "this button does nothing — find the file causing it" to trigger the skill.
For state-level diagnosis, register a subscribable store so summary.stateUnwatched is no longer true.

View source on GitHub ↗License: NOASSERTION