Claude Skill MartKhám phá skillCâu dùng ngayHọc qua videoDùng terminalSkill là gì?
 
← Về danh sách

Reticle — Kiểm chứng web app từ bên trong

Nhúng SDK dev-only vào web app đang chạy để agent đọc trực tiếp DOM, network, console và state, tự chạy một luồng người dùng thật rồi trả về phán quyết kèm file:line cần sửa.

Lập trìnhTrung cấp★ 334⑂ 74Điểm AI 9/10Cập nhật lần cuối: 22 thg 8, 2026

Làm được gì

  • Tự chạy npx @reticlehq/server init để nối SDK vào dự án (kể cả monorepo), phần nào tool không tự làm được thì agent tự sửa code.
  • Tự khởi động dev server ở background, tự mở tab trình duyệt và xác nhận session bằng reticle_sessions, không hỏi lại người dùng.
  • Chạy một luồng thật (đăng nhập, tìm kiếm, thêm vào giỏ, submit form) theo trình tự reticle_snapshot → reticle_act_sequence → reticle_act_and_wait với số lượt gọi tối thiểu.
  • Phán quyết dựa trên bằng chứng thật: mã/nội dung response HTTP, phần tử DOM, không có lỗi console — thay vì đoán từ ảnh chụp màn hình.
  • Ghi lại và lưu luồng để lần sau chỉ cần một lệnh reticle_verify {action:"change"} là kiểm tra hồi quy.
  • Quy định rõ unknown và no-fault không phải là pass, và cấm nới lỏng điều kiện để cho qua.

Phù hợp với ai

  • Dev frontend (React, Vue, Next, Svelte...) thường gặp cảnh "test xanh nhưng UI vẫn hỏng".
  • Người dùng Claude Code muốn có bằng chứng thật sau mỗi thay đổi giao diện.
  • Nhóm nhỏ muốn kiểm tra nhanh các luồng quan trọng mà không dựng cả bộ E2E nặng.

Ví dụ sử dụng

  1. "Cài Reticle giúp mình" → agent tự nhận diện framework, package manager, cổng, nối SDK, chạy dev server và lái thử luồng đăng nhập rồi báo kết quả.
  2. Sau khi sửa src/CheckoutPage.tsx, hỏi "có gì hỏng không?" → agent replay luồng đã lưu; nếu chưa có luồng phủ file đó, nó trả lời unknown một cách trung thực và đề nghị ghi luồng mới.
  3. Kiểm tra nút hoàn tiền: yêu cầu đồng thời POST /api/refund trả 200, body chứa đúng số tiền và không có lỗi console — bắt được trường hợp UI hiển thị thành công giả.

· · · 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)
  1. Tải tệp ZIP bằng nút bên dưới.
  2. Trong Claude, mở Settings → Capabilities và bật 'Code execution and file creation'. (chỉ một lần)
  3. Vào Customize → Skills → + → 'Upload a skill' rồi tải tệp ZIP lên.
↓ Tải ZIP
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.

  1. Mở terminal. Cần có Node.js (kèm npx) và git.
  2. Clone repo: git clone https://github.com/reticlehq/reticle.git /tmp/reticle
  3. Tạo thư mục skill: mkdir -p ~/.claude/skills/reticle
  4. Copy file: cp /tmp/reticle/plugin/SKILL.md ~/.claude/skills/reticle/SKILL.md
  5. Khởi động lại Claude Code.
  6. Mở Claude Code trong thư mục web app của bạn và yêu cầu: "Cài Reticle và kiểm chứng luồng đăng nhập".
  7. Agent sẽ chạy npx @reticlehq/server@latest init và sửa file cấu hình. Hãy commit code trước, và đọc kỹ nội dung khi host hỏi phê duyệt lệnh.
  8. Khi tab trình duyệt mở ra, để tab hiển thị để xem agent tự lái app. Sau đó dùng /reticle bất cứ lúc nào để kiểm chứng lại.
Xem mã nguồn trên GitHub ↗Giấy phép: NOASSERTION