Reticle Skill 技能

技能简介

Reticle 是一个面向编码智能体的「自我验证」技能包：它把一枚仅用于开发环境的 SDK 注入你正在运行的应用，让你的 AI 智能体从应用内部去看、去操作、去观测、去断言，然后给出一个带证据的结论——通过、失败，或者「无法判断」。它的口号非常直接：智能体说「做完了」，Reticle 负责查证这句话是否属实。项目由 reticlehq 团队开源维护，主仓库为 TypeScript 编写，2026 年 6 月创建，截至发稿已获得 1200 余颗星，采用 Apache-2.0（SDK、适配器、核心与引擎）与 FSL-1.1-ALv2（服务端与命令行）双许可，并提供 npm 包 @reticlehq/server（当前版本 3.7.0）。

核心能力

1. 带证据的判定而非截图：每次校验返回 verified 字段（yes / no / unknown），并附上决定该判定的网络请求、状态变化、控制台输出，以及可直接打开的「文件:行号」定位。
2. 看见屏幕看不见的东西：点击触发的真实请求与响应、状态库中的真实值（支持 zustand、Redux、TanStack Query、Pinia 等）、控制台报错、请求次数、React 渲染次数。
3. 敢于说「判断不了」：只有 yes 才算通过；无法判定时返回 unknown 并说明原因，绝不给出虚假的绿色通过。
4. 流程可无模型回放：说一句「把这个存成流程」，之后一次调用即可确定性地复验整条用户旅程，今天的修复不会悄悄弄坏上周的功能。
5. CI 中的硬门禁：reticle gate 会找出改动所影响的已保存流程，若没有一次通过的运行记录就以非零码退出。
6. 页面内 HUD：在应用里直接观察智能体的每一步操作、每个判定、保存的流程，以及你为它钉下的备注。
7. 广泛兼容：支持 Claude Code、Cursor、Codex、Windsurf、VS Code、Gemini CLI 等一切讲 MCP 的智能体；Web 端覆盖 React、Next.js、Vue、Svelte、Angular，桌面端覆盖 Electron 与 Tauri。
8. 可安全常驻：生产构建不包含 SDK，桥接服务只监听 127.0.0.1，除非主动关联项目，应用数据不出本机。

安装配置

1. 环境要求：Node 20.11 及以上、一个可在本地以开发服务器运行的应用、一个支持 MCP 的编码智能体。
2. 一条命令完成安装：执行 npx @reticlehq/server init，安装器会把 Reticle 装到本机并注册到它找到的每一个编码智能体中。
3. 想先看计划再动手可用 --dry-run（不写任何文件）；不想改智能体配置用 --no-mcp；只写文件不注册用 --files-only。
4. 它会向项目追加写入 CLAUDE.md、AGENTS.md、RETICLE.md 与 .claude/commands/reticle.md（不覆盖原有内容），hook 可随时卸载。

使用步骤

1. 在项目里运行初始化命令，按提示重启开发服务器，让 SDK 在页面中生效。
2. 用自然语言向智能体下指令，例如「我改了结算流程，告诉用户完成之前先用 Reticle 验一遍」。
3. 智能体通过 Reticle 点击、输入、读取请求与状态，最后拿到一个带证据与文件行号的判定。
4. 说「把这个存成流程」，把关键旅程固化为可确定性回放的检查项。
5. 在 CI 中执行 npx @reticlehq/server gate --since HEAD~1，让改动涉及已保存流程却没有通过记录的提交无法合入。

适用场景

• 安全校验：验证各角色的访问控制是否生效（受保护接口是否返回 403）、被禁调用是否零次触发、密钥是否从未渲染进页面、CSP 违规是否在控制台暴露。
• 可访问性与体验：控件能否按角色与可访问名称被找到、焦点是否进入弹窗、回车与 Esc 能否触发动作。
• 性能与监控：一次操作只发一个请求而非五个，读取最大内容绘制、布局偏移与长任务，观测 React 渲染次数。
• SEO 检查：页面标题、各级标题、每个链接的 href，重定向是否落在正确路由，爬行是否发现死控件与失败请求。
• 角色扮演与探索：用 --persona 指定「一个刚注册的新用户」，每个角色独立浏览器上下文，多智能体可并行驱动同一应用。

适用人群

适合把编码智能体当作主要生产力、又苦于「它总说做完了其实没做完」的开发者；适合需要给 AI 生成代码加上可验证交付标准的技术负责人；也适合把回归、可访问性与 SEO 检查前置到智能体工作流的前端与测试团队。

工作原理

Reticle 与 Playwright、DevTools、浏览器智能体的根本区别在于视角：后三者从浏览器外部向内看，这对外部站点是正确的；而你自己构建的应用，最要命的 bug 往往根本不会出现在像素上——支付按钮悄悄返回 500、徽章显示 12 而状态库是 0、表单把请求发了两次、部署提示成功其实失败。这些都能在界面上看起来完全正常。Reticle 通过在应用内注入开发期 SDK，把真实运行的内部信号（请求与响应、状态库、控制台、渲染提交流）暴露给智能体，使「验证」变成一次真实的取证过程，而不是对着自己写的代码做推理。判定与证据在本机生成，无需账号；关联项目后才可按需同步运行记录、流程与记忆，且密码、令牌、卡号在采集时即被替换为 [REDACTED]。它刻意不提供在页面里执行任意 JavaScript 的 evaluate 工具，也不绕过智能体的权限确认，因而可长期驻留开发环境。

官方链接

• 代码仓库：https://github.com/reticlehq/reticle
• 在线控制台：https://app.reticle.sh
• 文档站：https://docs.reticle.sh
• npm 包：https://www.npmjs.com/package/@reticlehq/server
• 社区：https://discord.gg/BwAbzv9ZRz