Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/johnkozaris/web-interact-plugin/click-to-fixnpx skills add johnkozaris/web-interact-plugin --skill click-to-fixgit clone --depth 1 https://github.com/johnkozaris/web-interact-pluginWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/johnkozaris/web-interact-plugin/click-to-fix)<a href="https://agentmods.dev/skills/johnkozaris/web-interact-plugin/click-to-fix"><img src="https://agentmods.dev/badge/skills/johnkozaris/web-interact-plugin/click-to-fix.svg" alt="Measured on agentmods" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00117 | $0.00863 |
| Opus 5 | $0.00059 | $0.00432 |
| Sonnet 5 | $0.00023 | $0.00173 |
| Haiku 4.5 | $0.00012 | $0.00086 |
Grade A, and why
click-to-fix scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 5d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 96 lines — stays where its author put it; the contents beside it link to each section on GitHub.
click-to-fix
Let the user click any element in their browser to trace it back to its source code.
This is a user-interactive command. You run it, then the USER physically clicks an element in their browser. The command blocks until they click (up to 2 minutes). Do NOT poll or retry — just run the command and wait for the result.
Workflow
Step 1 — Make sure a page is open
The user's app must be running in a browser. If not already open:
web-interact open "http://localhost:3000"
# Or connect to the user's running browser:
web-interact --own-browser discover
For best results, the app should be running in development mode (React/Vue/Svelte dev builds include source metadata that gives exact file + line number).
Step 2 — Run click-to-fix
web-interact click-to-fix
Tell the user:
Inspect mode is active. A purple overlay is now visible in the browser. Hover over elements to see their component name and source file. Click the element you want to fix.
The command blocks until the user clicks. Do NOT interrupt it — wait for the JSON result.
Step 3 — Parse the result
The command outputs JSON like:
{
"tag": "button",
"id": "submit-btn",
"classes": ["btn", "btn-primary"],
"text": "Submit Order",
"attributes": { "data-testid": "checkout-submit" },
"source": { "file": "src/components/Checkout/SubmitButton.tsx", "line": 42, "column": 8 },
"component": "SubmitButton",
"outerSnippet": "<button class=\"btn btn-primary\">Submit Order</button>"
}
Step 4 — Locate and open the source
If source.file exists (framework dev metadata found):
- Read the file at the reported line number (±15 lines for context)
- Show the user the component and ask what they'd like to change
If source is null (production build or unsupported framework):
- Use
componentname to search:grep -r "function ComponentName\|const ComponentName" src/ - Use
data-testidor unique CSS classes to search:grep -r "data-testid=\"value\"" src/ - Use text content:
grep -r "Submit Order" src/ - See
references/source-resolver.mdfor detailed fallback strategies
What ships with it
2 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 5d ago First seen · 96 lines · 117 tokens per session scan A 6059701040d1
click-to-fix is a skill published in the GitHub repository johnkozaris/web-interact-plugin (2 stars, last pushed 5mo ago), licensed MIT. It adds 117 tokens to every session and 863 once invoked, about $0.0006 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
chrome-control
Use when debugging web applications, diagnosing page errors, inspecting console output, or capturing screenshots via Chrome DevTools Protocol (CDP).
opencli-autofix
Automatically fix broken OpenCLI adapters when commands fail. Load this skill when an opencli command fails — it guides you through collecting a trace artifact, patching the adapter, retrying, and filing an upstream GitHub issue after a verified fix. Works with any AI agent.
axiom-sre
Expert SRE investigator for incidents and debugging. Uses hypothesis-driven methodology and systematic triage. Can query Axiom observability when available. Use for incident response, root cause analysis, production debugging, or log investigation.
rubber-duck
Adversarial "rubber duck" review that turns explaining-out-loud into a hallucination check. The main session is the PRESENTER (it did the work — a design doc, investigation, or analysis — and holds the real reasoning) and reconstructs the topic to a LISTENER — a spawned subagent pinned to a DIFFERENT-vendor model that…
convex-performance-audit
Audits Convex performance for reads, subscriptions, write contention, and function limits. Use for slow features, insights findings, OCC conflicts, or read amplification.
convex-self-heal
Production error → triaged, root-caused, repaired, and certified (tsc + rehearsal + reproduce-then-gone) fix PR for a human to merge — then confirm the error stops recurring. Never auto-merges.