debug-broken-ui

GitHub

用于定位运行中Web应用UI故障的调试技能,通过工具分析点击、请求、状态和控制台数据,精准定位问题代码位置。

skills/debug-broken-ui/SKILL.md AjayIrkal23/agentic-mercy-10x

Trigger Scenarios

按钮无响应 表单提交失败 页面渲染空白或数据陈旧 弹窗无法关闭 用户反馈功能损坏但代码审查无误

Install

npx skills add AjayIrkal23/agentic-mercy-10x --skill debug-broken-ui -g -y
More Options

Use without installing

npx skills use AjayIrkal23/agentic-mercy-10x@debug-broken-ui

指定 Agent (Claude Code)

npx skills add AjayIrkal23/agentic-mercy-10x --skill debug-broken-ui -a claude-code -g -y

安装 repo 全部 skill

npx skills add AjayIrkal23/agentic-mercy-10x --all -g -y

预览 repo 内 skill

npx skills add AjayIrkal23/agentic-mercy-10x --list

SKILL.md

Frontmatter
{
    "name": "debug-broken-ui",
    "license": "Apache-2.0",
    "metadata": {
        "guard": "Never run reticle init \/ start dev servers \/ open browsers unprompted; attach to the user's running app.",
        "version": "3.3.0",
        "category": "frontend",
        "homepage": "https:\/\/www.reticle.sh",
        "surfaces": [
            "frontend"
        ],
        "triggers": {
            "paths": [
                "**\/*.{tsx,jsx,vue,svelte,astro}"
            ],
            "intents": [
                "DEBUG"
            ],
            "keywords": [
                "reticle",
                "button does nothing",
                "form will not submit",
                "silent failed request",
                "page renders blank",
                "data will not load"
            ]
        },
        "repository": "https:\/\/github.com\/reticlehq\/reticle",
        "requires_mcp": "reticle"
    },
    "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.",
    "when_to_use": "A button does nothing, a form will not submit, data will not load, a page renders blank or stale, a silent failed request — in a web app the user is already running. Needs the reticle MCP connected."
}

Local guard (vendor patch, ~/.claude): attach only to the app the user already runs. Never run reticle init/setup, never start a dev server, never open a browser, never call reticle_feedback unprompted. debug-investigation stays the doctrine; Reticle is the evidence tool.

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? Stop and tell the user in one line: setup is theirs, never run reticle init yourself. Their guide: 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 see What it is Next
No request fired at all the handler is not bound, or a client cache served a stale value reticle_look { action: "element" } the element for its file:line; check the cache if it is TanStack Query
Request fired, 4xx/5xx a real backend failure the UI swallowed the response body is in the network entry
2xx but nothing changed the app never read the response: verdict says outcome_unread usually a real bug in the success path
Request fine, DOM fine, store stale UI-vs-state desync, invisible to any screenshot reticle_look { action: "state" } is the only witness; this is the highest-value read here
Click did nothing, no error the control is dead, occluded, or disabled reticle_look { action: "element" } returns occluded, box (0×0), styles.cursor, opacity
Element "not found" that you can see virtualised list has not mounted it reticle_scroll_to. A query that misses is not evidence of absence
Looks logged in, behaves logged out the token never persisted reticle_storage
Console error that predates your click a pre-existing fault, not your bug call it out before continuing

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".

Version History

  • 2315578 Current 2026-10-18 19:20

Same Skill Collection

skills/agentation-react/SKILL.md
skills/baseline-ui/SKILL.md
skills/brand/SKILL.md
skills/context7-mcp/SKILL.md
skills/create-design-md/SKILL.md
skills/design-system-compliance/SKILL.md
skills/design-taste-frontend/SKILL.md
skills/design/SKILL.md
skills/docker-compose/SKILL.md
skills/ensure-repo-docs/SKILL.md
skills/expo-react-native/SKILL.md
skills/false-green-tests/SKILL.md
skills/fastify-patterns/SKILL.md
skills/fixing-accessibility/SKILL.md
skills/fixing-metadata/SKILL.md
skills/fixing-motion-performance/SKILL.md
skills/grill-with-docs/SKILL.md
skills/higgsfield-brandkit/SKILL.md
skills/higgsfield-video-explainer/SKILL.md
skills/higgsfield-youtube-thumbnail/SKILL.md
skills/idea-refine/SKILL.md
skills/img2threejs/SKILL.md
skills/improve-ui/SKILL.md
skills/invoke-audit/SKILL.md
skills/invoke-clean/SKILL.md
skills/invoke-debug/SKILL.md
skills/invoke-design/SKILL.md
skills/invoke-docs/SKILL.md
skills/invoke-impl/SKILL.md
skills/invoke-plan/SKILL.md
skills/invoke-refactor/SKILL.md
skills/invoke-review/SKILL.md
skills/invoke-security/SKILL.md
skills/invoke-session/SKILL.md
skills/invoke-spec/SKILL.md
skills/invoke-status/SKILL.md
skills/invoke-test/SKILL.md
skills/invoke-update/SKILL.md
skills/invoke-verify/SKILL.md
skills/invoke/SKILL.md
skills/kokonutui/SKILL.md
skills/mmx-cli/h3-video/SKILL.md
skills/modern-web-guidance/SKILL.md
skills/mongoose-patterns/SKILL.md
skills/no-ai-slop/SKILL.md
skills/slides/SKILL.md
skills/test-error-states/SKILL.md
skills/threejs-r3f/SKILL.md
skills/to-issues/SKILL.md

Metadata

Files
0
Version
2315578
Hash
21ebec2d
Indexed
2026-10-18 19:20

Home - Wiki
Copyright © 2011-2026 iteam. Current version is 2.155.2. UTC+08:00, 2026-10-19 22:51
浙ICP备14020137号-1