Reticle — Kiểm chứng web app từ bên trong
Thay vì đoán qua ảnh chụp màn hình, skill này cắm SDK vào app đang chạy để kiểm tra DOM, network, console, state và đưa ra phán quyết kèm `file:line` cần sửa.
Lập trìnhTrung cấp★ 1,153⑂ 169Điểm AI 9/10Cập nhật lần cuối: 3 thg 10, 2026
Làm được gì
- Nhúng SDK chế độ dev vào app đang chạy và mở ra các công cụ MCP
reticle_*để Claude quan sát, tác động và khẳng định trực tiếp trên app thật. - Một lệnh
npx @reticlehq/server inittự nhận diện framework, package manager, cấu hình build, cài SDK, đăng ký MCP server và mở trình duyệt. - Chạy trọn một luồng người dùng thật rồi tạo verdict qua
reticle_act_and_wait,reticle_asserthoặcreticle_act { steps }có khai báoexpect. - Không cho phép coi
unknownhayno-faultlà "pass", và nghiêm cấm làm nhẹ điều kiện kiểm tra để vượt qua. - Ghi lại luồng để phát lại (
reticle_flow_replay) mà không cần model, giúp kiểm tra hồi quy rất rẻ.
Phù hợp với ai
- Lập trình viên web (React, Next.js, Vue...) để Claude Code tự sửa UI.
- Nhóm thường gặp cảnh "test xanh nhưng giao diện hỏng".
- Tech lead muốn có bằng chứng thay vì lời tuyên bố "đã xong".
Ví dụ sử dụng
- Thiết lập lần đầu: yêu cầu "cài Reticle" → chạy
init, sau đó khám phá và ghi lại một luồng với persona cụ thể. - Kiểm tra tác động thay đổi: sau khi sửa
src/App.tsx, gọireticle_verify({action:"change", files:[...]})để nhận phán quyết trong một lượt. - Chứng minh tính năng mới: khẳng định đồng thời POST
/api/refundtrả 200 với số tiền đúng, phần tử hoá đơn xuất hiện và không có lỗi console — loại bỏ kiểu "UI chỉ hiển thị lại dữ liệu vừa gửi".
· · · 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/plugin/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 Claude Skill Mart. Copy thư mục plugin từ repo GitHub reticlehq/reticle vào ~/.claude/skills/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 /tmp/reticle/plugin/SKILL.md ~/.claude/skills/reticle/SKILL.md⚠ Đây là skill do người khác tạo. Hãy kiểm tra repo gốc trước khi cài.
- Clone repo:
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:
cp /tmp/reticle/plugin/SKILL.md ~/.claude/skills/reticle/SKILL.md - Mở Claude Code ngay trong thư mục dự án web cần kiểm chứng.
- Nhập "cài và thiết lập Reticle" hoặc
/reticle. - Khi Claude xin phép chạy
npx @reticlehq/server@latest init, hãy đọc kỹ rồi phê duyệt (lệnh này đăng ký MCP server và ghi quy tắc pre-approval). - Đảm bảo
package.jsoncó script dev; cung cấp biến môi trường cần thiết bằng--env KEY=VALUE. - Nếu có license key, đưa cho Claude nhưng phải kiểm tra
.envđã nằm trong.gitignore.
Xem mã nguồn trên GitHub ↗Giấy phép: NOASSERTION