Hướng dẫn về web hiện đại là một bộ kỹ năng luôn được cập nhật và được chuyên gia kiểm chứng, hướng dẫn các tác nhân lập trình AI của bạn trong nhiều trường hợp sử dụng phổ biến để tạo ra trải nghiệm web hiện đại, dễ tiếp cận, hiệu quả và an toàn.

Cài đặt bằng 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 Hướng dẫn về web hiện đại với các tác nhân lập trình AI mà mình yêu thích, nhờ đó, bạn có thể truy cập vào hướng dẫn về các phương pháp hay nhất cho web hiện đại trong quy trình công việc mà mình muốn.
Xem tất cả các lựa chọn cài đặt

Cài đặt Hướng dẫn về web hiện đại trong dự án của bạn bằng Kỹ năng của tác nhân của Vercel:

npx skills add GoogleChrome/modern-web-guidance

Cài đặt các kỹ năng Hướng dẫn về web hiện đại cho mã Claude:

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

Cài đặt các kỹ năng Hướng dẫn về web hiện đại 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 Hướng dẫn về web hiện đại trong Gemini CLI:

gemini extensions install https://github.com/GoogleChrome/modern-web-guidance --auto-update

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 hướng dẫn về web hiện đại trong quy trình lập trình sử dụng AI nhằm tạo các tính năng mới, hiện đại hoá mã cũ và tăng tốc ứng dụng của bạn. 
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.
Kết hợp Chrome DevTools cho tác nhân phần mềm với các kỹ năng Hướng dẫn về web hiện đại để cải thiện quy trình phát triển web của bạn. Chạy các 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 Hướng dẫn về web hiện đại? Tìm hiểu cách bạn có thể đóng góp!
Tìm hiểu thêm