Hướng dẫn Web hiện đại

Nó làm được gì

Trước khi viết code frontend, Claude sẽ gọi package npm modern-web-guidance để tìm hướng dẫn tiêu chuẩn web mới nhất phù hợp với tác vụ.

• search "<truy vấn>" để tìm các hướng dẫn liên quan kèm điểm tương đồng
• retrieve "<id>" để lấy toàn văn hướng dẫn: các bước triển khai, dữ liệu hỗ trợ trình duyệt, chiến lược fallback
• Đối chiếu code đã tạo với hướng dẫn để bảo đảm áp dụng đúng mẫu hiện đại và fallback
• Dựa trên Baseline để quyết định có cần fallback hay không, và gợi ý ghi chính sách hỗ trợ trình duyệt vào CLAUDE.md/AGENTS.md

Phạm vi gồm modal/popover, anchor positioning, container queries, :has(), View Transitions, animation theo scroll, tối ưu LCP/INP, content-visibility, truy cập filesystem, WebUSB... Kỹ năng nêu rõ KHÔNG kích hoạt cho backend, SQL, Docker, CI/CD.

Phù hợp với ai

• Lập trình viên frontend chán việc AI đề xuất mẫu CSS/JS đã lỗi thời
• Người muốn kiểm tra xem tính năng có sẵn của trình duyệt đã đủ trước khi thêm thư viện
• Nhóm làm React/Vue/Angular muốn chuẩn hóa layout và style theo tiêu chuẩn mới
• Dự án cần chính sách hỗ trợ trình duyệt và fallback nhất quán

Ví dụ sử dụng

1. "Ảnh hero tải chậm" → tìm hướng dẫn tối ưu ưu tiên ảnh LCP bằng Fetch Priority
2. "Tạo dropdown neo vào nút" → gợi ý Popover API + CSS anchor positioning thay vì thư viện tính toạ độ JS
3. "Thêm hiệu ứng chuyển trang" → lấy hướng dẫn View Transitions và triển khai theo lối tăng cường tiệm tiến
4. "Trang danh sách dài bị giật" → áp dụng content-visibility và hidden="until-found" để hoãn render

Hãy đọc hướng dẫn trong tệp này và làm theo để giúp mình:
https://raw.githubusercontent.com/aiskillstore/marketplace/HEAD/pending/googlechrome/modern-web-guidance/SKILL.md

Mình muốn: (viết việc bạn cần ở đây)

Hãy cài skill mình tìm thấy trên Claude Skill Mart.
Copy thư mục pending/googlechrome/modern-web-guidance từ repo GitHub aiskillstore/marketplace vào ~/.claude/skills/modern-web-guidance/ của mình.
Sau khi cài xong, cho mình biết skill này làm được gì trong một câu.