# 5 Plugin & Skill Phải Cài Cho Claude Code Năm 2026

Khám phá 5 plugin và skill đáng cài cho Claude Code: Anatomy tạo mô hình 3D tương tác, Playwright CLI kiểm thử website, Claude-Mem lưu trí nhớ giữa các phiên, Claude Code Setup tối ưu môi trường làm việc và Headroom quản lý context, giới hạn sử dụng. Kèm link GitHub và lệnh cài đặt.

Tác giả: Hùng Hiền Hòa

Nếu đang sử dụng Claude Code để lập trình, thiết kế website hay phát triển dự án với AI, có lẽ bạn đã nhận ra một điều: **Claude Code rất mạnh, nhưng nếu chỉ sử dụng những tính năng mặc định thì chúng ta vẫn đang bỏ lỡ khá nhiều khả năng thú vị.**



Trên GitHub hiện có nhiều plugin và skill giúp Claude Code làm việc hiệu quả hơn, từ tạo hình minh họa 3D, tự động kiểm thử website, ghi nhớ ngữ cảnh giữa các phiên cho đến theo dõi giới hạn sử dụng và tối ưu môi trường lập trình.



Mình chọn ra **5 công cụ đáng để cài đặt và trải nghiệm trong năm 2026**:



1. Anatomy — Tạo hình minh họa kỹ thuật 3D tương tác.
1. Playwright CLI — Cho Claude Code thao tác và kiểm thử website.
1. Claude-Mem — Giúp Claude ghi nhớ công việc giữa các phiên.
1. Claude Code Setup — Phân tích dự án và đề xuất cách tối ưu Claude Code.
1. Headroom — Theo dõi giới hạn sử dụng, context và prompt cache.



Điều đáng chú ý là mỗi công cụ giải quyết một vấn đề hoàn toàn khác nhau.



Cùng xem chúng có gì thú vị nhé!



---



## 1. Anatomy — Biến ý tưởng thành mô hình kỹ thuật 3D tương tác



**GitHub:** [https://github.com/wheresryan22/anatomy](https://github.com/wheresryan22/anatomy)



Nếu thường xuyên nhờ Claude Code giải thích một hệ thống phức tạp, bạn sẽ thấy kết quả phổ biến thường là sơ đồ gồm những ô vuông, mũi tên và vài dòng mô tả.



Những sơ đồ này giúp chúng ta hiểu cấu trúc, nhưng không phải lúc nào cũng thể hiện rõ cách một hệ thống vận hành.



**Anatomy** tiếp cận vấn đề theo hướng thú vị hơn: biến một ý tưởng thành hình minh họa của một cỗ máy hoặc vật thể có các bộ phận chuyển động.



### Anatomy có thể làm gì?



Anatomy là một Agent Skill hỗ trợ Claude Code tạo ra những hình minh họa isometric có tính tương tác, được xây dựng bằng SVG và có thể kết hợp WebGL hoặc chế độ 3D.



Thay vì chỉ mô tả một cơ chế bằng chữ, Claude có thể xây dựng hình ảnh mô phỏng các bộ phận tương ứng và cho phép người dùng tương tác với chúng.



**Những khả năng nổi bật:**



- Tạo hình minh họa isometric nhiều chi tiết.
- Mô phỏng các cơ cấu kỹ thuật và hệ thống phức tạp.
- Tạo các thành phần có chuyển động và tương tác.
- Sử dụng SVG, WebGL hoặc chế độ 3D phù hợp.
- Kết hợp nhãn giải thích, chỉ số và những bộ phận chuyển động.
- Hỗ trợ kiểm tra hình học của mô hình được tạo.



### Ứng dụng thực tế



Ví dụ, bạn muốn giải thích nguyên lý hoạt động của một chiếc đồng hồ cơ.



Thay vì tạo sơ đồ thông thường, Anatomy có thể hỗ trợ xây dựng hình minh họa các bánh răng và bộ phận liên quan, thể hiện cách chúng phối hợp với nhau.



Hoặc khi muốn giải thích một khái niệm phần mềm như bộ nhớ đệm, skill có thể sử dụng hình ảnh một cơ cấu vật lý để giúp người xem dễ hình dung.



Điều này đặc biệt hữu ích cho website giáo dục, bài viết kỹ thuật, trang giới thiệu sản phẩm và nội dung giải thích công nghệ.



### Cài đặt Anatomy



Mở Terminal và chạy:



`npx skills add wheresryan22/anatomy -g -a claude-code`



Sau khi cài, có thể thử trong Claude Code:



`/anatomy explain how a mechanical watch keeps time, interactive`



Claude sẽ sử dụng skill để hỗ trợ xây dựng hình minh họa tương tác.



**Đánh giá:** Anatomy rất đáng thử nếu bạn thích thiết kế, trực quan hóa dữ liệu hoặc muốn tạo ra những hình minh họa kỹ thuật khác biệt cho website.



---



## 2. Playwright CLI — Cho Claude Code tự thao tác và kiểm thử website



**GitHub:** [https://github.com/microsoft/playwright-cli](https://github.com/microsoft/playwright-cli)



Một trong những vấn đề khi lập trình website bằng AI là Claude có thể viết code, nhưng chúng ta vẫn cần kiểm tra xem giao diện và các chức năng thực tế có hoạt động đúng hay không.



Ví dụ, Claude vừa tạo xong một trang đăng nhập.



Code có thể không báo lỗi, nhưng điều đó chưa chắc đồng nghĩa nút đăng nhập hoạt động, biểu mẫu xử lý dữ liệu chính xác hoặc giao diện hiển thị tốt trên trình duyệt.



Đây là lúc **Playwright CLI** phát huy tác dụng.



### Playwright CLI là gì?



Playwright CLI là công cụ dòng lệnh của Microsoft, được thiết kế để các coding agent như Claude Code có thể điều khiển trình duyệt.



Công cụ cho phép thực hiện nhiều thao tác thường gặp mà không cần người dùng tự kiểm tra từng bước.



Điểm đáng chú ý là cách tiếp cận bằng CLI giúp giảm lượng dữ liệu không cần thiết được đưa vào ngữ cảnh của AI so với một số phương pháp tích hợp trình duyệt khác.



### Những khả năng nổi bật



**Tự động mở và điều hướng website**



Claude Code có thể sử dụng Playwright CLI để truy cập địa chỉ web và kiểm tra trạng thái trang.



**Tương tác với các thành phần giao diện**



Công cụ hỗ trợ các thao tác như nhấn nút, nhập văn bản, điền biểu mẫu và điều hướng giữa các trang.



**Chụp ảnh màn hình**



Sau khi thực hiện thao tác, Claude có thể lấy ảnh màn hình để hỗ trợ đánh giá kết quả.



**Kiểm thử chức năng**



Có thể xây dựng các kịch bản thử nghiệm, chẳng hạn nhập thông tin vào biểu mẫu, gửi dữ liệu và kiểm tra kết quả hiển thị.



**Hỗ trợ gỡ lỗi giao diện**



Kết hợp trạng thái trang, ảnh chụp và kết quả thao tác giúp quá trình tìm lỗi trở nên thuận tiện hơn.



### Ứng dụng thực tế



Giả sử bạn đang phát triển một website bán hàng.



Sau khi hoàn thành chức năng giỏ hàng, bạn có thể yêu cầu Claude Code:



- Truy cập website.
- Chọn một sản phẩm.
- Thêm sản phẩm vào giỏ hàng.
- Kiểm tra số lượng và giá.
- Chụp ảnh màn hình.
- Báo cáo những vấn đề phát hiện được.



Thay vì chỉ dựa vào mã nguồn, Claude có thể hỗ trợ xác minh hoạt động của giao diện trong trình duyệt.



### Cài đặt Playwright CLI



Mở Terminal:



`npm install -g @playwright/cli@latest`



Sau đó cài thêm skill dành cho coding agent:



`playwright-cli install --skills`



Kiểm tra cài đặt:



`playwright-cli --help`



Ví dụ yêu cầu cho Claude Code:



`Use playwright-cli to test my website, check the navigation and take screenshots of any UI issues.`



**Đánh giá:** Nếu thường xuyên làm website bằng Claude Code, Playwright CLI là một trong những công cụ đáng ưu tiên vì giúp kết nối quá trình viết code với kiểm thử thực tế.



---



## 3. Claude-Mem — Giúp Claude Code ghi nhớ công việc giữa các phiên



**GitHub:** [https://github.com/thedotmack/claude-mem](https://github.com/thedotmack/claude-mem)



Đây có lẽ là vấn đề quen thuộc với những ai sử dụng Claude Code cho các dự án dài ngày.



Hôm nay bạn làm việc với Claude để xây dựng chức năng đăng nhập, sửa cấu trúc dữ liệu và hoàn thiện một số thành phần.



Ngày mai, khi bắt đầu phiên làm việc mới, Claude có thể cần đọc lại tài liệu hoặc tìm hiểu những quyết định đã thực hiện trước đó.



Điều này khiến công việc bị lặp lại và đôi khi mất thời gian không cần thiết.



**Claude-Mem** được xây dựng nhằm giải quyết bài toán lưu giữ ngữ cảnh giữa các phiên.



### Claude-Mem là gì?



Claude-Mem là hệ thống bộ nhớ bổ sung cho coding agent.



Plugin ghi nhận các hoạt động và thông tin liên quan trong quá trình làm việc, sau đó xử lý thành những bản ghi và tóm tắt có thể được truy xuất ở các phiên tiếp theo.



Nhờ đó, agent có thêm cơ sở để hiểu những gì đã diễn ra trước đó trong cùng dự án.



### Những tính năng nổi bật



**Persistent Memory — Bộ nhớ liên tục**



Thông tin hữu ích từ các phiên trước có thể được lưu lại để sử dụng về sau.



**Tự động ghi nhận hoạt động**



Plugin sử dụng các hook và dịch vụ xử lý để ghi nhận thông tin từ quá trình agent làm việc.



**Nén và tóm tắt ngữ cảnh**



Thay vì đưa toàn bộ lịch sử vào mỗi lần làm việc, hệ thống có thể cung cấp những bản tóm tắt và thông tin liên quan.



**Tìm kiếm ký ức**



Các bản ghi được lưu trữ có thể được tìm lại khi cần hiểu quá trình phát triển dự án.



**Hỗ trợ nhiều coding agent**



Ngoài Claude Code, dự án còn công bố hỗ trợ những công cụ khác như Codex và OpenCode.



### Ứng dụng thực tế



Giả sử bạn đang phát triển một ứng dụng trong nhiều tuần.



Trong quá trình đó, Claude và bạn đã thống nhất:



- Cấu trúc thư mục.
- Các thư viện sử dụng.
- Quy tắc đặt tên.
- Những lỗi đã sửa.
- Các quyết định liên quan đến kiến trúc hệ thống.



Claude-Mem có thể giúp lưu lại những thông tin hữu ích này.



Khi quay lại dự án, agent có thể truy xuất ngữ cảnh liên quan thay vì luôn phải bắt đầu tìm hiểu từ đầu.



Tuy nhiên, bộ nhớ tự động không đảm bảo nhớ hoàn hảo mọi chi tiết. Những quyết định quan trọng vẫn nên được ghi trong tài liệu dự án hoặc hệ thống quản lý mã nguồn.



### Cài đặt Claude-Mem



Trong Terminal:



`npx claude-mem install`



Ngoài ra, có thể cài qua marketplace của Claude Code:



`/plugin marketplace add thedotmack/claude-mem`



`/plugin install claude-mem`



Sau khi cài đặt, khởi động lại Claude Code để plugin hoạt động.



Lưu ý rằng Claude-Mem có hệ thống lưu trữ thông tin phiên làm việc và các tùy chọn dịch vụ xử lý, đồng bộ, thống kê sử dụng. Bạn nên xem kỹ các thiết lập quyền riêng tư trước khi áp dụng cho dự án chứa thông tin nhạy cảm.



**Đánh giá:** Claude-Mem đáng thử đối với những ai thường xuyên làm việc trên một dự án kéo dài nhiều ngày, đặc biệt khi muốn giảm việc phải giải thích lại bối cảnh ở mỗi phiên mới.



---



## 4. Claude Code Setup — Để Claude tự đề xuất cách tối ưu môi trường làm việc



**GitHub:** [https://github.com/anthropics/claude-plugins-official/tree/main/plugins/claude-code-setup](https://github.com/anthropics/claude-plugins-official/tree/main/plugins/claude-code-setup)



Không phải ai sử dụng Claude Code cũng biết cách thiết lập MCP Server, Hooks, Skills, Subagents hoặc các lệnh tùy chỉnh.



Ngay cả khi biết các khái niệm này, việc quyết định nên sử dụng công cụ nào cho từng dự án cũng không đơn giản.



**Claude Code Setup** là plugin chính thức do Anthropic phát triển, tập trung vào việc phân tích dự án và đề xuất những cách tự động hóa phù hợp.



### Claude Code Setup làm được gì?



Plugin có thể kiểm tra cấu trúc mã nguồn của dự án và đưa ra gợi ý về các thành phần nên thiết lập.



Những nhóm đề xuất chính gồm:



**1. MCP Servers**



Gợi ý các công cụ tích hợp bên ngoài phù hợp với nhu cầu phát triển.



Ví dụ: Công cụ tra cứu tài liệu hoặc hỗ trợ kiểm thử giao diện.



**2. Skills**



Đề xuất những bộ kỹ năng chuyên biệt để hỗ trợ công việc lập trình.



**3. Hooks**



Gợi ý các hành động tự động như kiểm tra mã nguồn, định dạng code hoặc hạn chế một số thao tác không an toàn.



**4. Subagents**



Đề xuất những agent chuyên trách cho các nhiệm vụ như review bảo mật, kiểm tra hiệu năng hoặc khả năng truy cập.



**5. Slash Commands**



Đề xuất các lệnh rút gọn để hỗ trợ những công việc lặp đi lặp lại.



### Điều gì khiến plugin này hữu ích?



Điểm hay là bạn không cần phải biết trước toàn bộ hệ sinh thái plugin của Claude Code.



Thay vào đó, có thể đưa ra yêu cầu:



`Recommend automations for this project`



Claude sẽ phân tích dự án và đề xuất những công cụ có thể phù hợp.



Ví dụ, nếu đang phát triển một website React, Claude có thể đề xuất các công cụ liên quan đến frontend, kiểm thử hoặc chất lượng mã nguồn.



Quan trọng: **Claude Code Setup là công cụ đề xuất, không tự động thay đổi mã nguồn dự án.**



### Cài đặt Claude Code Setup



Mở Claude Code và chạy:



`/plugin install claude-code-setup@claude-plugins-official`



Sau đó có thể yêu cầu:



`Help me set up Claude Code for this project.`



Hoặc:



`Recommend the best hooks, skills and MCP servers for my codebase.`



**Đánh giá:** Đây là plugin đáng cân nhắc cho cả người mới và người đã sử dụng Claude Code lâu năm, đặc biệt nếu muốn cấu hình môi trường làm việc phù hợp hơn với từng dự án.



---



## 5. Headroom — Theo dõi giới hạn sử dụng và tối ưu Context trong Claude Code



**GitHub:** [https://github.com/MWEJ/claude-code-headroom](https://github.com/MWEJ/claude-code-headroom)



Nếu sử dụng Claude Code thường xuyên, chắc hẳn bạn từng gặp những tình huống như:



Đang làm việc thì chạm giới hạn sử dụng.



Phiên làm việc quá dài khiến lượng context tăng cao.



Hoặc sau một khoảng nghỉ, cuộc hội thoại cần xử lý lại lượng ngữ cảnh lớn.



**Headroom** là một plugin dành cho Claude Code, giúp hiển thị các thông tin này ngay trong giao diện làm việc.



### Headroom có gì nổi bật?



**Theo dõi giới hạn sử dụng**



Headroom hiển thị mức sử dụng của các cửa sổ giới hạn 5 giờ và hàng tuần, kèm thời gian đặt lại.



**Dự báo mức tiêu thụ**



Plugin ước tính tốc độ sử dụng hiện tại để cảnh báo nếu bạn có khả năng chạm giới hạn trước thời điểm reset.



**Theo dõi Context Window**



Hiển thị lượng ngữ cảnh đã sử dụng trong phiên làm việc, giúp dễ nhận biết khi cuộc hội thoại trở nên quá dài.



**Auto Compact**



Hỗ trợ tự động nén ngữ cảnh khi đạt một ngưỡng nhất định.



Theo cấu hình mặc định được dự án mô tả, ngưỡng Auto Compact là 80%, có thể điều chỉnh.



**Agent-Timed Compaction**



Claude có thể tham gia quyết định thời điểm phù hợp để nén ngữ cảnh, chẳng hạn tránh làm gián đoạn một chuỗi công việc đang thực hiện.



**Keep Cache Warm**



Đây là tính năng gửi những yêu cầu làm mới phù hợp để duy trì prompt cache khi có lợi về chi phí.



Cần lưu ý rằng việc giữ cache cũng tiêu thụ tài nguyên. Nó không phải cơ chế tạo ra token miễn phí và không phải lúc nào cũng tiết kiệm.



### Ứng dụng thực tế



Giả sử bạn dành nhiều giờ để Claude Code phát triển một ứng dụng.



Headroom có thể giúp bạn quan sát:



- Lượng giới hạn sử dụng còn lại.
- Thời gian đến khi giới hạn được đặt lại.
- Tốc độ tiêu thụ hiện tại.
- Mức sử dụng Context Window.
- Thời điểm nên compact để tránh mất ngữ cảnh quan trọng.
- Tình trạng prompt cache.



Điều này giúp bạn chủ động hơn khi làm việc với các phiên dài.



### Cài đặt Headroom



Trong Claude Code, chạy:



`/plugin install headroom --marketplace MWEJ/claude-code-headroom`



Hoặc thêm marketplace từ Terminal:



`claude plugin marketplace add MWEJ/claude-code-headroom`



Sau đó:



`claude plugin install headroom@claude-code-headroom`



Headroom yêu cầu phiên bản Claude Code tương thích và tài khoản Claude phù hợp; README của dự án hướng dẫn sử dụng với gói Pro hoặc Max.



Bạn cũng có thể dùng lệnh:



`/headroom`



để bật hoặc ẩn phần hiển thị thông tin.



**Đánh giá:** Nếu thường xuyên gặp giới hạn sử dụng hoặc làm việc trong những phiên Claude Code dài, Headroom là công cụ đáng thử để theo dõi tình trạng sử dụng và quản lý context chủ động hơn.



---



## Tổng kết: 5 công cụ, 5 vấn đề khác nhau



Plugin / Skill | Giải quyết vấn đề gì? |



**Anatomy** | Tạo hình minh họa kỹ thuật 3D và SVG tương tác |



**Playwright CLI** | Thao tác trình duyệt và kiểm thử website |



**Claude-Mem** | Lưu giữ và truy xuất ngữ cảnh qua nhiều phiên |



**Claude Code Setup** | Phân tích dự án và đề xuất công cụ, cấu hình phù hợp |



**Headroom** | Theo dõi giới hạn sử dụng, context và prompt cache |



Điều khiến mình thấy thú vị ở 5 công cụ này là chúng không cố gắng làm cùng một việc.



Anatomy mở rộng khả năng trực quan hóa.



Playwright CLI bổ sung khả năng tương tác với website.



Claude-Mem tập trung vào tính liên tục của công việc.



Claude Code Setup hỗ trợ lựa chọn công cụ và thiết lập môi trường.



Headroom giúp người dùng quan sát và quản lý tài nguyên khi làm việc.



**Không nhất thiết phải cài cả 5 ngay từ đầu.** Nhưng nếu thường xuyên sử dụng Claude Code, việc tìm hiểu và chọn đúng những công cụ này có thể giúp quá trình phát triển dự án thuận tiện hơn đáng kể.



Trước khi cài một plugin bên thứ ba, hãy kiểm tra nguồn GitHub, quyền truy cập, script cài đặt và các hook mà plugin có thể chạy.



Bởi cuối cùng, sức mạnh của một coding agent không chỉ nằm ở khả năng viết mã, mà còn nằm ở cách chúng ta trang bị cho nó những công cụ phù hợp.



---



### Nguồn tham khảo



- [Anatomy — GitHub](https://github.com/wheresryan22/anatomy)
- [Playwright CLI — GitHub](https://github.com/microsoft/playwright-cli)
- [Claude-Mem — GitHub](https://github.com/thedotmack/claude-mem)
- [Claude Code Setup — GitHub Anthropic](https://github.com/anthropics/claude-plugins-official/tree/main/plugins/claude-code-setup)
- [Headroom — GitHub](https://github.com/MWEJ/claude-code-headroom)



*Thông tin tham khảo từ các dự án và tài liệu chính thức, kiểm tra ngày 13/11/2026.*



*Góc nhỏ của Hùng — blog.hunghienhoa.com*

[Về Blog](https://blog.hunghienhoa.com/)