Nếu bạn đang vibe code bằng Claude Code, Cursor hay Copilot, chắc bạn đã gặp cảnh này: nhờ AI làm một cái popup, nó kéo nguyên thư viện jQuery modal vào. Nhờ làm tooltip, nó cài thêm Popper.js. Nhờ làm hiệu ứng fade khi cuộn trang, nó viết 80 dòng JavaScript với scroll listener. Code chạy được, nhưng nặng, chậm và cũ.
Lý do nằm ở dữ liệu huấn luyện. Theo nhóm phát triển, các coding agent thường mặc định dùng pattern cũ vì dữ liệu huấn luyện của LLM chứa khối lượng rất lớn code legacy, dẫn tới việc sinh JavaScript cồng kềnh cho những tác vụ mà nền tảng web hiện nay đã có giải pháp native hiệu năng cao.
Modern Web Guidance là câu trả lời của Google cho vấn đề đó. Bài này mình sẽ giải thích nó là gì, cài thế nào, và quan trọng nhất là áp dụng vào những stack anh em Việt Nam đang dùng nhiều: WordPress, WooCommerce, Laravel, Next.js.
Modern Web Guidance là gì
Đây là bộ skill nhúng chuyên môn về web platform, best practice và dữ liệu tương thích trình duyệt trực tiếp vào coding agent. Dự án được đội Google Chrome, Microsoft Edge và cộng đồng web cùng hỗ trợ, hiện đang ở bản preview, mã nguồn mở giấy phép Apache 2.0.
Về quy mô, bộ skill bao phủ 103 tính năng web hiện đại và 131 use case thực tế của lập trình viên, chia thành các nhóm: CSS và layout, form, hiệu năng, accessibility, bảo mật (passkey), hiệu ứng giao diện, và cả Built-in AI chạy ngay trên trình duyệt.
Điểm mình đánh giá cao là cách nó hoạt động:
- Khi bạn giao task liên quan đến frontend, agent tự kích hoạt skill.
- Agent chạy lệnh search, công cụ khớp câu hỏi với guide phù hợp nhất bằng một model TensorFlow.js chạy offline trên CPU, không gọi mạng, không cần API key.
- Agent lấy guide về, nạp đúng pattern code, các lỗi hay gặp và phương án fallback vào context.
Nghĩa là nó không nhồi cả đống tài liệu vào context mỗi lần. Các guide được thiết kế tiết kiệm token, nhóm phát triển chạy eval để cắt bỏ phần nội dung mà model vốn đã biết.
Có thực sự hiệu quả không
Có số liệu hẳn hoi. Nhóm phát triển chạy agent trên hơn 130 task thực tế, so sánh khi có và không có skill. Ở lần đo ngày 24/8/2026:
| Agent | Không có skill | Có skill | Cải thiện |
|---|---|---|---|
| Claude Code (Opus 5) | 57% | 92% | +35 điểm |
| Antigravity (Gemini) | 60% | 89% | +29 điểm |
| Codex CLI | 60% | 81% | +21 điểm |
Cách đo cũng đáng tin: prompt được viết như yêu cầu thật của lập trình viên, kiểu "làm ảnh tải nhanh hơn", không nêu tên API, để kiểm tra agent có tự tìm ra guide phù hợp hay không. Kết quả được chấm bằng Playwright chạy trên trình duyệt thật chứ không phải AI tự chấm AI.
Với Claude Code, mức cải thiện trên 30 điểm là con số rất lớn. Đây là lý do mình khuyên anh em vibe code nên cài.
Cài đặt trong 1 phút
Cách khuyến nghị, có tự cập nhật:
npx modern-web-guidance@latest installNếu bạn làm Chrome extension, thêm cờ --choose để chọn thêm skill pack riêng cho extension.
Cài trực tiếp trong Claude Code:
/plugin marketplace add GoogleChrome/modern-web-guidance
/plugin install modern-web-guidance@googlechrome
/reload-pluginsCursor, Copilot CLI, Gemini CLI, Antigravity đều có lệnh cài riêng trên trang GitHub của dự án. Muốn thử trước khi cài:
npx modern-web-guidance@latest search "animate a dialog modal backdrop"Về quyền riêng tư: Google thu thập số lượt cài, ID guide được truy xuất và câu truy vấn search do agent tạo ra, không thu thập prompt gốc của người dùng. Nếu muốn tắt hẳn, thêm dòng sau vào ~/.bashrc hoặc ~/.zshrc:
export DISABLE_TELEMETRY=1Lưu ý biến này đồng thời tắt telemetry của Claude Code, không ảnh hưởng tính năng.
Áp dụng cho WordPress
WordPress chiếm phần lớn website Việt Nam, và cũng là nơi code "mì ăn liền" nhiều nhất. Theme Flatsome, Elementor, cộng thêm cả chục plugin, mỗi cái nhúng một thư viện JS riêng. Điểm PageSpeed mobile đỏ lòm là chuyện thường.
Những việc bạn có thể giao cho agent khi làm child theme hoặc plugin:
Tối ưu ảnh LCP
Ảnh banner đầu trang thường bị lazy load nhầm hoặc tải chậm. Guide optimize-image-priority hướng agent dùng fetchpriority="high" cho ảnh LCP và hạ ưu tiên ảnh không quan trọng. Prompt mẫu:
Trong child theme Flatsome này, ảnh hero ở trang chủ đang làm LCP chậm.
Sửa template để ảnh LCP được ưu tiên tải, các ảnh dưới fold hạ ưu tiên.
Không cài thêm plugin.Menu mobile, popup, tooltip không cần jQuery
Popover API, <dialog> và Anchor Positioning đã có sẵn trong trình duyệt. Guide navigation-drawer và declarative-dialog-popover-control giúp agent viết menu trượt, popup đăng ký nhận tin mà gần như không cần JS. Ít script hơn nghĩa là INP tốt hơn.
Accordion FAQ vẫn được Google index
Rất nhiều site giấu nội dung FAQ trong tab, accordion bằng display:none. Guide search-hidden-content dùng hidden="until-found" để nội dung ẩn vẫn tìm được bằng Ctrl+F và vẫn được công cụ tìm kiếm index. Đây là điểm cộng SEO ít người để ý.
Hiệu ứng chuyển trang mượt
Guide cross-document-transitions cho phép làm hiệu ứng chuyển trang kiểu app trên site WordPress truyền thống (multi-page), chỉ bằng vài dòng CSS.
Áp dụng cho WooCommerce
Với web bán hàng, mỗi 100ms đều là tiền. Mấy guide đáng dùng nhất:
Form checkout chuẩn autofill
Guide autofill-address-form và autofill-payment-form hướng agent gắn đúng thuộc tính autocomplete. Khách điền địa chỉ một chạm thay vì gõ tay, tỷ lệ bỏ giỏ giảm rõ. Nếu bạn custom checkout WooCommerce, đây là việc nên làm đầu tiên.
Báo lỗi form đúng lúc
Guide validate-input-after-interaction dùng :user-invalid để chỉ báo lỗi sau khi khách đã nhập xong, không hiện chữ đỏ ngay khi vừa mở trang. Trải nghiệm này ảnh hưởng trực tiếp tới conversion.
Preload trang sản phẩm
Guide improve-next-page-load-performance dùng Speculation Rules để trình duyệt tải trước trang khi khách di chuột vào sản phẩm. Từ WordPress 6.8, core đã tích hợp sẵn speculative loading, nên agent có thể tinh chỉnh cấu hình đó thay vì cài plugin nặng nề.
Hiệu ứng giỏ hàng
Guide group-element-transitions xử lý đúng case xóa sản phẩm khỏi giỏ và các sản phẩm còn lại trượt vào vị trí mới.
Prompt mẫu:
Audit trang checkout WooCommerce của mình: autocomplete attributes,
cách hiển thị lỗi validation, và INP khi đổi phương thức vận chuyển.
Chỉ dùng tính năng Baseline Widely Available, đề xuất thay đổi trước khi sửa.Áp dụng cho Laravel
Dân Laravel Việt Nam thường đi Blade + Livewire hoặc Inertia + Vue/React. Phần backend thì Laravel lo rất tốt, nhưng phần frontend hay bị bỏ bê. Modern Web Guidance lấp đúng chỗ đó.
Trang quản trị nặng dữ liệu
Admin panel Filament, dashboard báo cáo, bảng đơn hàng hàng nghìn dòng dễ bị giật khi thao tác. Guide interactions-in-complex-layouts và defer-rendering-heavy-content dùng content-visibility để trình duyệt bỏ qua render phần chưa nhìn thấy. Guide break-up-long-tasks dùng scheduler.yield() để xử lý vòng lặp nặng mà không khóa giao diện.
Đăng nhập bằng passkey
Có hẳn bộ 6 guide về passkey: đăng ký, đăng nhập, quản lý, xác thực lại trước thao tác nhạy cảm. Kết hợp với package WebAuthn phía Laravel, bạn có luồng đăng nhập không mật khẩu cho hệ thống quản trị hoặc cổng khách hàng. Với hệ thống billing, hosting, đây là lớp bảo mật đáng đầu tư.
Xử lý ngày giờ, chu kỳ thanh toán ở frontend
Guide manage-recurring-intervals và coordinate-global-events dùng Temporal API để tính chu kỳ gia hạn, xử lý case cộng một tháng vào ngày 31/1 hoặc múi giờ của khách nước ngoài. Ai làm hệ thống subscription đều từng dính bug này.
Toast thông báo
Livewire hay bắn flash message, guide persistent-toast-notifications giúp agent làm toast xếp chồng, không che nội dung, dùng Popover API native.
Nếu bạn đang dùng Laravel Boost cho Claude Code, hai bộ này bổ trợ nhau: Boost lo phần framework và backend, Modern Web Guidance lo phần trình duyệt.
Áp dụng cho Next.js, React, Vue
Với SPA, mấy guide đáng chú ý là same-document-transitions (hiệu ứng ảnh sản phẩm phóng to từ thumbnail sang trang chi tiết), faster-spa-view-transitions và move-dom-element-without-losing-state dùng moveBefore() để di chuyển phần tử mà không mất trạng thái, rất hữu ích khi có iframe video hoặc form đang nhập dở.
Ai làm sản phẩm có tính năng AI thì xem thêm nhóm Built-in AI: dịch, tóm tắt, nhận diện ngôn ngữ chạy ngay trên máy người dùng, không tốn tiền API. Nhóm WebMCP cũng đáng theo dõi: biến form HTML thành tool để AI agent của người dùng thao tác được trên website của bạn.
Những điểm cần lưu ý khi dùng ở thị trường Việt Nam
Nói thẳng, bộ skill này không phải phép màu. Có mấy điểm bạn cần biết:
- Trình duyệt in-app: rất nhiều traffic Việt Nam đến từ trình duyệt nhúng trong Zalo và Facebook, các webview này thường cập nhật chậm hơn Chrome và Safari. Hãy ghi rõ trong prompt "chỉ dùng tính năng Baseline Widely Available" với các tính năng quan trọng như checkout, đăng nhập. Hiệu ứng trang trí thì có thể dùng tính năng mới hơn vì trình duyệt cũ sẽ bỏ qua mà không lỗi.
- Nó chỉ lo frontend: PHP, query database, cấu hình server, cache phía máy chủ không nằm trong phạm vi. Website chậm do hosting yếu hay database không index thì skill này không cứu được.
- Đang là bản preview: nội dung thay đổi liên tục, nên cài bằng lệnh
npxđể tự cập nhật, và cập nhật bằngnpx modern-web-guidance@latest update. - Skill chạy với quyền của agent: bộ này do Google phát hành, mã nguồn mở nên yên tâm, nhưng thói quen đọc qua skill trước khi cài là thói quen tốt với mọi skill bên thứ ba.
Workflow mình đề xuất
- Cài skill và bật auto update.
- Chọn một trang có traffic cao nhất (trang chủ, trang sản phẩm bán chạy), đo PageSpeed Insights để có số liệu trước.
- Giao agent audit LCP, INP và form trên trang đó, yêu cầu đề xuất trước khi sửa.
- Review từng thay đổi, test trên điện thoại thật và trong trình duyệt Zalo.
- Đo lại, so sánh, rồi mới nhân rộng ra toàn site.
Nếu kết hợp thêm Chrome DevTools MCP, agent có thể chạy audit hiệu năng theo thời gian thực, kiểm tra accessibility tree, đọc console log rồi tự áp dụng bản sửa, vòng lặp đo và sửa sẽ nhanh hơn nhiều.
Kết
Vibe code không có nghĩa là chấp nhận code tạm bợ. Với vài lệnh cài đặt, AI của bạn sẽ viết code web theo chuẩn hiện tại thay vì chuẩn của 10 năm trước: nhẹ hơn, nhanh hơn, dễ bảo trì hơn và điểm Core Web Vitals đẹp hơn.
Code tối ưu rồi thì hạ tầng cũng cần theo kịp. Nếu bạn cần VPS để chạy Claude Code, n8n hay deploy dự án Laravel, WordPress, bên mình có sẵn VPS vị trí Việt Nam và US tại tnd.vn. Cần tư vấn, gọi hotline 0225.999.6666.
