Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

Debug Broken UI (Reticle)

When the console is empty and the code looks fine but the app still doesn't work, this skill gathers evidence from the running page and hands you the file:line to open.

Dev & CodingIntermediate★ 1,208⑂ 195AI score 9/10Last updated: Oct 11, 2026

What it does

  • Diagnoses "the code looks correct but it's broken" bugs — dead buttons, forms that won't submit, data that won't load, blank or stale pages, modals that won't close — from inside the running app.
  • Uses the Reticle MCP tools to read the full causal window of a single click: network requests, console errors, before→after state store diffs, storage diffs, route changes, layout shift and long tasks.
  • Ships a symptom → cause → next-step diagnosis table: no request fired means the handler isn't bound; 2xx with no change means the response was never read; a click that does nothing means the control is occluded, 0×0 or disabled.
  • Ends investigations with source: { file, line } instead of a hypothesis, and insists fixes be verified by re-running the reproduction as a verdict rather than eyeballing the page.

Who it's for

  • Frontend engineers on SPAs who burn hours on bugs that only appear at runtime.
  • Teams that need to turn vague QA reports into reproducible evidence.
  • Anyone wiring Claude Code to a browser-control MCP so the agent debugs the app itself.

Examples

  1. Save button does nothing: reproduce the click with reticle_act_and_wait, see net.total = 0 in the summary, then reticle_look { element } for the file:line and find the missing handler binding.
  2. List never refreshes: request returns 200 but stateDiffs is empty and the verdict reads outcome_unread — the bug is in the success path.
  3. Looks logged in, behaves logged out: reticle_storage shows the token was never persisted.

· · · 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)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. 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 /tmp/reticle && mkdir -p ~/.claude/skills && cp -r /tmp/reticle/skills/debug-broken-ui ~/.claude/skills/

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

  1. Open a terminal and clone the repository: git clone https://github.com/reticlehq/reticle.git /tmp/reticle
  2. Copy the skill into your Claude Code skills folder: mkdir -p ~/.claude/skills && cp -r /tmp/reticle/skills/debug-broken-ui ~/.claude/skills/
  3. This skill requires the Reticle MCP server. From your project root run: RETICLE_INSTALL_SOURCE=npx_skill npx @reticlehq/server@latest init
  4. Also copy the install-and-verify skill from the same repo to confirm the setup works.
  5. Start the dev server for the web app you want to debug, then restart Claude Code.
  6. Ask something like "this button does nothing, debug it" and the skill will trigger.
  7. If anything misbehaves, check curl https://docs.reticle.sh/troubleshooting.md.
View source on GitHub ↗License: NOASSERTION