Agent Skills › AjayIrkal23/agentic-mercy-10x › verify-ui-change

verify-ui-change

GitHub

在运行中的应用内验证UI变更是否生效,通过Reticle SDK或Playwright驱动页面并返回通过/失败结论。适用于组件、表单或路由修改后的真实性验证。

skills/verify-ui-change/SKILL.md AjayIrkal23/agentic-mercy-10x

Trigger Scenarios

编辑组件、表单、路由或API调用后 用户询问'实际上有效吗' 界面看似正确但缺乏实证时

Install

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

Use without installing

npx skills use AjayIrkal23/agentic-mercy-10x@verify-ui-change

指定 Agent (Claude Code)

npx skills add AjayIrkal23/agentic-mercy-10x --skill verify-ui-change -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": "verify-ui-change",
    "paths": [
        "**\/*.{tsx,jsx,vue,svelte,astro}"
    ],
    "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": [
                "VERIFY",
                "QA",
                "TEST"
            ],
            "keywords": [
                "reticle",
                "verify it works",
                "does it actually work",
                "prove the fix",
                "verify the change",
                "verify ui change"
            ]
        },
        "repository": "https:\/\/github.com\/reticlehq\/reticle",
        "requires_mcp": "reticle"
    },
    "description": "Check that a change to a web app actually works in the running app before calling it done. Drives the real page and returns a pass\/fail verdict with the request that fired, the state that moved, and the file:line to fix. Use after editing a component, a form, a route, or an API call; when you have said \"fixed\" but have not opened the app; when the user asks \"does it actually work?\"; or when a change looks right on screen and you cannot prove it.",
    "when_to_use": "After editing a component, form, route or API call in a web app the user is already running; when you said 'fixed' but have not seen it work; 'does it actually work?'. 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. If Reticle is missing or no session is connected, say so in one line and fall back to playwright / verification-loop.

Verify the change in the running app

You edited something a user can see. Nothing is proven until the real app has done it and something other than the DOM agrees.

This uses Reticle, which embeds a dev-only SDK in the user's running app and exposes it as reticle_* MCP tools. No screenshots, no browser download for the verify loop, no dev server of its own.

1. Are the tools here?

reticle_session({ action: "list" })
  • A session comes back → go to step 2.
  • Tools do not exist → Reticle is not installed. Do not install it yourself: tell the user in one line that setup is theirs (npx @reticlehq/server@3.3.0 init --dry-run, then a client restart), and verify with playwright / verification-loop meanwhile. Full setup is in the install-and-verify skill.
  • Tools exist, list is empty → read the why field on the response. It distinguishes "no app running" from "an app is running that never dialled this daemon" from "a tab was here and closed", and each has a different fix. If no app is running, ask the user to start it (name the package.json dev script) and wait; never start a dev server yourself. If one IS running, the app is not the missing piece and the SDK is; do not send the user to start what they already started.

2. Name the consequence BEFORE you act

This is the whole method. An expectation written after you see the result can be talked into agreeing with whatever happened; one written before cannot.

reticle_look({ action: "page", sessionId, mode: "interactive" })   // controls only, with refs

reticle_act_and_wait({ sessionId, ref, action: "click", until: { kind: "allOf", predicates: [
  { kind: "net",     method: "POST", urlContains: "/api/...", status: 200 },
  { kind: "element", query: { testid: "..." } },
  { kind: "console", level: "error", absent: true },
]}})

Multi-step journey? Drive it in one call with reticle_act { steps: [...] }, then assert the outcome once. Do not act → snapshot → act → snapshot: it proves the same thing at several times the cost.

Only reticle_act_and_wait and reticle_assert produce a verdict. reticle_act, snapshot, query, navigate, network and console move or read the app and prove nothing. A drive that ends without one of the first two has no result, however many calls it made.

3. Read the verdict honestly

verified means do
yes the consequence you named happened report it, with the evidence
no it did not happen, or a channel contradicted the UI a real finding: report it with because
unknown Reticle drove the app and could not tell not a pass. Say unknown and say why

On unknown / unsettled, re-assert rather than re-driving: reticle_assert({ predicate, since, timeout_ms: 8000 }) using the since from the act result. Re-driving repeats a side effect that already happened.

Never weaken a check to turn a verdict green. An assertion edited until it passes proves nothing.

4. Check what you did not touch

reticle_run({ tool: "reticle_verify", sessionId, args: { action: "coverage" } })   // { total, exercised, untouched }

If untouched still holds controls your change affects, the drive is unfinished. One call, and it is the cheapest guard against reporting a pass over the half you never opened.

5. Report

State what you drove, what the verdict was, and the evidence: the request and status, the state that changed, the app's own signal. If something failed, reticle_look({ action: "element", sessionId, ref }) on the failing element gives the file:line: put it in the report.

Then reticle_session({ action: "yield", mode: "waiting" }) so the human's panel stops reading "live".


More detail, fetchable one page at a time: curl https://docs.reticle.sh/llms.txt for the index, then the single page you need (tools/act-and-wait.md, predicates.md, troubleshooting.md). If Reticle itself misbehaves, file it with reticle_session { action: "feedback" }: one call, then carry on.

Version History

  • 2315578 Current 2026-10-18 19:23

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/debug-broken-ui/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
24f95466
Indexed
2026-10-18 19:23

Accueil - Wiki
Copyright © 2011-2026 iteam. Current version is 2.156.0. UTC+08:00, 2026-11-06 06:03
浙ICP备14020137号-1