# Ba repo cho coding agent: tạo, kiểm chứng và đo lường

[Thetips4you](https://homus.dev/speakers/thetips4you) · [Thetips4you](https://homus.dev/orgs/thetips4you)

> Ba repo GitHub cho Claude Code và Codex: img2threejs dựng model Three.js từ ảnh, Reticle kiểm app thật bằng verdict, Caliper đo skill bằng ablation.

Topics: Coding Agents, Skills, Evals, Dev Tools

Canonical: https://homus.dev/talks/insane-github-repos-that-10x-your-codex-and-claude-code-setup

## 1. Agent dựng trang trong vài giây, nhưng repo nào đổi được kết quả?

Video mở đầu bằng một nhận xét của người dẫn kênh Thetips4you (video đăng ngày 29/10/2026): một agent có thể lắp ráp một trang web bóng bẩy (a polished page) chỉ trong vài giây. Rồi có rất nhiều repo trên GitHub hứa sẽ làm cho setup đó mạnh hơn. Câu hỏi anh đặt ra là repo nào là tốt nhất, và repo nào thay đổi được kết quả thật sự.

![Slide mở đầu: một landing page tên AXIOM trên localhost:3000 với nút Start building và khung live product preview có một khối lục giác 3D](https://homus.dev/photos/iSImMJD8qXY-0003.jpg)

Slide mở đầu trong video đăng ngày 29/10/2026: một landing page tên AXIOM chạy trên `localhost:3000`, có nút "Start building" và một khung "live product preview" với một khối lục giác 3D.

Anh giới thiệu ba repo sẽ xem trong video (đăng ngày 29/10/2026). Repo thứ nhất biến một ảnh thành một cảnh sản phẩm chỉnh sửa được (an editable product scene). Repo thứ hai bắt được những ca như một trang checkout trông đã xong xuôi trong khi phần thanh toán lại lỗi. Repo thứ ba đo xem một skill thêm vào có cải thiện kết quả hay không.

Ba repo đó là **img2threejs**, **Reticle** và **Caliper**. Anh nói sẽ cho xem workflow của cả ba, vì sao chúng quan trọng, và chúng có thể giúp năng suất chung của bạn khi làm việc với AI ra sao (video đăng ngày 29/10/2026).

## 2. Ba repo, ba việc: create, verify, measure

Theo anh (video đăng ngày 29/10/2026), một setup coding mạnh hơn phải có ba phần. Thứ nhất là tạo ra artifact (create). Thứ hai là kiểm tra xem artifact đó thực sự làm gì (inspect). Thứ ba là đo xem công cụ đó có thay đổi kết quả hay không (measure).

![Slide THREE REPOS. THREE JOBS. với ba thẻ CREATE, VERIFY, MEASURE](https://homus.dev/photos/iSImMJD8qXY-0103.jpg)

Slide "THREE REPOS. THREE JOBS." trong video đăng ngày 29/10/2026: 01 CREATE "Make the artifact editable", 02 VERIFY "Inspect what actually happened", 03 MEASURE "Compare the result".

Anh nói ba repo này bổ trợ cho nhau, có thể nối với nhau thành một chuỗi (video đăng ngày 29/10/2026). Và theo anh, giữ cho lộ trình đó nhìn thấy được sẽ ngăn bạn cài công cụ chỉ vì chúng đang trending.

## 3. Khi nào dùng repo nào

Anh chia việc dùng ba repo theo tình huống (video đăng ngày 29/10/2026):

- **img2threejs**: khi bạn cần chỉnh sửa, ví dụ một trang web có nội dung 3D (video đăng ngày 29/10/2026).

- **Reticle**: khi một screenshot không chứng minh được một user flow, cái luồng end-to-end mà AI không kiểm tra hết (video đăng ngày 29/10/2026).

- **Caliper**: khi bạn cần biết một skill có giúp ích trên một task lặp lại được của agent hay không (video đăng ngày 29/10/2026).

Cách anh đi qua từng repo trong video đăng ngày 29/10/2026: mỗi repo một task thật và một phép kiểm cụ thể.

Ba repo và tình huống dùng mỗi repo, theo lời người dẫn kênh Thetips4you trong video đăng ngày 29/10/2026.

## 4. img2threejs: từ một ảnh phẳng tới code Three.js chỉnh được

Repo đầu tiên là img2threejs. Anh đưa ra một tình huống (video đăng ngày 29/10/2026): bạn có một ảnh tham chiếu của một chiếc tai nghe, một chiếc xe, hay một sản phẩm nhỏ. Đó là một ảnh phẳng, trông thuyết phục, nhưng bạn không xem được nó ở ba chiều, cũng không đổi màu được, nên không làm cho nó phản hồi lại người xem trên trang của bạn được.

Cách làm anh mô tả (video đăng ngày 29/10/2026): dùng img2threejs, nhờ Claude dựng lại vật thể đó bằng code Three.js procedural. Theo anh, kết quả là một model chỉnh sửa được, tạo từ geometry và material, chứ không phải một ảnh đặc (opaque image). Nó trở thành một phần của interface, sẵn sàng cho tương tác, và anh nói bạn không cần thêm animation nào nữa.

Anh mở repo trên GitHub và nói repo có khoảng 19,7 nghìn sao, là repo số một của ngày, và của tuần (theo lời anh trong video đăng ngày 29/10/2026). Trên màn hình, bảng huy hiệu TrendShift ghi cụ thể hơn: ở mục Python là "#1 Repository Of The Day" và "#4 Repository Of The Week"; ở mục All languages là "#4 Repository Of The Day" và "#10 Repository Of The Week".

![README của repo img2threejs trên GitHub với logo khối lập phương, dòng mô tả và bảng huy hiệu Repository Of The Day, Of The Week](https://homus.dev/photos/iSImMJD8qXY-0033.jpg)

README của img2threejs trong video đăng ngày 29/10/2026: "Rebuild the object in a reference image as a code-only, procedural Three.js model", kèm dòng "Quality-gated, animation-ready, and deliberately token-efficient" và bảng huy hiệu theo ngày, theo tuần.

## 5. Live demo người máy và cách cài base skill

Theo anh (video đăng ngày 29/10/2026), repo này rất đơn giản và có nhiều live demo khác nhau; bạn xem các demo đó để thấy nó tạo ra nhân vật ba chiều hay bất cứ thứ gì bạn yêu cầu ra sao. Anh mở một demo hình người máy (man robot) và nói bạn có thể xoay nó; anh nói đó là một hình ba chiều trọn vẹn, có thể đặt vào website của bạn hay dùng cho những việc khác.

![Demo Man Robot Segment Color Studio trên img2threejs.io: người máy đứng giữa một con phố, panel bên phải liệt kê các segment](https://homus.dev/photos/iSImMJD8qXY-0329.jpg)

Demo "Man Robot · Segment Color Studio" trên img2threejs.io (demo trong video đăng ngày 29/10/2026): người máy đứng giữa một con phố; panel bên phải ghi 1 skinned mesh, 65 joints, 23 clips, các segment Head & neck, Torso, Left/Right arm, Left/Right leg, cùng nút Rotate và Reset view.

Theo anh (video đăng ngày 29/10/2026), phần dễ nhất là cài đặt: chỉ cần cài base skill img2threejs bản latest. Cài xong, nó được tích hợp vào Claude Code, Codex, OpenCode, hay bất kỳ harness coding AI nào bạn dùng. Rồi bạn chỉ cần nói đơn giản, đại ý: dùng ảnh này và chuyển nó thành một diagram ba chiều bằng img2threejs.

Phần Quick start của README trong video đăng ngày 29/10/2026 ghi cần Node.js ≥ 18, Git và Python ≥ 3.10, cùng một trong Claude Code, Codex, OpenCode hoặc Hermes. Bước "1. Install the base skill" trên màn hình:

```
npx --yes img2threejs@latest install   # links the skill into every agent it finds
npx --yes img2threejs@latest doctor    # one line per agent: "managed" means installed
```

## 6. Không phải một ảnh vào, một model hoàn hảo ra

Anh nói phiên bản hấp dẫn của câu chuyện này là: một ảnh vào, một model hoàn hảo ra. Nhưng theo anh (video đăng ngày 29/10/2026), chính repo mô tả một quy trình reconstruction có quality gate (quality-gated). Bạn so object được tạo ra với ảnh tham chiếu, xác định chỗ lệch (mismatch), rồi có thể nhờ agent sửa lại lần nữa. Anh nhắc lại là có nhiều ví dụ, như các live demo anh vừa cho xem.

Phần "How it works" của README trong video đăng ngày 29/10/2026 mô tả một pipeline dựng theo từng giai đoạn: ảnh tham chiếu thành một spec, rồi sinh và review bằng vision từng lượt build một (blockout → structural → form → material → surface → lighting → interaction → optimization), tự sửa cho tới khi mọi đặc điểm nhận diện vượt ngưỡng; các script Python lo phần validation và gating.

Quy trình reconstruction có quality gate mà người dẫn kênh Thetips4you mô tả trong video đăng ngày 29/10/2026: so với ảnh tham chiếu, tìm chỗ lệch, nhờ agent sửa rồi lặp lại.

Theo anh (video đăng ngày 29/10/2026), hãy dùng công cụ này khi một web graphic chỉnh sửa được là thứ quan trọng, hoặc khi bạn chấp nhận phải lặp nhiều vòng với hình dạng phức tạp, ánh sáng và chi tiết. Anh nói nó sẽ thật sự giúp ích trong các use case hằng ngày nếu bạn build nhiều website và object ba chiều.

## 7. Reticle: điểm mù mà screenshot không thấy

Tiếp theo là Reticle, theo anh là repo xử lý một điểm mù khác (video đăng ngày 29/10/2026). Giả sử bạn chụp một screenshot, nó cho thấy một trang checkout đẹp của app. Nhưng nó không cho bạn biết request thanh toán có trả về lỗi hay không, trạng thái có thay đổi hay không, hay một flow chạy được hôm qua giờ có hỏng không.

![Slide Reticle: Your AI agent says Feature complete, ba lỗi thường gặp và câu Reticle is a proofreader for AI-written code](https://homus.dev/photos/iSImMJD8qXY-0050.jpg)

Slide về Reticle (slide trong video đăng ngày 29/10/2026): "Your AI agent says "Feature complete." Then you open the app", kèm ba lỗi: một `500` im lặng dưới một trang trông hoàn hảo, một flow từng chạy giờ hỏng, mock data ở chỗ lẽ ra là API thật. Dòng tiếp theo: "Reticle is a proofreader for AI-written code".

Theo anh (video đăng ngày 29/10/2026), một agent có thể chụp screenshot của một trang có payment gateway, nhưng không biết chính xác chuyện gì đang xảy ra ở backend. Reticle giúp ở chỗ nó nối coding agent với app đang chạy local, và cho agent quan sát chuyện gì diễn ra trong lúc nó thao tác.

Anh gọi đây là chuyển dịch then chốt (video đăng ngày 29/10/2026): từ "trang này có vẻ đúng" sang "một hệ quả đã khai báo (a declared consequence) thực sự đã xảy ra". Theo anh, điều đó quan trọng nhất với các workflow có nhiều bước và có state ẩn.

## 8. Verdict rõ ràng: yes, no, unknown

Theo anh (video đăng ngày 29/10/2026), bạn muốn có một output trọn vẹn và gắn với bằng chứng. Trong Reticle, "yes" là hiệu ứng mong đợi đã được thấy; "no" là phép kiểm thất bại; còn "unknown" là bằng chứng hiện có chưa đủ để kết luận. Sự không chắc chắn nên được giữ cho nhìn thấy, thay vì lặng lẽ bị coi như thành công. Anh nói Reticle có định nghĩa rõ ràng cho cách nhìn các phép kiểm và lúc nào thì nói là đã pass.

![Slide MAKE THE VERDICT EXPLICIT với ba ô YES, NO, UNKNOWN và bốn ô Evidence, Source, Rule, Output](https://homus.dev/photos/iSImMJD8qXY-0614.jpg)

Slide "MAKE THE VERDICT EXPLICIT" (slide trong video đăng ngày 29/10/2026): YES "Effect seen", NO "Effect failed, investigate the cause", UNKNOWN "Not enough data, keep uncertainty visible"; hàng dưới là Evidence (request/state), Source (file + line), Rule "Only yes passes, no silent assumption" và Output "Actionable".

![Terminal Claude Code: đoạn báo cáo Verified in the browser with Reticle, four passing verdicts](https://homus.dev/photos/iSImMJD8qXY-0643.jpg)

Một phiên Claude Code báo kết quả (demo trong video đăng ngày 29/10/2026): "Verified in the browser with Reticle, four passing verdicts": tạo issue sinh đúng một POST 201, đổi status gọi PATCH, comment được lưu và hiển thị, filter priority thu danh sách còn 2 kết quả, 0 lỗi console.

## 9. Repo Reticle và cách cài

Anh mở repo Reticle và nói nó chưa nổi lắm: chỉ khoảng 1,3 nghìn sao (theo lời anh trong video đăng ngày 29/10/2026). Ý chính anh nhắc lại: agent của bạn nói "done", còn Reticle tìm xem điều đó có thật không.

Theo anh (video đăng ngày 29/10/2026), bạn dùng Reticle để điều khiển app thật đang chạy, xem chuyện gì đã xảy ra, rồi nhận verdict pass, fail hoặc không kết luận được. Anh nói đây là một vấn đề rõ ràng mà bạn muốn giải, và nó chắc chắn sẽ giúp nếu bạn muốn thử một flow trọn vẹn từng bước một, rồi nhận thông tin rõ ràng là test có pass hay không.

Phần "What Reticle does" của README trong video đăng ngày 29/10/2026 ghi: Reticle đặt một SDK nhỏ, chỉ dùng khi dev, vào trong app; coding agent nhận các tool để look, act, observe và assert qua đó, và mỗi phép kiểm kết thúc bằng một verdict có bằng chứng kèm theo.

Về cài đặt, anh nói rất đơn giản (video đăng ngày 29/10/2026): chạy script cài đặt, rồi bắt đầu dùng với Claude, hoặc với Cursor, để test app của bạn. README trong video ghi bước thêm skill (cho Claude Code, Cursor, Codex, Copilot, Gemini và các agent khác), để dạy agent nối app và chứng minh một flow:

```
npx skills add reticlehq/reticle --skill reticle
```

Cũng trong README đó (video đăng ngày 29/10/2026), với Claude Code thì plugin làm cả hai bước: `/plugin marketplace add reticlehq/reticle`, rồi `/plugin install reticle@reticlehq`, sau đó gõ `/reload-plugins` mà không cần khởi động lại. Nếu không muốn pipe một script vào shell, README ghi cách khác:

```
npm install -g @reticlehq/server
reticle setup mcp
```

![README của Reticle trên GitHub: phần thêm skill, plugin cho Claude Code và lệnh npm install -g @reticlehq/server](https://homus.dev/photos/iSImMJD8qXY-0743.jpg)

Phần cài đặt trong README của Reticle (video đăng ngày 29/10/2026): lệnh thêm skill, hai lệnh plugin cho Claude Code, và cách cài qua npm thay cho script. Dòng "It worked when…" ghi lúc cài thành công thì Next steps bắt đầu bằng "Reticle is on this machine, not in your app yet."

## 10. Caliper: skill có thật sự giúp agent không?

Repo cuối là Caliper. Anh đặt vấn đề (video đăng ngày 29/10/2026): thư mục skills ngày càng lớn, ta cài quá nhiều thứ, nối rất nhiều skill vào AI. Nó có thật sự giúp không? Theo anh, ta nên hỏi: chỉ dẫn này có thật sự cải thiện agent hay không.

Theo anh (video đăng ngày 29/10/2026), một demo thành công là chưa đủ. Kết quả đó có thể vẫn xảy ra kể cả khi không có skill; skill có thể thất bại; hoặc một chỉ dẫn khác đang tranh sự chú ý với nó.

Anh mô tả cách Caliper làm (video đăng ngày 29/10/2026): nó chạy các task agent thật, có và không có một skill, một rule hay một MCP server. Task giữ nguyên, setup thay đổi. Phép so sánh này gọi là ablation. Nó biến cái cảm giác mơ hồ rằng một skill có ích thành một phép test của riêng bạn, lặp lại được. Anh nói đây giống một kịch bản testing để xem skill hay MCP có thật sự giúp trong setup AI của bạn không.

![Trang repo Caliper phóng to: mục About ghi Run your real agent with and without your skills, MCPs, and rules](https://homus.dev/photos/iSImMJD8qXY-0823.jpg)

Mục About của repo Caliper trong video đăng ngày 29/10/2026: "Run your real agent with and without your skills, MCPs, and rules. See which ones actually help, and what they cost in tokens. Supports Claude Code, Codex, Pi, and Hermes."

## 11. Cài Caliper trong agent hoặc terminal

Đây là repo thứ ba, Caliper, để xem skill của agent có thật sự chạy không; anh nói nó sẽ rất hữu ích (video đăng ngày 29/10/2026). Về cách dùng, anh nói có hướng dẫn: chạy `npx` bản latest rồi thêm skill Caliper, hoặc dùng qua terminal bằng pip install (README trên màn hình ghi `pipx install caliper-eval`); cài xong thì dùng với Codex, Claude và các agent khác, và xem được chi tiết đầy đủ của skill.

Phần Quick start trong README trên màn hình (video đăng ngày 29/10/2026) có hai cột. Cột "In your agent":

```
npx skills@latest add edonadei/caliper

# then, in your agent:
/grill-skill ./inbox-triage/SKILL.md
```

README ghi `grill-skill` sẽ phỏng vấn bạn, viết spec, rồi chạy spec đó có và không có skill của bạn (video đăng ngày 29/10/2026). Cột "In your terminal":

```
pipx install caliper-eval
SPEC=inbox-triage/inbox-triage.eval.yaml

caliper run $SPEC --ablate inbox-triage
caliper run $SPEC
caliper compare \
.caliper/results/inbox-triage/RUN_ID.json \
inbox-triage
```

![README của Caliper: hàng Ablation, Honest numbers, Four agents và phần Quick start hai cột In your agent, In your terminal](https://homus.dev/photos/iSImMJD8qXY-0903.jpg)

README của Caliper trong video đăng ngày 29/10/2026: các ô "Ablation" (`--ablate` chạy lại không có skill; điểm như nhau thì skill không đáng chỗ trong context), "Honest numbers", "Four agents" (Claude Code, Codex, Pi, Hermes), rồi Quick start và phần "Write a spec" với file `.eval.yaml`.

Phía trên Quick start, README trong video đăng ngày 29/10/2026 có một bảng ví dụ với skill `inbox-triage`: cùng các task, có và không có skill, success từ 80% lên 100%, token từ 612K xuống 431K, thời gian từ 4m 22s xuống 3m 8s; chú thích dưới bảng ghi agent trần đã pass 80%, và skill đưa lên 100% với ít hơn 30% token và ít hơn 28% thời gian.

## 12. Scorecard tách ba câu hỏi, và skill hàng xóm

Theo anh (video đăng ngày 29/10/2026), một điểm của Caliper là có một scorecard tốt, tách riêng ba câu hỏi:

- Agent có chọn đúng skill mong muốn không? (video đăng ngày 29/10/2026)

- Task có pass không? (video đăng ngày 29/10/2026)

- Chỉ dẫn thêm vào tốn bao nhiêu token hay thời gian? (video đăng ngày 29/10/2026)

Anh nói activation không phải là thành công (video đăng ngày 29/10/2026): một skill có thể load đúng mà vẫn làm người dùng thất bại. Caliper còn cho bạn khai báo các skill hàng xóm (neighbouring skills) có thể cạnh tranh cùng một prompt. Theo anh, hãy dùng nó trước khi cài thêm một lớp chỉ dẫn nữa.

![Cửa sổ caliper compare cho skill landing-page với bảng success, delta, attempts cho ba task và dòng Overall, Tokens, Wall](https://homus.dev/photos/iSImMJD8qXY-0932.jpg)

Kết quả `caliper compare` cho skill landing-page, k=3 (demo trong video đăng ngày 29/10/2026): Builds the pricing page 33.3% → 100.0%, Adds a contact form 66.7% → 100.0%, Fixes the mobile menu 66.7% → 66.7%; Overall 55.6% → 88.9% (+33.3%), Tokens 246K → 298K (+21%), Wall 1m 38s → 1m 52s (+14%).

Anh nói tới việc giữ, sửa lại hay gỡ một skill tuỳ theo kết quả và chi phí bạn chấp nhận được (video đăng ngày 29/10/2026). Nếu setup trở nên quá nặng, theo anh, bạn nên gỡ bớt những skill không thật sự cần.

## 13. Ba loại bằng chứng: chọn một khoảng trống, chứng minh một cải thiện

Anh tóm lại (video đăng ngày 29/10/2026): ba repo, ba loại bằng chứng.

- img2threejs nên tạo ra một object chỉnh sửa được: bạn xoay (orbit) được, đổi màu được, xem được trong code (video đăng ngày 29/10/2026).

- Reticle nên cho thấy user journey thật và state đã thay đổi, cùng cách bạn đánh giá nó (video đăng ngày 29/10/2026).

- Caliper nên so cùng các task có và không có một skill (video đăng ngày 29/10/2026).

![Slide CLOSING: PICK ONE GAP. PROVE ONE GAIN. với các ô Task, Baseline, Test, Evidence](https://homus.dev/photos/iSImMJD8qXY-1103.jpg)

Slide kết (slide trong video đăng ngày 29/10/2026): "PICK ONE GAP. PROVE ONE GAIN." Task "One real example", Baseline "Without tool, record result", Test "With tool, same task", Evidence "What changed? Quality and cost".

Lời khuyên cuối của anh (video đăng ngày 29/10/2026): chọn ra khoảng trống trong workflow của bạn hôm nay, chạy một task tiêu biểu, ghi lại baseline, rồi lặp lại với repo đã cài. Chỉ giữ lại khi kết quả cải thiện với một chi phí bạn chấp nhận được.

Theo anh (video đăng ngày 29/10/2026), đừng gom thật nhiều skill, thật nhiều plugin và MCP chỉ cho có; làm như trên thì setup coding của bạn mới xứng đáng được nâng cấp. Anh cảm ơn mọi người đã xem.

## Nguồn và liên kết

- Tên gốc: Insane GitHub Repos That 10x Your Codex And Claude Code Setup
- Sự kiện: [YouTube](https://homus.dev/events/youtube)
- Video gốc: [https://www.youtube.com/watch?v=iSImMJD8qXY](https://www.youtube.com/watch?v=iSImMJD8qXY)

- Kênh YouTube Thetips4you (Thetips4you): [youtube.com/channel/UCoOq-DtESvayx5yJE5H6-qQ](https://www.youtube.com/channel/UCoOq-DtESvayx5yJE5H6-qQ)

- Repo img2threejs: README mô tả công cụ dựng lại vật thể trong ảnh tham chiếu thành model Three.js procedural chỉ bằng code, có quality gate, live demo và Quick start (đọc ngày 01/11/2026): [github.com/img2threejs/img2threejs](https://github.com/img2threejs/img2threejs)

- Repo Reticle: README mô tả việc chạy app thật và trả verdict pass, fail hoặc cannot tell kèm `file:line`; phần cài đặt hiện đã khác bản trong video (đọc ngày 01/11/2026): [github.com/reticlehq/reticle](https://github.com/reticlehq/reticle)

- Repo Caliper: README mô tả việc chạy agent có và không có skill, activation scoreboard, neighbourhoods và ablation (đọc ngày 01/11/2026): [github.com/edonadei/caliper](https://github.com/edonadei/caliper)

Nguồn: https://homus.dev/talks/insane-github-repos-that-10x-your-codex-and-claude-code-setup · cập nhật 2026-11-01