mmo.vn
Lập trình AI18 phút đọc

Modern Web Guidance 1.0: giúp AI coding agent viết web hiện đại

Modern Web Guidance 1.0 của Google Chrome giúp Claude Code, Codex, Copilot viết web bằng tính năng gốc của trình duyệt. Cách cài, lệnh mẫu và legacy-scan.

Modern Web Guidance 1.0 giúp AI coding agent viết web hiện đại hơn

Trong bài này

  • 18 phút đọc
  • 12 phần
  • 7 mẫu sao chép được
  • 2 bảng tra cứu
Mục lục
  1. Vì sao AI hay viết code web "đời cũ"
  2. Modern Web Guidance là gì, bản 1.0 có gì mới
  3. Cơ chế hoạt động: tra cứu đúng lúc, ngay trên máy
  4. Cài đặt cho từng coding agent
  5. Thử ngay với vài câu lệnh mẫu
  6. Hiệu quả thực tế: con số từ eval
  7. Hiện đại hoá dự án cũ bằng legacy-scan
  8. Cấu hình nâng cao và quyền riêng tư
  9. Hiểu lầm phổ biến
  10. Quy trình gợi ý cho người mới vibe code
  11. Câu hỏi thường gặp
  12. Kết luận

Cách bài viết này được thực hiện: bài tổng hợp từ ghi chú phát hành v1.0.0, README chính thức trên GitHub và trang tài liệu của Chrome for Developers, kiểm tra ngày 11/11/2026, một ngày sau khi bản 1.0 ra mắt. Các con số đánh giá (eval) là số liệu do nhóm phát triển công bố, chúng tôi không tự đo. Ảnh chụp màn hình do mmo.vn chụp từ trang chính thức. Bài không có link affiliate.

Nếu bạn đã từng nhờ Claude Code, Codex hay Copilot làm một trang web, có lẽ bạn đã gặp cảnh này: agent viết một cái hộp thoại bằng cả trăm dòng JavaScript, kéo thêm thư viện tooltip, rồi dùng media query cho một tấm thẻ lẽ ra chỉ cần vài dòng CSS. Code vẫn chạy, nhưng nặng, khó bảo trì và đi ngược với những gì trình duyệt đã hỗ trợ sẵn từ vài năm nay.

Ngày 10/11/2026, nhóm Google Chrome phát hành Modern Web Guidance 1.0, bộ “skill” giúp coding agent viết web theo cách hiện đại. Bản 1.0 chính thức ra khỏi giai đoạn thử nghiệm, có 203 hướng dẫn tình huống, phủ 250 tính năng web, và từ nay được đồng quản lý bởi các nhóm Chrome, Microsoft Edge, Mozilla Firefox và MDN. Với người mới vibe code, đây là một trong những thứ cài một lần mà dùng lâu dài.

Câu trả lời ngắn: Modern Web Guidance là bộ skill miễn phí (giấy phép Apache-2.0) cài vào Claude Code, Codex, Copilot CLI, Antigravity và nhiều agent khác. Khi bạn yêu cầu làm giao diện web, agent tự tra cứu hướng dẫn chuẩn ngay trên máy, rồi viết code dùng tính năng gốc của trình duyệt thay vì mẫu cũ. Cài bằng một lệnh npx.

Tóm tắt nhanh

  • Phiên bản 1.0.0 phát hành ngày 10/11/2026, kho GitHub có khoảng 3.400 sao.
  • 203 hướng dẫn, 250 tính năng web; có thêm lệnh legacy-scan quét code cũ để hiện đại hoá.
  • Tìm kiếm chạy offline trên máy, không cần API key; gói npm giảm từ 23,5 MB xuống 8,8 MB.
  • Theo eval của nhóm phát triển ngày 8/11, Claude Code (Opus 5.5) đạt 88% tác vụ khi có hướng dẫn, so với 57% khi không có.
  • Cài nhanh: npx modern-web-guidance@latest install, cần Node.js 18 trở lên.

Nội dung chính:

  1. Vì sao AI hay viết code web “đời cũ”
  2. Modern Web Guidance là gì, bản 1.0 có gì mới
  3. Cơ chế hoạt động: tra cứu đúng lúc, ngay trên máy
  4. Cài đặt cho từng coding agent
  5. Thử ngay với vài câu lệnh mẫu
  6. Hiệu quả thực tế: con số từ eval
  7. Hiện đại hoá dự án cũ bằng legacy-scan
  8. Cấu hình nâng cao và quyền riêng tư
  9. Hiểu lầm phổ biến
  10. Quy trình gợi ý cho người mới vibe code
  11. Câu hỏi thường gặp
  12. Kết luận

Vì sao AI hay viết code web “đời cũ”

README của dự án giải thích khá thẳng: dữ liệu huấn luyện của mô hình ngôn ngữ chứa một lượng khổng lồ code web cũ. Vì vậy agent thường mặc định dùng mẫu quen thuộc, kể cả khi trình duyệt đã có giải pháp gốc nhanh hơn và gọn hơn. Ngay cả khi mô hình “biết” một API mới tồn tại, nó vẫn thiếu đủ ví dụ thực tế để dùng API đó đúng cách trong sản phẩm thật.

Một bài phân tích trên blog LogRocket (tác giả Emmanuel John, tháng 7/2026) đưa ra vài ví dụ rất dễ gặp khi vibe code:

  • Tooltip: agent kéo thư viện Floating UI về, trong khi CSS Anchor Positioning đã làm được việc định vị.
  • Hộp thoại (modal): agent dựng portal riêng và dùng setTimeout 300 ms để chờ hiệu ứng đóng, trong khi thẻ <dialog> với showModal() và @starting-style xử lý gọn hơn.
  • Lọc danh sách lớn: lọc đồng bộ làm treo giao diện, thay vì chia nhỏ công việc bằng scheduler.yield().
  • Bố cục thẻ: dùng media query theo màn hình, thay vì container query theo kích thước khung chứa.
So sánh mẫu code web cũ mà AI hay viết với cách làm hiện đại dùng tính năng gốc của trình duyệt
Bốn tình huống agent hay chọn cách cũ, và lựa chọn hiện đại tương ứng. Nguồn ví dụ: LogRocket.

Với người mới, hậu quả không chỉ là code dài. Thư viện thêm vào làm trang tải chậm hơn, nhiều chỗ thiếu hỗ trợ bàn phím và trình đọc màn hình, và mỗi lần nhờ AI sửa lại càng chồng thêm lớp vá. Modern Web Guidance sinh ra để chặn vấn đề từ gốc: đưa đúng kiến thức vào ngữ cảnh của agent ngay lúc nó cần.

Modern Web Guidance là gì, bản 1.0 có gì mới

Theo trang tài liệu chính thức trên Chrome for Developers, Modern Web Guidance là một bộ skill đưa kiến thức chuyên sâu về nền tảng web, các thực hành tốt nhất và dữ liệu tương thích trình duyệt vào thẳng coding agent. “Skill” ở đây là một gói hướng dẫn mà agent tự kích hoạt khi gặp việc liên quan, giống như cách bạn mở sổ tay tra cứu khi cần.

Trang tài liệu Modern Web Guidance trên Chrome for Developers với lệnh cài npx
Trang giới thiệu Modern Web Guidance trên Chrome for Developers, kèm lệnh cài khuyến nghị. Ảnh chụp màn hình: mmo.vn, nguồn developer.chrome.com.

Dự án xuất hiện trên GitHub từ tháng 3/2026 dưới dạng bản thử nghiệm. Ghi chú phát hành v1.0.0 ngày 10/11/2026 tóm tắt các thay đổi lớn:

  • Ra khỏi preview, có 203 hướng dẫn theo tình huống sử dụng và phủ 250 tính năng của nền tảng web.
  • Đồng quản lý bởi các nhóm Google Chrome, Microsoft Edge, Mozilla Firefox và MDN, cùng cộng đồng phát triển web.
  • Bảng eval công khai: kết quả theo từng agent và từng hướng dẫn được đăng trên một dashboard riêng.
  • Lệnh legacy-scan quét code cũ và chỉ ra hướng dẫn thay thế hiện đại.
  • Tìm kiếm nhẹ hơn: dùng mô hình embedding không phụ thuộc thư viện ngoài kết hợp thuật toán BM25 thay cho TensorFlow.js, vẫn chạy offline; gói tải về giảm từ 23,5 MB xuống 8,8 MB.
  • 8 hướng dẫn thành phần giao diện mới: accordion, menu ứng dụng, breadcrumb, carousel, nút sao chép, thanh điều hướng, tab và thanh công cụ.
  • 98 hướng dẫn được cập nhật, trong đó gần 70 hướng dẫn được chuyên gia về trợ năng (accessibility) rà lại, ví dụ yêu cầu tương phản tối thiểu 3:1 cho viền focus, icon và điều khiển tuỳ biến.
Các con số chính của Modern Web Guidance 1.0: 203 hướng dẫn, 250 tính năng web, 4 nhóm trình duyệt, gói 8,8 MB
Modern Web Guidance 1.0 qua bốn con số. Nguồn: ghi chú phát hành v1.0.0.

Nội dung hướng dẫn chia theo các nhóm lớn: trải nghiệm người dùng (View Transitions, hiệu ứng vào/ra), bố cục CSS (container query, subgrid, không gian màu oklch), hiệu năng (tải trước trang, chẩn đoán INP, scheduler.yield), biểu mẫu và giao diện (Anchor Positioning, Popover API, dialog), trợ năng, và AI tích hợp sẵn trong trình duyệt (dịch, tóm tắt, nhận diện ngôn ngữ chạy trên máy). Ngoài gói chính còn có gói chrome-extensions dành cho ai làm tiện ích Chrome với Manifest V3.

Kho GitHub GoogleChrome modern-web-guidance với bản phát hành v1.0.0 và khoảng 3.400 sao
Kho mã GoogleChrome/modern-web-guidance ngày 11/11/2026, bản v1.0.0 vừa phát hành. Ảnh chụp màn hình: mmo.vn, nguồn github.com.

Cơ chế hoạt động: tra cứu đúng lúc, ngay trên máy

Điểm hay của Modern Web Guidance là nó không nhồi cả kho kiến thức vào mỗi câu lệnh. README mô tả quy trình gồm ba bước:

  1. Kích hoạt: khi bạn giao một việc liên quan đến web, agent nhận ra và bật skill modern-web-guidance. Bản thân phần mô tả skill rất nhẹ, khoảng 205 token.
  2. Tìm kiếm cục bộ: agent chạy lệnh search với câu truy vấn. Công cụ so khớp bằng mô hình embedding và BM25 ngay trên máy, không gọi mạng, không cần API key.
  3. Lấy hướng dẫn: agent chạy retrieve để đưa mẫu code, các lỗi hay gặp và cách dự phòng cho trình duyệt cũ vào ngữ cảnh làm việc.
Sơ đồ ba bước Modern Web Guidance hoạt động: kích hoạt skill, tìm kiếm offline, lấy hướng dẫn vào ngữ cảnh
Agent chỉ nạp đúng hướng dẫn cần cho việc đang làm, nên tiết kiệm token. Nguồn: README dự án.

Cách này quan trọng với người dùng ở Việt Nam vì hai lý do. Thứ nhất, token là tiền: skill chỉ nạp phần cần thiết thay vì một tài liệu dài. Thứ hai, phần tra cứu chạy offline nên vẫn nhanh khi mạng quốc tế chập chờn. Nhóm phát triển cũng cho biết họ dùng eval để cắt bớt những nội dung mà mô hình đã biết sẵn, chỉ giữ lại phần mô hình hay sai.

Dự án dựa vào dữ liệu Baseline, một chuẩn cho biết tính năng web nào đã được các trình duyệt chính hỗ trợ ổn định. Nhờ đó agent biết khi nào dùng thẳng tính năng mới, khi nào cần viết phương án dự phòng nhẹ (dưới 50 dòng) thay vì kéo cả thư viện polyfill.

Cài đặt cho từng coding agent

Bạn cần Node.js 18 trở lên. Cách đơn giản nhất là chạy trình cài đặt tương tác, nó sẽ hỏi bạn dùng agent nào:

# Cài bằng trình hướng dẫn tương tác (khuyến nghị)
npx modern-web-guidance@latest install

# Tự chọn gói skill: modern-web-guidance và/hoặc chrome-extensions
npx modern-web-guidance@latest install --choose

# Cập nhật về sau (nếu đã cài bằng npx)
npx modern-web-guidance@latest update

Giải thích nhanh: npx tải gói mới nhất từ npm rồi chạy luôn, không cần cài toàn cục. Cờ @latest đảm bảo bạn luôn lấy bản mới nhất của hướng dẫn. Lệnh update dùng khi muốn làm mới nội dung đã cài.

Phần Quickstart trong README Modern Web Guidance với các lệnh install, search, retrieve và legacy-scan
Phần Quickstart trong README: cài, tìm, lấy hướng dẫn và quét code cũ. Ảnh chụp màn hình: mmo.vn, nguồn github.com/GoogleChrome.

Nếu bạn muốn cài thẳng vào một agent cụ thể, README liệt kê lệnh riêng cho từng công cụ:

AgentLệnh cài
Claude Code/plugin marketplace add GoogleChrome/modern-web-guidance rồi /plugin install modern-web-guidance@googlechrome, sau đó /reload-plugins
OpenAI Codexcodex plugin marketplace add GoogleChrome/modern-web-guidance rồi codex plugin add modern-web-guidance@googlechrome
GitHub Copilot CLI/plugin marketplace add GoogleChrome/modern-web-guidance rồi /plugin install modern-web-guidance@googlechrome
Google Antigravityagy plugin install https://github.com/GoogleChrome/modern-web-guidance
Vercel Skills CLInpx skills add GoogleChrome/modern-web-guidance
GitHub CLIgh skill install GoogleChrome/modern-web-guidance
Lệnh cài Modern Web Guidance theo từng coding agent (theo README v1.0.0)

Với Claude Code, trang tài liệu của Chrome còn đưa thêm cách cài từ chợ plugin chính thức của Anthropic bằng một lệnh trong terminal: claude plugin install modern-web-guidance@claude-plugins-official. Sau khi cài qua chợ GoogleChrome, README khuyên bạn gõ /plugin, chọn marketplace GoogleChrome và bật AutoUpdate để hướng dẫn tự cập nhật. Ngoài ra còn có lệnh cho Grok Build CLI và Kimi Code.

Infographic tóm tắt cách cài Modern Web Guidance cho Claude Code, Codex, Copilot CLI và Antigravity
Chọn đúng lệnh theo agent bạn đang dùng; không chắc thì dùng trình cài tương tác. Nguồn: README dự án.

Thử ngay với vài câu lệnh mẫu

Bạn có thể dùng thử công cụ mà chưa cần cài vào agent nào, chỉ để xem hướng dẫn trông ra sao:

# Tìm hướng dẫn liên quan bằng câu mô tả tiếng Anh
npx modern-web-guidance@latest search "animate a dialog modal backdrop"

# Lấy nội dung một hướng dẫn theo mã định danh
npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"

Lệnh search trả về các hướng dẫn phù hợp nhất, lệnh retrieve in nội dung hướng dẫn ra terminal. Đây cũng chính là hai lệnh agent tự gọi phía sau. Bản 1.0 còn dạy agent đổi ý định mơ hồ thành tên thành phần cụ thể, ví dụ tìm “confirmation modal dialog” thay vì “confirm destructive action”, và thử diễn đạt lại một lần trước khi quay về liệt kê toàn bộ.

Khi đã cài vào agent, bạn chỉ cần ra lệnh bằng tiếng Việt như bình thường. Trang tài liệu Chrome gợi ý một số loại yêu cầu rất hợp để thử:

  • “Làm thanh tab có vệt sáng trượt theo tab đang chọn, dùng CSS Anchor Positioning.”
  • “Chuyển các modal trong dự án sang thẻ dialog gốc.”
  • “Chuyển tooltip sang Popover API kết hợp Anchor Positioning.”
  • “Làm luồng đăng nhập bằng passkey (WebAuthn).”
  • “Tải trước trang khi người dùng rê chuột vào liên kết” hoặc “sửa các tác vụ dài làm điểm INP xấu”.

Để bạn hình dung “code hiện đại” khác thế nào, đây là một hộp thoại xác nhận dùng thẻ <dialog> gốc, kiểu kết quả mà skill hướng agent tới:

<button id="open-confirm">Xoá dự án</button>

<dialog id="confirm">
  <form method="dialog">
    <p>Bạn chắc chắn muốn xoá dự án này?</p>
    <button value="cancel">Huỷ</button>
    <button value="ok">Xoá</button>
  </form>
</dialog>

<script>
  const dlg = document.getElementById("confirm");
  document.getElementById("open-confirm").addEventListener("click", () => dlg.showModal());
  dlg.addEventListener("close", () => {
    if (dlg.returnValue === "ok") console.log("Người dùng đã xác nhận xoá");
  });
</script>

Giải thích: showModal() mở hộp thoại ở lớp trên cùng, tự khoá phần nền phía sau và cho phép đóng bằng phím Esc. Biểu mẫu có method="dialog" sẽ tự đóng hộp thoại khi bấm nút, và giá trị value của nút được bấm nằm trong dlg.returnValue. Không cần thư viện, không cần tự viết bẫy focus. Đây là ví dụ minh hoạ của mmo.vn, không trích từ hướng dẫn của dự án.

Hiệu quả thực tế: con số từ eval

Nhóm phát triển xây một hệ thống chấm điểm khá chặt. Họ viết các yêu cầu giống lập trình viên thật trên ứng dụng mẫu đầy đủ, ví dụ “làm ảnh của tôi tải nhanh hơn”, và cố ý không nêu tên API để xem agent có tự tìm ra cách hiện đại không. Bộ chấm dùng Playwright kiểm tra mẫu mã nguồn, style thực tế, hành vi DOM và trạng thái trợ năng. Mỗi bộ chấm phải cho lời giải chuẩn đạt 100% và ứng dụng gốc chưa sửa trượt 100% thì mới được dùng.

Kết quả lượt chạy ngày 8/11/2026 (khoảng 214–215 tác vụ mỗi agent) theo bảng trong README:

Biểu đồ tỷ lệ hoàn thành tác vụ web của Claude Code, Codex CLI và Antigravity khi có và không có Modern Web Guidance
Tỷ lệ đạt yêu cầu khi không có và có Modern Web Guidance, lượt eval ngày 8/11/2026. Số liệu do nhóm phát triển công bố.
Agent và mô hìnhKhông có hướng dẫnCó hướng dẫnMức tăng
Claude Code (Opus 5.5)57%88%+31 điểm %
Codex CLI (GPT-6.1 Sol)54%82%+28 điểm %
Antigravity CLI (Gemini 4 Argon)58%94%+36 điểm %
Kết quả eval ngày 8/11/2026: tỷ lệ đạt khi không có và có hướng dẫn

Nên đọc những con số này thế nào? Đây là eval do chính nhóm làm skill thiết kế, trên bộ tác vụ họ chọn, nên không thể xem là đo lường độc lập. Tuy vậy, mức tăng khoảng 28–36 điểm phần trăm lặp lại ở cả ba agent và qua nhiều lượt chạy trong tháng 11, cho thấy hiệu quả khá ổn định. Điểm đáng chú ý khác: không có hướng dẫn, cả ba mô hình mạnh nhất hiện nay đều chỉ làm đúng khoảng một nửa số tác vụ web hiện đại. Đó là lý do bạn không nên tin tuyệt đối vào code web AI viết ra.

Hiện đại hoá dự án cũ bằng legacy-scan

Nếu bạn đã có một dự án vibe code từ trước, tính năng đáng thử nhất trong bản 1.0 là legacy-scan. Lệnh này phân tích tĩnh mã nguồn, tìm các mẫu code web đã lỗi thời và gắn mỗi phát hiện với hướng dẫn có cách thay thế hiện đại:

# Quét toàn bộ thư mục dự án hiện tại
npx modern-web-guidance@latest legacy-scan .

# Hoặc chỉ quét một thư mục con
npx modern-web-guidance@latest legacy-scan ./src

Dấu chấm . nghĩa là thư mục đang đứng. Ghi chú phát hành nói rõ giới hạn: lệnh hiện chỉ phủ khoảng 20% số hướng dẫn, là những hướng dẫn có quy tắc nhận diện code cũ rõ ràng. Nghĩa là quét sạch không có nghĩa dự án đã hiện đại hoàn toàn.

Skill trong bản 1.0 cũng thêm một quy trình 4 bước để agent làm việc này có kiểm soát:

Quy trình 4 bước hiện đại hoá code web cũ: quét, xác minh, báo cáo, hiện đại hoá
Quy trình quét, xác minh, báo cáo rồi mới sửa giúp bạn duyệt từng thay đổi trước khi agent động vào code. Nguồn: ghi chú phát hành v1.0.0.

Mẹo cho người mới: hãy yêu cầu agent dừng ở bước báo cáo trước, ví dụ “Chạy legacy-scan, xác minh từng phát hiện và lập bảng báo cáo, chưa sửa gì”. Đọc báo cáo xong mới bảo agent sửa từng nhóm một. Làm như vậy dễ quay lại hơn rất nhiều so với để agent sửa cả dự án trong một lần.

Bạn cũng có thể kết hợp với Chrome DevTools for agents. Trang tài liệu Chrome cho biết khi dùng chung, agent có thể kiểm tra hiệu năng theo thời gian thực, xem cây trợ năng, đọc log console và tự sửa lỗi phát hiện được.

Hình minh hoạ chính thức Chrome DevTools for agents của Google Chrome
Hình minh hoạ Chrome DevTools for agents, công cụ có thể dùng cùng Modern Web Guidance để kiểm tra kết quả. Ảnh: Google Chrome, nguồn developer.chrome.com.

Cấu hình nâng cao và quyền riêng tư

Khai báo trình duyệt mục tiêu. Theo bài hướng dẫn của LogRocket, mặc định skill nhắm tới mức Baseline “Widely available”, tức tính năng đã ổn định trên các trình duyệt chính một thời gian. Nếu dự án của bạn cần hỗ trợ rộng hơn hoặc muốn dùng tính năng mới hơn, hãy ghi rõ trong file hướng dẫn của agent như CLAUDE.md hoặc AGENTS.md:

## Trình duyệt mục tiêu
- Dùng Modern Web Guidance cho mọi việc liên quan đến HTML, CSS, JavaScript phía trình duyệt.
- Mục tiêu tương thích: Baseline 2024. Tính năng mới hơn phải có phương án dự phòng nhẹ.
- Không thêm thư viện UI nếu trình duyệt đã có tính năng gốc tương đương.

Tính năng thử nghiệm. Hướng dẫn về API đang thử nghiệm (Origin Trial) hoặc tính năng “dễ thay đổi” (chỉ một trình duyệt hỗ trợ, ra mắt trong 3 tháng gần nhất hoặc chưa ổn định) vẫn tìm thấy được, nhưng agent không lấy được nội dung nếu bạn chưa cho phép. Muốn mở, bạn tạo file .mwgrc ở thư mục gốc dự án:

{
  "allowOriginTrials": false,
  "allowVolatileFeatures": true
}

Hoặc chạy lệnh tương ứng npx modern-web-guidance@latest set-allow-volatile-features và set-allow-origin-trials. File này có thể commit vào Git để cả nhóm dùng chung cấu hình. Người mới nên để mặc định, tránh đưa tính năng chưa ổn định vào sản phẩm thật.

Dữ liệu thu thập. Google thu thập số liệu sử dụng ẩn danh: số lượt cài, tên agent gọi công cụ, mã hướng dẫn được lấy và câu truy vấn tìm kiếm do agent tạo. Câu lệnh gốc của bạn không bị thu thập. Nếu muốn tắt hẳn, thêm dòng sau vào file cấu hình shell (ví dụ .bashrc hoặc .zshrc):

export DISABLE_TELEMETRY=1

Trên Windows PowerShell, bạn có thể đặt biến môi trường cố định bằng [Environment]::SetEnvironmentVariable("DISABLE_TELEMETRY", "1", "User") rồi mở lại terminal.

Hiểu lầm phổ biến

Hiểu lầm và sự thật về Modern Web Guidance khi dùng với coding agent
Ba hiểu lầm hay gặp khi nghe về Modern Web Guidance.
  • “Cài vào là agent viết web hoàn hảo.” Không. Ngay trong eval của nhóm phát triển, tỷ lệ đạt cao nhất vẫn dưới 100%. Bạn vẫn phải xem diff, thử trên nhiều trình duyệt và kiểm tra trợ năng.
  • “Chỉ dùng được với Chrome hoặc Gemini.” Sai. Skill cài được vào Claude Code, Codex, Copilot CLI và nhiều agent khác, và bản 1.0 được đồng quản lý bởi cả nhóm Edge, Firefox và MDN.
  • “Tra cứu phải gửi code lên máy chủ Google.” Không đúng. Tìm kiếm chạy offline trên máy. Phần thu thập ẩn danh chỉ gồm số liệu sử dụng như đã nêu và có thể tắt.

Quy trình gợi ý cho người mới vibe code

Nếu bạn mới bắt đầu làm web bằng prompt, đây là trình tự mmo.vn gợi ý để tận dụng Modern Web Guidance mà vẫn giữ quyền kiểm soát:

1. Chuẩn bị môi trường

Cài Node.js bản 18 trở lên, kiểm tra bằng node --version. Chạy npx modern-web-guidance@latest install và chọn đúng agent bạn dùng.

2. Ghi luật chơi vào file hướng dẫn của agent

Thêm đoạn “Trình duyệt mục tiêu” như ở trên vào CLAUDE.md hoặc AGENTS.md. Agent đọc file này mỗi phiên, nên bạn không phải nhắc lại.

3. Mô tả kết quả, không mô tả công nghệ

Thay vì “dùng thư viện X làm modal”, hãy nói “làm hộp thoại xác nhận xoá, đóng được bằng Esc, dùng tốt với bàn phím”. Skill được thiết kế để agent tự tìm cách làm hiện đại từ yêu cầu như vậy.

4. Đọc diff trước khi chấp nhận

Để ý xem agent có thêm thư viện mới vào package.json không. Nếu có, hỏi lại: “Trình duyệt đã có tính năng gốc nào làm được việc này chưa?”

5. Kiểm tra trên trình duyệt thật

Mở trang trên Chrome, Firefox, Safari (nếu có) và điện thoại. Dùng phím Tab đi qua các nút để chắc trang dùng được bằng bàn phím.

Checklist 5 bước dùng Modern Web Guidance cho người mới vibe code web
Năm bước dùng Modern Web Guidance mà vẫn giữ quyền kiểm soát dự án.

Khi làm việc với coding agent, đừng quên an toàn: không gõ mật khẩu hay API key thật vào câu lệnh mà agent có thể lưu lại. mmo.vn đã có bài riêng về cách tránh lộ API key khi dùng AI coding agent. Nếu muốn theo dõi các công cụ mới khác trong tháng, bạn có thể đọc bản tin lập trình AI đầu tháng 11/2026.

Câu hỏi thường gặp

Modern Web Guidance có mất phí không?

Không. Dự án mã nguồn mở theo giấy phép Apache-2.0. Bạn chỉ trả phí cho agent hoặc mô hình AI bạn đang dùng như bình thường.

Tôi dùng Cursor thì có cài được không?

Kho mã có sẵn thư mục cấu hình cho Cursor, nhưng README không ghi lệnh cài riêng cho Cursor. Bạn có thể thử qua Vercel Skills CLI (npx skills add GoogleChrome/modern-web-guidance) hoặc trình cài tương tác và kiểm tra lại trong phần cài đặt của Cursor.

Skill có làm tốn thêm nhiều token không?

Phần mô tả skill khoảng 205 token. Nội dung hướng dẫn chỉ được nạp khi agent thật sự cần cho việc đang làm, và nhóm phát triển cho biết họ đã cắt bớt những phần mô hình đã biết sẵn để tiết kiệm token.

Dự án React hoặc Next.js có dùng được không?

Có. Hướng dẫn tập trung vào HTML, CSS và API của trình duyệt, những thứ dùng chung cho mọi framework. Bài thử nghiệm của LogRocket cũng làm trên ứng dụng Next.js.

Có cần biết tiếng Anh để dùng không?

Bạn ra lệnh cho agent bằng tiếng Việt như bình thường. Agent tự tạo câu truy vấn tiếng Anh để tìm hướng dẫn phía sau. Chỉ khi tự chạy lệnh search bằng tay thì bạn nên gõ mô tả tiếng Anh.

Kết luận

Modern Web Guidance 1.0 giải quyết đúng một điểm yếu dai dẳng của AI khi làm web: thói quen viết code cũ, nặng và kém trợ năng. Với việc có thêm Edge, Firefox và MDN cùng quản lý, có bảng eval công khai và lệnh legacy-scan để rà dự án cũ, đây là một công cụ đáng cài cho bất kỳ ai đang vibe code web, đặc biệt là người mới chưa đủ kinh nghiệm để tự nhận ra code nào đã lỗi thời.

Dù vậy, hãy xem nó như cuốn sổ tay giúp agent làm tốt hơn, không phải tấm vé miễn kiểm tra. Bạn vẫn cần đọc diff, thử trên trình duyệt thật và giữ thói quen không đưa thông tin bí mật vào câu lệnh.

Bạn đã thử cài Modern Web Guidance cho Claude Code, Codex hay Copilot chưa, và agent có viết khác đi không? Hãy chia sẻ trong phần bình luận, và theo dõi mmo.vn để cập nhật các công cụ lập trình AI mới nhất.

Nguồn tham khảo

Mở kho mẫu sao chép