复制安装命令
用 Codex 或 Claude 安装复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它先审查 Skill 页面再帮你安装。
复制前请先查看来源、License 和安全提示。
Your AI agent says "done." Reticle checks whether that's true.
用 Codex 或 Claude 安装复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它先审查 Skill 页面再帮你安装。
复制前请先查看来源、License 和安全提示。
来源文件:README.md
Your AI agent says "done." Reticle checks whether that's true.
It drives your real running app, reads what actually happened, and hands back pass · fail · couldn't tell with the file:line to fix.
Install · Use it · How it works · vs Playwright · Benchmarks · Limits · Docs
▶ Two minutes. An agent finds a bug the screen was hiding, and proves the fix.
Three steps. The first one is the whole install.
macOS · Linux
curl -fsSL https://raw.githubusercontent.com/reticlehq/reticle/main/install/install.sh | sh
Windows (PowerShell)
irm https://raw.githubusercontent.com/reticlehq/reticle/main/install/install.ps1 | iex
It puts reticle on your PATH and registers the MCP server with every coding agent it can reach: Claude Code, Cursor, Windsurf, VS Code, Zed, Gemini CLI, Copilot CLI, OpenCode, Warp, Kiro, Amazon Q, Cline, Amp, Continue and Factory Droid. Nothing is asked. Nothing is written outside your agent configs and ~/.reticle.
Codex CLI keeps a TOML config we don't rewrite, so the installer prints the four lines to paste and where they go. It tells you; it doesn't pretend.
That's it. The tools are already there, because the installer wrote the config before your agent started.
Run the installer first, in a terminal. A coding agent reads its MCP server list once at startup. Install while it's closed and there is nothing to restart. If it was already open, quit and reopen it once.
In your project, let your agent run:
RETICLE_INSTALL_SOURCE=readme npx @reticlehq/server init
Like npm init or git init, this is the per-project step. It installs the dev-only SDK, wires your build config, restarts your dev server, and then opens your app and proves a session connected. A config file is not an install, so init doesn't stop until it has seen your app.
Step 1 is once per machine. This step is once per project.
npx @reticlehq/server doctor
Or just ask your agent: "Is Reticle connected to my app?"
npm install -g @reticlehq/server # 1. the CLI
npx @reticlehq/server setup mcp # 2. register it with your agents
Step 2 registers the same agents as the installer, and writes the /reticle skill where the agent supports one. On Claude Code it also pre-approves the Reticle tools, so there is no Accept prompt on every call.
Any other MCP client: point it at npx @reticlehq/server mcp.
{ "mcpServers": { "reticle": { "command": "npx", "args": ["@reticlehq/server", "mcp"] } } }
Then continue at step 2 above: open your agent, and run npx @reticlehq/server init in your project.
The RETICLE_INSTALL_SOURCE prefix above is optional. It tells us which page somebody installed from, so we know which docs are working.
Requires Node 20.11+.
/plugin marketplace add reticlehq/reticle
/plugin install reticle@reticlehq
Registers the MCP server and installs the Reticle skill together. Reopen Claude Code once and the tools are there.
For other agents that support the skills CLI:
npx skills add reticlehq/reticle
You never write test syntax. You say what should be true, in plain English.
Verify what you just built
"I changed checkout. Verify it with Reticle before you tell me it's done."
Find what the screen is hiding
"The page looks fine but something's off. Use Reticle to check what's happening underneath."
Prove a bug is fixed
"Reproduce the bug with Reticle, fix it, then prove the fix with the same steps."
Lock a flow so it can't break
"Record the login flow with Reticle, then re-verify it after every change."
Sweep before you ship
"Walk the main routes with Reticle. Tell me anything broken."
Reticle answers with evidence: the request that fired, the state that changed, the console line, and the file to open.
Playwright, DevTools and browser agents all stand outside the browser looking in. For a site you don't own, that's right. For the app you're building, the bugs that matter never reach the pixels.
| Bug | Looks fine on screen? | Reticle reads |
|---|---|---|
Pay button silently returns 500 | yes | the network response, tied to the click |
Badge shows "12", the store holds 0 | yes | your app's state |
| The form fired the request twice | yes | request count |
| "Deploy succeeded", the deploy failed | yes | the store's real status |
| A console error slipped in | yes | the console since the action |
| Component re-renders 60×/sec | yes | the React commit stream |
Use both. Playwright for sites you don't own, many browsers, real pixels. Reticle for the app you're building, inside your agent's loop.
Your agent writes code, assumes it worked, and moves on. It never opens the app.
So the broken modal, the silent 500, the "Deploy succeeded" over a failed deploy: they all ship, and you find them by clicking around afterwards. You've become your agent's QA.
The truth was in the running app the whole time. It just never reached the screen.
This isn't something your agent forgot. A coding agent is built to produce a change, and it's optimistic by construction. Verification is the opposite motion: going to find out, and being willing to come back with no.
You: "Verify login works."
Agent, via Reticle: clicks Sign in →
POST /api/login → 200 (14 ms)→ dashboard rendered → store holdsauth: { email: "admin@…" }→ PASS, evidence attached.
flowchart LR
A["Your agent<br/>(Claude Code, Cursor…)"] -->|"look · act · observe · assert"| B(("Reticle"))
B <-->|"structured events,<br/>not pixels"| C["Your running app<br/>DOM · network · console<br/>store · React fiber"]
B -->|"verdict + evidence<br/>+ file:line"| A
style B fill:#8b7bff,stroke:#5b4bd0,color:#fff
style A fill:#15131f,stroke:#3a3550,color:#fff
style C fill:#1c2433,stroke:#2f3d57,color:#fff
One call checks many things at once. Say "save that as a flow" and it replays on every later edit with no model in the loop, so today's fix can't quietly break last week's feature.
// The agent clicked "Pay". Did the right things actually happen?
reticle_assert({
predicate: { allOf: [
{ kind: "net", method: "POST", urlContains: "/api/order", status: 200 },
{ kind: "element", query: { role: "dialog", name: "Order confirmed" }, state: "visible" },
{ kind: "signal", name: "order:saved" }, // the charge actually committed
{ kind: "console", level: "error", absent: true } // …and nothing errored
]}
})
// → { pass: false,
// failureReason: "POST /api/order returned 500, expected 200",
// source: { file: "src/checkout/PayButton.tsx", line: 42 } }
88 real regressions injected into a controlled app, Reticle against a Playwright script. Every number comes from a committed harness. Reproduce it with pnpm bench.
Re-verification has no model in the loop, so a recorded suite is a fixed, tiny read. Reticle is ahead from the second run even when charged a full LLM drive to author the suite.
Faster for a structural reason rather than a browser-speed one: a time-gated transition is verified from the event stream instead of waited out, and a batch of flows runs as a batch.
A verification tool that oversells its reach is worse than none.
| Strong | silent failed requests, state that disagrees with the screen, stale caches, double-submits, a write that failed while the UI moved on |
| Partial | races around a single action. It detects request-never-settled and duplicate-request; it is not a scheduler-level race analyser |
| Not the tool | cross-browser rendering, visual regressions, sites you don't own. That's Playwright |
| Can't see yet | IndexedDB, Web Workers, closed shadow roots, cross-origin iframes |
When Reticle can't see something, it says so. A verdict is yes, no, or unknown, where unknown means the evidence couldn't decide. Never a quiet pass.
Cost: zero bytes in production. The SDK sits behind import.meta.env.DEV and is dead-code eliminated; a runtime guard refuses to connect under NODE_ENV=production. No app data leaves your machine.
| Web | Next.js (App + Pages), Vite + React, CRA, SvelteKit, Svelte, Astro, Vue 3, Preact, plain HTML |
| Desktop | Electron, Tauri, including the IPC boundary a browser-only tool can't see |
| Agents | anything that speaks MCP. Config written automatically for Claude Code, Cursor, Windsurf, VS Code, Zed, Gemini CLI, Copilot CLI, OpenCode, Warp, Kiro, Amazon Q, Cline, Amp, Continue, Factory Droid. Codex CLI is a printed four-line paste |
| Browsers | Chrome, Edge, Arc, Brave, Opera, Firefox, Safari, plus Electron and Tauri webviews |
| State | zustand and Redux need no adapter. Shipped: TanStack Query, Jotai, XState, Valtio, MobX, Recoil, Svelte stores, Pinia |
| OS | macOS, Linux, Windows |
Routing verification flows with TypeSafe AI's Jev. A verification run makes a lot of small decisions — is this page settled, is this finding worth chasing, does this failure warrant a full capture — and today an LLM answers each one at LLM latency and LLM cost. Jev is a System One model: it returns a typed, probabilistic choice from a fixed set instead of prose, in 70–500ms. That is the exact shape of a routing decision inside Reticle's infra, so when we build that layer, Jev is what decides which flow a run takes. Nothing ships against it yet.
docs.reticle.sh — a page per tool, a page per command, every example captured from a real run.
Quickstart · Frameworks · Troubleshooting · Architecture · Contributing
Join the Discord → Where the work happens in the open: what's being built, what's up for grabs, and design calls before they land.
If Reticle proves useful, a ⭐ helps other developers find it.
SDK and adapters are Apache-2.0. The server is FSL (source-available, converts to Apache-2.0 after two years). See LICENSE.
dev-only · localhost-only · your app data stays local
name: false-green-tests
description: 'Find out why the tests pass but the app is broken. Catches false greens: a green suite over a feature that does not work, a mocked API standing in for a real one, an assertion that holds no matter what the app does, a click handler wired to nothing. Use when the suite is green and the user says it is broken, when a test never fails, when coverage looks fine but bugs still ship, or before trusting a passing run you did not watch.'
license: Apache-2.0
metadata:
version: 3.1.0
homepage: https://www.reticle.sh
repository: https://github.com/reticlehq/reticleA green test is evidence about the test, not about the app. This skill separates the two by running the real app and comparing what it does against what the test claims.
It uses Reticle, which observes the running app from the inside: DOM, network, console, routing, and framework state. Not installed? RETICLE_INSTALL_SOURCE=npx_skill npx @reticlehq/server@latest init, then see the install-and-verify skill.
1. The assertion cannot fail. Read the test the user trusts. If it only asserts absence (no console error, no thrown exception, no rejected promise) it passes on a control wired to nothing. A dead button throws nothing, fires nothing, and changes nothing. Prove it in the app instead:
reticle_act_and_wait({ sessionId, ref, action: "click", until: { kind: "allOf", predicates: [
{ kind: "net", method: "POST", urlContains: "/api/...", status: 200 },
{ kind: "signal", name: "..." },
]}})
A verdict of no here, against a green suite, is the false green.
2. The test drove a mock and the app drives an API. Compare what the app actually requested with what the test stubbed:
reticle_network({ sessionId, since })
No request where the test asserted one means the suite verified a fixture. A stale client cache is the same failure with no request at all to look at, which is why registering TanStack Query matters: the cache is the only witness.
3. The UI moved and the state did not. The strongest false green, and invisible to any DOM or screenshot check:
reticle_state({ sessionId, store, path })
A view rendering one value while the store holds another is a bug the render tree cannot show you. If this returns empty or hasCapabilities is false, no store was registered: say so, because every state check above is vacuous until it is.
4. Nobody read the response. A 2xx that the app never consumed shows as verified: "unknown" with verifiedReason: "outcome_unread". That is usually a real app bug, and a test asserting on the request alone would call it a pass.
5. Whole surfaces nobody exercised.
reticle_run({ tool: "reticle_verify", sessionId, args: { action: "crawl" } }) // click sweep, returns anomalies
reticle_run({ tool: "reticle_verify", sessionId, args: { action: "coverage" } }) // { total, exercised, untouched }
crawl exists because the obvious hand-rolled sweep (click each control, assert no console error) is itself shape 1.
A false green is confirmed when the app contradicts the test, not when you feel uneasy. Reticle names that case directly: verified: "no" with verifiedReason: "contradicted" means a channel observed something incompatible with what the UI claimed: a request that failed while the screen advanced, a signal disagreeing with the DOM, a field echoing a value nobody asked for.
unknown is not a false green and not a pass. It means Reticle could not tell. Report it as unknown.
For every false green you confirm, the test that missed it is still there and will miss it again. Rewrite its assertion to name a consequence the app must produce (a request with a status, a signal, a state path) rather than an absence. Never weaken a check to make a verdict green; that is how the false green got in.
Index of everything, one page at a time: curl https://docs.reticle.sh/llms.txt. Found a case Reticle could not see? reticle_feedback with kind: "gap": that is the signal that decides what gets built.
评论 (0)
暂无评论,成为第一个评论者吧!