Reticle – Lớp kiểm chứng ứng dụng web
Kết nối SDK Reticle vào ứng dụng web đang chạy để đọc DOM, network, routing, console, chạy thật một luồng người dùng và trả về phán quyết yes/no/unknown kèm file:line cần sửa.
Lập trìnhTrung cấp★ 1,303⑂ 242Điểm AI 9/10Cập nhật lần cuối: 3 thg 11, 2026
Nó làm được gì
- Cài và nối Reticle (
init) vào ứng dụng web đang chạy, cung cấp các công cụ MCPreticle_*để đọc bên trong ứng dụng: DOM, request mạng, routing, console và state của framework. - Thay vì đoán qua ảnh chụp màn hình, nó điều khiển chính tab trình duyệt đang mở và chạy trọn một luồng (đăng nhập, gửi form, thanh toán).
- Trả về
verified: yes / no / unknownkèm bằng chứng vàfile:linecần mở; cấm tuyệt đối việc nới lỏng điều kiện để test "xanh". - Lưu luồng đã chạy thành flow để lần sau kiểm tra hồi quy rẻ hơn bằng
reticle_verify { action: "change" }.
Phù hợp với ai
- Lập trình viên frontend hay gặp cảnh "test pass nhưng UI vỡ".
- Người giao việc sửa UI cho agent AI và muốn bằng chứng thật sự thay vì lời khẳng định.
- Nhóm bảo trì ứng dụng web chạy bằng dev server (React, Vue, Next.js...).
Ví dụ sử dụng
- "Kiểm tra nút thanh toán" →
reticle_act_and_waitclick và chứng minh cùng lúc:POST /api/ordertrả 200, dialog "Order confirmed" hiện ra, không có lỗi console. - "Sửa src/App.tsx có làm hỏng gì không?" →
reticle_verify { action: "change", files: [...] }chỉ phát lại những flow liên quan. - Dự án chưa cài gì: chạy
npx @reticlehq/server@latestđể kiểm tra tải trang, lỗi console, request thất bại và các liên kết cùng origin, nhận phán quyết ngay.
· · · Hướng dẫn cài đặt · · ·
Dùng thử ngay, không cần cài
Dán đoạn dưới vào Claude là dùng được skill này mà không cần cài đặt.
Hãy đọc hướng dẫn trong tệp này và làm theo để giúp mình: https://raw.githubusercontent.com/reticlehq/reticle/HEAD/plugins/reticle/SKILL.md Mình muốn: (viết việc bạn cần ở đây)
Nếu Claude không mở được liên kết, hãy mở liên kết và copy nội dung vào rồi dán.
↓ Thấy hữu ích thì tải ZIP bên dưới và cài. Sau đó skill tự chạy, không phải dán lại mỗi lần.
Cài vào ứng dụng Claude (không cần terminal)
- Tải tệp ZIP bằng nút bên dưới.
- Trong Claude, mở Settings → Capabilities và bật 'Code execution and file creation'. (chỉ một lần)
- Vào Customize → Skills → + → 'Upload a skill' rồi tải tệp ZIP lên.
Cài vào Claude Code
Để Claude làm — dán câu dưới đây vào Claude Code
Hãy cài skill mình tìm thấy trên AI Skill Mart. Copy thư mục plugins/reticle từ repo GitHub reticlehq/reticle vào ~/.claude/skills/reticlehq-reticle/ của mình. Sau khi cài xong, cho mình biết skill này làm được gì trong một câu.
Cài bằng lệnh thủ công
git clone https://github.com/reticlehq/reticle.git /tmp/reticle && mkdir -p ~/.claude/skills/reticle && cp -r /tmp/reticle/plugins/reticle/* ~/.claude/skills/reticle/⚠ Đây là skill do người khác tạo. Hãy kiểm tra repo gốc trước khi cài.
- Mở terminal và tải kho skill:
git clone https://github.com/reticlehq/reticle.git /tmp/reticle - Tạo thư mục skill:
mkdir -p ~/.claude/skills/reticle - Sao chép file skill:
cp -r /tmp/reticle/plugins/reticle/* ~/.claude/skills/reticle/ - Vào thư mục ứng dụng web của bạn và chạy kiểm tra không cần cài đặt:
npx @reticlehq/server@latest - Nếu hài lòng, chạy lệnh nối dự án (lệnh này sửa file, chỉ chạy khi bạn đồng ý):
npx @reticlehq/server@latest init - Khởi động lại dev server đang chạy trước đó, rồi khởi động lại Claude Code để nạp các công cụ MCP
reticle_*. - Yêu cầu Claude: "/reticle" hoặc "chứng minh luồng đăng nhập hoạt động" để kích hoạt skill.
Xem mã nguồn trên GitHub ↗Giấy phép: NOASSERTION