New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Broken UI Debugger

by reticlehq in reticlehq/reticle

Finds why a running web app misbehaves when the console is empty and the code looks fine, by reading the click, request, store and console together.

Apache-2.0Auto-check passedDevelopment

Install Broken UI Debugger

skills CLI
$ npx skills add reticlehq/reticle --skill debug-broken-ui -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install reticlehq/reticle debug-broken-ui --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/reticlehq/reticle.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/debug-broken-ui .claude/skills/debug-broken-ui && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
debug-broken-ui
GitHub stars
1.2k
Token cost
~1.3k tokens
SKILL.md length
635 words
Files
1
Skills in repo
18
Repo updated
First seen
Licence
Apache-2.0

At a glance

Finds why a running web app misbehaves when the console is empty and the code looks fine, by reading the click, request, store and console together.

  • A button does nothing and the console shows no errors
  • SKILL.md covers Do not start by guessing.…, The diagnosis table, Get the file, not a theory and When the flow is long, plus 1 more section
  • Calls curl and npx; reaches docs.reticle.sh
  • A form will not submit or data will not load

What it does

Reticle, a tool that observes a web page from the inside, is the basis of this skill, because the evidence for such bugs is in the running app: the request that failed, the store that never changed, the handler that was never bound, the element covered by something invisible. The skill says to reproduce before guessing, listing the page's interactive controls and performing the action while waiting for a defined result.

The result of each action already carries a summary of that click's causal window, with network totals and errors, console errors, state and storage diffs, route changes, layout shift and long tasks. A verdict of no or contradicted means a channel saw something incompatible with the UI, while unknown means Reticle drove the action but could not tell. If the state channel is unwatched, empty diffs mean unwatched, not unchanged.

Only after reading the summary does it go deeper into console, network or state, scoped with the since value from the action so it does not read stale buffers. A diagnosis table maps what you see to what it is and what to do next, and the aim is to return the file and line to open. The supplied text cuts off before that table.

When your agent uses it

  • A button does nothing and the console shows no errors
  • A form will not submit or data will not load
  • A page renders blank or stale, or a modal will not close

Example prompts

  • “The save button does nothing and there are no console errors. Find out why.”
  • “This modal won't close but the code review says the handler is fine. Debug it in the running app.”
  • “The dashboard shows stale data after I click refresh. Trace the request and state changes.”

Requirements

  • Reticle set up in the project with npx @reticlehq/server@latest init
  • A running web app the agent can drive in a browser

What it can do on your machine

Read from SKILL.md and the folder at commit 15bddcf. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • curl
    • npx

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • docs.reticle.sh

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Broken UI Debugger loads about 1.3k tokens when it runs. Until then it costs about 107 tokens; SKILL.md has 635 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~107
When it runs · the whole SKILL.md, loaded when a task matches
~1.3k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from reticlehq/reticle at commit 15bddcf, republished under its Apache-2.0 licence (© reticlehq). 635 words, ~1,347 tokens.

Download SKILL.mdSave it as .claude/skills/debug-broken-ui/SKILL.md (or your agent's skills folder).
name
debug-broken-ui
description
Find out why something in a running web app does not work, when the console is empty and the code looks correct. Reads the click, the request, the store and the console together and returns the file:line to open. Use when a button does nothing, a form will not submit, data will not load, a page renders blank or stale, a modal will not close, or the user says "it's broken" and the code review says it is fine.
license
Apache-2.0
metadata.version
3.6.0
metadata.homepage
https://www.reticle.sh
metadata.repository
https://github.com/reticlehq/reticle

The app is broken and the code looks fine

Reading the source again will not tell you why. The evidence is in the running app, and most of it never reaches the screen: the request that failed, the store that never moved, the handler that was never bound, the element covered by something invisible.

Reticle reads all of it from inside the page. Not installed? RETICLE_INSTALL_SOURCE=npx_skill npx @reticlehq/server@latest init, then the install-and-verify skill.

Do not start by guessing. Start by reproducing.

reticle_look({ action: "page", sessionId, mode: "interactive" })   // controls only, with refs
reticle_act_and_wait({ sessionId, ref, action: "click", until: { kind: "element", query: { testid: "..." } } })

The verdict already narrows it: no / contradicted means a channel saw something incompatible with the UI: you have the bug. unknown means Reticle drove it and could not tell, which is a different investigation from "it failed".

Read the act result before you call anything else. Its summary block already carries the whole causal window of that one click: net {total, errors, headline}, consoleErrors, stateDiffs [{path, from, to}], storageDiffs [{key, from, to}], route, signals, layoutShift, longTasks: real before→after diffs, not counts. The console, network, storage and state calls below are for going DEEPER into something the summary already pointed at. Calling all three straight after an act pays three model round trips (and, in an approval-gated client, three human clicks) for evidence you were already holding.

summary.stateUnwatched: true means the state channel is dark: no subscribable store is registered, so an empty stateDiffs means unwatched, not unchanged, and no state-based conclusion is available until someone registers the store. It is the one field here that is about your instrumentation rather than about the app.

When the summary does point somewhere, read that channel scoped to what you just did: pass since from the act result, or you are reading a buffer that predates the click:

reticle_observe({ action: "console", sessionId, since })
reticle_observe({ action: "network", sessionId, since })
reticle_look({ action: "state", sessionId, store })

The diagnosis table

What you seeWhat it isNext
No request fired at allthe handler is not bound, or a client cache served a stale valuereticle_look { action: "element" } the element for its file:line; check the cache if it is TanStack Query
Request fired, 4xx/5xxa real backend failure the UI swallowedthe response body is in the network entry
2xx but nothing changedthe app never read the response: verdict says outcome_unreadusually a real bug in the success path
Request fine, DOM fine, store staleUI-vs-state desync, invisible to any screenshotreticle_look { action: "state" } is the only witness; this is the highest-value read here
Click did nothing, no errorthe control is dead, occluded, or disabledreticle_look { action: "element" } returns occluded, box (0×0), styles.cursor, opacity
Element "not found" that you can seevirtualised list has not mounted itreticle_scroll_to. A query that misses is not evidence of absence
Looks logged in, behaves logged outthe token never persistedreticle_storage
Console error that predates your clicka pre-existing fault, not your bugcall it out before continuing
Show full SKILL.md (169 more words)Show less

Get the file, not a theory

reticle_look({ action: "element", sessionId, ref })

Returns the component and source: { file, line } for the element you are looking at, plus whether it is occluded, sized, disabled or off-theme. That is the pointer to open. End the investigation with a location, not a hypothesis.

When the flow is long

Do not ping-pong act → snapshot → act → snapshot to find the failing step. Drive the journey with reticle_act { steps: [...] } and assert once; the first step whose consequence fails is the one to look at, and you paid a fraction of the calls to find it.

Before you say it is fixed

Re-run the reproduction as a verdict (reticle_act_and_wait with the consequence named up front) rather than eyeballing the page. A fix confirmed by looking at it is the failure mode that created this ticket.

And never weaken the check to make it pass.

Troubleshooting Reticle itself (as opposed to the app): curl https://docs.reticle.sh/troubleshooting.md. Everything else: curl https://docs.reticle.sh/llms.txt. If Reticle could not see something you needed, reticle_session { action: "feedback" } with kind: "gap".

© reticlehq, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in skills/debug-broken-ui of reticlehq/reticle.

Open the folder on GitHubat commit 15bddcf

Compare with similar skills

Broken UI Debugger next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Broken UI Debugger compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Broken UI Debugger this skillreticlehq/reticle1.2k—~1.3kAutomated safety check: PassApache-2.0
Chrome Devtools MCPmanagedcode/dotnet-skills486—~2.2kAutomated safety check: PassMIT
Graph-Based Bug Tracingtirth8205/code-review-graph32k1 repos~287Automated safety check: PassMIT
Octocode Code Researchbgauryy/octocode949—~1.5kAutomated safety check: PassMIT
Debugagentic-community/mcp-gateway-registry964—~1.8kAutomated safety check: NotesApache-2.0
Sentry Fix Issuesgetsentry/sentry-for-ai2683 repos~1.9kAutomated safety check: PassApache-2.0

Similar skills

  • Chrome Devtools MCP

    managedcode/dotnet-skills

    Use Chrome DevTools MCP from .NET agents and .NET-focused repos to inspect, debug, and automate Chrome through an MCP client.

    486 GitHub stars~2.2k tokensUpdated today
    DevelopmentAuto-check passed

  • Graph-Based Bug Tracing

    tirth8205/code-review-graph

    Traces a bug through a code knowledge graph, following callers, callees and execution flow before opening source files, within a small token budget.

    32k GitHub starsUsed in 1 repo~287 tokens
    DevelopmentAuto-check passed

  • Octocode Code Research

    bgauryy/octocode

    Researches code with evidence: traces callers, imports and cross-repo links, diagnoses failures and reports findings with exact file and line references and a confidence label.

    949 GitHub stars~1.5k tokensUpdated 4 days ago
    DevelopmentAuto-check passed

  • Debug

    agentic-community/mcp-gateway-registry

    Debug issues in the MCP Gateway Registry using first-principles thinking.

    964 GitHub stars~1.8k tokensUpdated yesterday
    DevelopmentAuto-check: notes

  • Sentry Fix Issues

    getsentry/sentry-for-ai

    Official

    Find and fix issues from Sentry using MCP. An agent skill from getsentry/sentry-for-ai.

    268 GitHub starsUsed in 3 repos~1.9k tokens
    DevelopmentAuto-check passed

  • Flowstudio Power Automate Debug

    github/awesome-copilot

    Official

    Debug failing Power Automate cloud flows using the FlowStudio MCP server.

    40k GitHub starsUsed in 2 repos~5k tokens
    DevelopmentAuto-check passed

More from reticlehq/reticle

All 18 skills in this repo

  • Verify Login Logout

    reticlehq/reticle

    Prove sign-in lands the user where they should be, sign-out really ends the session so a protected page sends them back to sign in, and an expired session asks to sign in again instead of breaking.

    1.2k GitHub starsUsed in 1 repo~1.4k tokens
    Auto-check passed

  • Verify Optimistic Update

    reticlehq/reticle

    Prove a UI that updates before the server answers puts things back and says so when the request fails, and keeps the change when it succeeds.

    1.2k GitHub starsUsed in 1 repo~1.3k tokens
    Auto-check passed

  • Verify Pagination

    reticlehq/reticle

    Prove the next page of a list, or the next batch of an infinite scroll, loads NEW rows from the server, repeats none, and that the end of the list is handled.

    1.2k GitHub starsUsed in 1 repo~1.5k tokens
    Auto-check passed

  • Agentic TDD

    reticlehq/reticle

    Applies red-green TDD to behavior unit tests cannot reach, by stating the expected outcome against the running app with Reticle before writing the feature.

    1.2k GitHub stars~1.2k tokensUpdated today
    Auto-check passed

  • Whole-App Health Sweep

    reticlehq/reticle

    Sweeps a running web app by clicking every reachable control, then reports dead buttons, console errors, failed requests and mismatches between API data and the screen.

    1.2k GitHub stars~1.1k tokensUpdated today
    Auto-check passed

  • Desktop App Driving with Reticle

    reticlehq/reticle

    Drives and verifies Electron or Tauri desktop apps through Reticle, which sees the renderer and the IPC calls that a browser-based testing tool cannot observe.

    1.2k GitHub stars~1.3k tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Broken UI Debugger

What does Broken UI Debugger do?

Finds why a running web app misbehaves when the console is empty and the code looks fine, by reading the click, request, store and console together. Reticle, a tool that observes a web page from the inside, is the basis of this skill, because the evidence for such bugs is in the running app: the request that failed, the store that never changed, the handler that was never bound, the element covered by something invisible. The skill says to reproduce before guessing, listing the page's interactive controls and performing the action while waiting for a defined result.

When should I use Broken UI Debugger?

Broken UI Debugger fits situations like: A button does nothing and the console shows no errors; A form will not submit or data will not load; A page renders blank or stale, or a modal will not close.

How do I install Broken UI Debugger in Claude Code?

Run `npx skills add reticlehq/reticle --skill debug-broken-ui -a claude-code`. Or copy the skill folder (skills/debug-broken-ui in reticlehq/reticle) into .claude/skills/debug-broken-ui in your project. Claude Code loads it when a task matches its description.

How do I install Broken UI Debugger in Codex?

Run `npx skills add reticlehq/reticle --skill debug-broken-ui -a codex`. Or copy the skill folder (skills/debug-broken-ui in reticlehq/reticle) into .agents/skills/debug-broken-ui in your project. Codex loads it when a task matches its description.

Can I use Broken UI Debugger in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add reticlehq/reticle --skill debug-broken-ui -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/debug-broken-ui, .gemini/skills/debug-broken-ui, .github/skills/debug-broken-ui and .opencode/skills/debug-broken-ui in your project.

What does Broken UI Debugger need to run?

Going by SKILL.md and its folder, Broken UI Debugger needs the command-line tools its instructions call (curl and npx). Our summary lists: Reticle set up in the project with npx @reticlehq/server@latest init; A running web app the agent can drive in a browser.

Does Broken UI Debugger access the network?

SKILL.md names 1 domain. In commands or code: docs.reticle.sh; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is Broken UI Debugger safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Broken UI Debugger use?

Broken UI Debugger is published under the Apache-2.0 licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Broken UI Debugger use?

About 1.3k tokens (SKILL.md is roughly 5.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Broken UI Debugger?

Skills that share tags, products or a category with Broken UI Debugger: Chrome Devtools MCP (managedcode/dotnet-skills, 486 stars), Graph-Based Bug Tracing (tirth8205/code-review-graph, 32k stars), Octocode Code Research (bgauryy/octocode, 949 stars) and Debug (agentic-community/mcp-gateway-registry, 964 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Broken UI Debugger?

reticlehq (a GitHub organization) maintains it in reticlehq/reticle, which has 1,190 GitHub stars. The repository holds 18 skills in this directory. The repository was last updated on October 8, 2026.

Source: reticlehq/reticle on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.