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

Gỡ lỗi UI bị hỏng (Reticle)

Khi console trống và code trông đúng nhưng app vẫn không chạy, skill này thu thập bằng chứng từ trang đang chạy và chỉ ra đúng file:line cần mở.

Lập trìnhTrung cấp★ 1,208⑂ 195Điểm AI 9/10Cập nhật lần cuối: 11 thg 10, 2026

Skill này làm gì

  • Chẩn đoán các lỗi kiểu "code đúng mà vẫn hỏng": nút bấm không phản ứng, form không submit, dữ liệu không tải, trang trắng, modal không đóng — ngay bên trong trang web đang chạy.
  • Dùng công cụ Reticle MCP để đọc toàn bộ cửa sổ nhân-quả của một lần click: request mạng, lỗi console, diff store (before→after), thay đổi storage, route, layout shift, long tasks.
  • Cung cấp bảng chẩn đoán triệu chứng → nguyên nhân → bước tiếp theo: không có request nào nghĩa là handler chưa bind; 2xx nhưng không đổi gì nghĩa là app không đọc response; click không ăn nghĩa là element bị che/0×0/disabled.
  • Kết thúc bằng source: { file, line } thay vì giả thuyết, và bắt buộc xác minh bản sửa bằng cách chạy lại kịch bản tái hiện thay vì "nhìn mắt thường".

Dành cho ai

  • Lập trình viên frontend làm SPA (React, Vue...) thường mất hàng giờ cho lỗi chỉ xảy ra khi chạy thật.
  • Nhóm cần biến báo cáo QA "nó hỏng rồi" thành bằng chứng tái hiện được.
  • Người muốn Claude Code tự điều khiển trình duyệt để debug qua MCP.

Ví dụ sử dụng

  1. Nút Lưu không làm gì: tái hiện click bằng reticle_act_and_wait, thấy net.total = 0, rồi reticle_look { element } để lấy file:line và phát hiện handler chưa được gắn.
  2. Danh sách không cập nhật: request trả 200 nhưng stateDiffs rỗng và verdict là outcome_unread → lỗi nằm ở nhánh xử lý thành công.
  3. Trông như đã đăng nhập nhưng hành xử như chưa: dùng reticle_storage để thấy token chưa được lưu.

· · · 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/skills/debug-broken-ui/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 skills/debug-broken-ui từ repo GitHub reticlehq/reticle vào ~/.claude/skills/debug-broken-ui/ 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 && cp -r /tmp/reticle/skills/debug-broken-ui ~/.claude/skills/

⚠ Đâ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 và clone repo: git clone https://github.com/reticlehq/reticle.git /tmp/reticle
  2. Copy skill vào thư mục skill của Claude Code: mkdir -p ~/.claude/skills && cp -r /tmp/reticle/skills/debug-broken-ui ~/.claude/skills/
  3. Skill cần server Reticle MCP. Tại thư mục gốc dự án, chạy: RETICLE_INSTALL_SOURCE=npx_skill npx @reticlehq/server@latest init
  4. Copy thêm skill install-and-verify trong cùng repo để kiểm tra cài đặt đã đúng.
  5. Chạy dev server của ứng dụng web cần debug, rồi khởi động lại Claude Code.
  6. Yêu cầu kiểu "nút này bấm không ăn, debug giúp tôi" sẽ kích hoạt skill.
  7. Nếu gặp sự cố, xem curl https://docs.reticle.sh/troubleshooting.md.
Xem mã nguồn trên GitHub ↗Giấy phép: NOASSERTION