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 hỏng (Reticle)

Khi ứng dụng web không hoạt động dù console trống và code trông đúng, skill này thu thập bằng chứng từ trang đang chạy và chỉ ra file:line cần mở.

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

Làm được gì

  • Đọc đồng thời cú click, request mạng, store trạng thái, storage và console như một cửa sổ nhân quả duy nhất bên trong ứng dụng đang chạy.
  • Bắt đầu bằng việc tái hiện lỗi với reticle_act_and_wait để lấy phán quyết (no/contradicted/unknown), rồi chỉ đào sâu vào kênh mà phần summary đã chỉ ra — tránh gọi thừa tốn lượt.
  • Cung cấp bảng chẩn đoán: không có request → handler chưa bind hoặc cache cũ; 2xx nhưng UI không đổi → lỗi ở nhánh success; click không phản hồi → phần tử bị che, 0×0 hoặc disabled; "không tìm thấy" → danh sách ảo chưa mount.
  • Kết thúc bằng reticle_inspect trả về component và source: {file, line}, tức là một vị trí cụ thể để mở, không phải giả thuyết.
  • Yêu cầu chạy lại kịch bản tái hiện dưới dạng phán quyết trước khi tuyên bố đã sửa, và không được nới lỏng phép kiểm tra để nó pass.

Phù hợp với ai

  • Lập trình viên frontend làm SPA (React, Vue…) thường gặp lỗi khó tái hiện.
  • Nhóm hay đụng lỗi lệch giữa UI và state, token không được lưu, danh sách ảo hóa.
  • Người cần nhanh chóng xác định file gây lỗi từ một báo cáo QA mơ hồ.

Ví dụ sử dụng

  1. "Bấm nút Lưu không có gì xảy ra" → tái hiện click, thấy 0 request, inspect phát hiện nút bị lớp overlay trong suốt che, trả về file:line.
  2. "Danh sách không cập nhật" → request 200, DOM ổn nhưng stateDiffs rỗng ⇒ ứng dụng không đọc response, lỗi ở nhánh success.
  3. "Nhìn như đã đăng nhập nhưng refresh là mất" → reticle_storage chứng minh token chưa được ghi, chỉ ra chỗ lưu token.

· · · 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 && mkdir -p ~/.claude/skills && cp -r 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. Clone repo: git clone https://github.com/reticlehq/reticle.git
  2. Sao chép skill vào thư mục skill của Claude Code: mkdir -p ~/.claude/skills && cp -r reticle/skills/debug-broken-ui ~/.claude/skills/
  3. Vào thư mục gốc dự án web cần gỡ lỗi và cài Reticle: RETICLE_INSTALL_SOURCE=npx_skill npx @reticlehq/server@latest init
  4. Làm theo skill install-and-verify trong repo để xác nhận kết nối MCP và việc chèn instrument vào trang (bao gồm đăng ký store).
  5. Khởi động lại Claude Code, chạy dev server, rồi yêu cầu kiểu "nút này bấm không ăn, tìm file gây lỗi" để skill tự kích hoạt.
  6. Nếu cần chẩn đoán state, hãy đăng ký store để summary.stateUnwatched không còn là true.
Xem mã nguồn trên GitHub ↗Giấy phép: NOASSERTION