Chọn trong số các kỹ năng Hướng dẫn về web hiện đại được liệt kê để phù hợp với giai đoạn hiện tại của bạn trong vòng đời phát triển web, từ việc tạo kiểu ban đầu đến việc triển khai bảo mật cuối cùng.
Các lĩnh vực cốt lõi của web
Các công cụ điều phối giúp bạn tinh chỉnh và tập trung vào công việc theo chuyên môn trên web.
accessibility
/modern-web-guidance accessibility
Đóng vai trò là hướng dẫn kiểm tra tập trung để đánh giá, khắc phục và triển khai các mẫu hỗ trợ tiếp cận hiệu quả trên toàn bộ ứng dụng của bạn.
Xem kỹ năng accessibility trên GitHub
performance
/modern-web-guidance performance
Giúp bạn tối ưu hoá Core Web Vitals, giảm độ trễ thời gian tải trang và cải thiện khả năng phản hồi đối với hoạt động đầu vào của người dùng.
Xem kỹ năng performance trên GitHub
user-experience
/modern-web-guidance user-experience
Đóng vai trò là bộ công cụ giao diện người dùng (UI) để nhanh chóng triển khai các phần tử tuỳ chỉnh thích ứng, chuyển đổi mượt mà và các mẫu tạo kiểu hiện đại.
Xem kỹ năng user-experience trên GitHub
Công nghệ web
Những kỹ năng cốt lõi này cung cấp các khối xây dựng thiết yếu cho mọi ứng dụng hiện đại, đảm bảo dự án của bạn bắt đầu bằng các phương pháp hay nhất hiện đại, có tính đến HTML ngữ nghĩa, tốc độ và khả năng tương tác.
html
/modern-web-guidance html
Hướng dẫn định hướng hành động cho cấu trúc HTML hiện đại, ngữ nghĩa, API tương tác gốc (Hộp thoại, Cửa sổ bật lên, Chi tiết), quản lý tiêu điểm và mức độ ưu tiên tài nguyên. Hãy tham khảo hướng dẫn này khi cấu trúc hoá tài liệu web, triển khai lớp phủ gốc hoặc tối ưu hoá thứ tự tải tài nguyên.
css
/modern-web-guidance css
Nguyên tắc hướng đến hành động cho cấu trúc, bố cục và hiệu suất CSS hiện đại. Hãy tham khảo hướng dẫn này khi tạo kiểu, quản lý hệ thống thiết kế hoặc tối ưu hoá việc hiển thị trên web.
css-layout
/modern-web-guidance css-layout
Bố cục CSS hiện đại như flexbox, lưới, lưới con, truy vấn vùng chứa, vị trí neo và kích thước nội tại. Hãy sử dụng kỹ năng này khi thiết kế các thành phần giao diện người dùng hoặc bố cục trang thích ứng.
Xem kỹ năng css-layout trên GitHub
forms
/modern-web-guidance forms
Các phương pháp hay nhất để tạo biểu mẫu trên web dễ sử dụng, an toàn và dễ truy cập. Hãy tham khảo hướng dẫn này khi tạo hoặc sửa đổi biểu mẫu, dữ liệu đầu vào và quy trình gửi.
cpp-on-the-web
/modern-web-guidance cpp-on-the-web
Biên dịch C và C++ cho web hiện đại bằng WebAssembly. Hãy sử dụng kỹ năng này khi bạn cần chuyển mã C++, tạo thư viện C++ bằng Emscripten hoặc thiết lập các thành phần C++ hiệu suất cao trong trình duyệt.
Xem kỹ năng cpp-on-the-web trên GitHub
Các chức năng của trình duyệt (chọn sử dụng)
Những kỹ năng này giúp bạn phát triển các tiện ích Chrome tuân thủ các tiêu chuẩn hiện đại như Manifest V3 và đơn giản hoá việc xuất bản lên Cửa hàng Chrome trực tuyến bằng cách giúp bạn chuẩn bị siêu dữ liệu, chính sách quyền riêng tư và lý do cần có quyền. Các kỹ năng này là không bắt buộc và không được bật theo mặc định.
chrome-extensions
/modern-web-guidance chrome-extensions
Tạo các tiện ích của Chrome tuân thủ và bảo mật theo Manifest V3 để tránh các sai lầm thường gặp về vòng đời của trình chạy dịch vụ và hộp cát. Để chọn sử dụng, bạn cần chỉ định kỹ năng chrome-extensions:
npx skills add GoogleChrome/modern-web-guidance --skill chrome-extensions
Xem kỹ năng chrome-extensions trên GitHub
Bảo mật, độ tin cậy và danh tính
Những kỹ năng này tập trung vào việc tạo dựng lòng tin của người dùng bằng cách bảo mật các ứng dụng khỏi những lỗ hổng bảo mật phía máy khách như XSS thông qua tiêu đề HTTP phòng thủ và tính năng cách ly nguồn gốc. Nhà phát triển cũng có thể phát triển quy trình xác thực bằng khoá truy cập, giảm thiểu hoạt động theo dõi của bên thứ ba và sử dụng các kỹ năng để chuyển thư viện C/C++ sang các mô-đun WebAssembly.
security
/modern-web-guidance security
Nguyên tắc bảo mật phòng ngừa dành cho nhà phát triển web (XSS, CSP, Cookie, Cơ chế cách ly trên nhiều nguồn). Hãy sử dụng kỹ năng này để hướng dẫn quy trình kiểm tra, thử nghiệm và triển khai các chính sách bảo mật một cách an toàn.
Xem kỹ năng security trên GitHub
passkeys
/modern-web-guidance passkeys
Hướng dẫn toàn diện và các nguyên tắc chung để triển khai WebAuthn và khoá truy cập trong các ứng dụng web. Hãy sử dụng hướng dẫn này khi xử lý quy trình đăng ký, xác thực, quản lý hoặc xác thực lại khoá truy cập.
Xem kỹ năng passkeys trên GitHub
privacy
/modern-web-guidance privacy
Các nguyên tắc hướng đến hành động dành cho nhà phát triển web để triển khai quyền riêng tư theo thiết kế, giảm tối đa việc thu thập dữ liệu, kiểm tra của bên thứ ba và xử lý dữ liệu an toàn. Hãy sử dụng kỹ năng này khi thiết kế ứng dụng, tích hợp các dịch vụ bên thứ ba, xử lý dữ liệu người dùng hoặc định cấu hình tiêu đề bảo mật.
Xem kỹ năng privacy trên GitHub
Hệ thống tác nhân
Những kỹ năng này giúp thu hẹp khoảng cách giữa ứng dụng web và quy trình công việc AI của bạn bằng WebMCP. Bằng cách hiển thị chức năng trình duyệt phía máy khách dưới dạng các công cụ tương tác, bạn có thể hướng dẫn các tác nhân AI tương tác trực tiếp với các tính năng của ứng dụng.
webmcp
/modern-web-guidance webmcp
Triển khai WebMCP để hiển thị chức năng trình duyệt phía máy khách dưới dạng các công cụ tương tác cho các tác nhân AI.
Xem kỹ năng webmcp trên GitHub
Các bước tiếp theo
Giờ bạn đã hiểu về Hướng dẫn về web hiện đại, hãy tự mình thử nghiệm! Khám phá các tính năng và trường hợp sử dụng được hỗ trợ trong Hướng dẫn về web hiện đại, đồng thời dùng thử một số câu lệnh mẫu để bắt đầu.