Modern Web Guidance



Modern Web Guidance là một bộ kỹ năng tích hợp kiến thức chuyên môn về nền tảng web, các phương pháp hay nhất và dữ liệu về khả năng tương thích của trình duyệt ngay vào các tác nhân lập trình của bạn.

Cài đặt bằng Giao diện dòng lệnh (CLI) modern-web-guidance (nên dùng):

npx modern-web-guidance@latest install
Bắt đầu Xem trên GitHub

Hoạt động với tác nhân lập trình AI mà bạn muốn sử dụng

Bạn có thể sử dụng Modern Web Guidance với các tác nhân lập trình AI mà bạn yêu thích, đảm bảo bạn có thể xem hướng dẫn về các phương pháp hay nhất cho web hiện đại trong quy trình làm việc mà bạn ưu tiên.
Xem tất cả các lựa chọn cài đặt

Cài đặt Modern Web Guidance trong dự án của bạn bằng cách sử dụng Kỹ năng tác nhân của Vercel:

npx skills add GoogleChrome/modern-web-guidance

Cài đặt Modern Web Guidance từ trình bổ trợ Claude Code:

claude plugin install modern-web-guidance@claude-plugins-official

Cài đặt các kỹ năng Modern Web Guidance cho Copilot CLI:

# 1. Add the marketplace:
/plugin marketplace add GoogleChrome/modern-web-guidance
# 2. Install the plugin
/plugin install modern-web-guidance@googlechrome

Cài đặt các kỹ năng Modern Web Guidance cho Antigravity CLI:

agy plugin install https://github.com/GoogleChrome/modern-web-guidance
Xem phiên Modern Web Guidance tại Google I/O để tìm hiểu thêm về các kỹ năng và cách các kỹ năng này cải thiện quy trình phát triển web sử dụng AI.
Xem ngay

Lời nhắc để mang lại trải nghiệm tốt hơn cho người dùng

Hãy thử một vài câu lệnh mẫu sau đây để gọi Modern Web Guidance trong quy trình lập trình sử dụng AI nhằm xây dựng các tính năng mới, hiện đại hoá mã cũ và tăng tốc ứng dụng. 
Create an accordion-style stats component that smoothly animates on open and close.
 
Build a tab bar with a sliding highlight that tracks active items using CSS Anchor Positioning.
 
Design a dashboard card that uses container queries to adapt its layout to its own width.
 
Update legacy modal window implementations to use the <dialog> element and animate them using modern CSS features.
 
Migrate legacy tooltips to use the Popover API and CSS Anchor Positioning.
 
Implement a passkey-based login flow using the latest WebAuthn features.
 
Implement a starter Content Security Policy (CSP) without breaking my app.
 
Perform a security audit of my site and suggest improvements.
 
Set up my app to begin preloading pages when users hover over important links.
 
My app has lots of long tasks, and its INP is affected. Help me fix it.
 
Help me improve my app's LCP.
Khám phá cách hướng dẫn trợ lý lập trình AI tạo ra mã web tiên tiến, có khả năng tương tác! Trong lớp học lập trình giới thiệu này, bạn sẽ kiểm tra một ứng dụng web cũ và sử dụng công cụ Modern Web Guidance để nhắc các tác nhân áp dụng các phương pháp hay nhất hiện đại. Tìm hiểu cách đặt mục tiêu cho trình duyệt Baseline, tối ưu hoá Core Web Vitals và chuyển đổi kết quả chung của AI thành các giải pháp web hiệu suất cao.
Bắt đầu
Kết hợp Chrome DevTools cho tác nhân với các kỹ năng của Modern Web Guidance để cải thiện quy trình phát triển web. Chạy quy trình kiểm tra hiệu suất theo thời gian thực, kiểm tra cây hỗ trợ tiếp cận và ghi lại nhật ký bảng điều khiển, sau đó tự động áp dụng các bản sửa lỗi chính xác cho mã web hiện đại.
Tìm hiểu thêm

Tìm hiểu cách đóng góp

Bạn có ý tưởng về cách cải thiện Modern Web Guidance? Tìm hiểu cách bạn có thể đóng góp!
Tìm hiểu thêm