Modern Web Guidance adalah sekumpulan keterampilan yang menyematkan keahlian platform web, praktik terbaik, dan data kompatibilitas browser langsung ke agen coding Anda. Hal ini membantu mengarahkan agen coding Anda dari pola lama, dan mengarahkannya ke solusi yang memanfaatkan kekuatan dan kemampuan platform web modern.
Penginstalan
Modern Web Guidance dapat diinstal dan digunakan dengan agen coding apa pun yang mendukung keterampilan.
modern-web-guidance CLI (direkomendasikan)
Metode penginstalan yang direkomendasikan adalah melalui modern-web-guidance CLI yang dibuat oleh tim Chrome. Menginstal Modern Web Guidance melalui modern-web-guidance CLI akan mengaktifkan update otomatis. Anda dapat menginstal dari modern-web-guidance CLI seperti berikut:
npx modern-web-guidance@latest install
Secara opsional, jika Anda mengembangkan ekstensi Chrome, sebaiknya gunakan perintah berikut:
npx modern-web-guidance@latest install --choose
Tindakan ini akan menjalankan wizard interaktif untuk menginstal keterampilan sesuai preferensi Anda.
Jika Anda lebih suka menginstal Modern Web Guidance tanpa menggunakan modern-web-guidance CLI, lihat petunjuk khusus agen berikut. Perhatikan bahwa sebagian besar opsi ini tidak mendukung update otomatis.
Antigravity
Download Antigravity dan aktifkan "modern-web-guidance" selama alur penginstalan, atau dari halaman Settings di bagian Customizations , lalu Build with Google Plugins.
Antigravity CLI
agy plugin install https://github.com/GoogleChrome/modern-web-guidance
Gemini CLI
gemini extensions install https://github.com/GoogleChrome/modern-web-guidance --auto-update
JetBrains WebStorm
Anda dapat menemukan Modern Web Guidance di Pengelola Keterampilan, yang tersedia di bagian Settings > AI Assistant > Skills. Pilih keterampilan untuk membuka halaman detailnya. Untuk menginstal keterampilan, klik tombol Install untuk menerapkannya ke instance IDE saat ini.
GitHub CLI
gh skill install GoogleChrome/modern-web-guidance
npx skills
npx skills add GoogleChrome/modern-web-guidance
Claude Code
claude plugin install modern-web-guidance@claude-plugins-official
Claude Code CLI
Menginstal Modern Web Guidance untuk digunakan dengan Claude Code CLI memerlukan tiga langkah:
1. Tambahkan marketplace:
/plugin marketplace add GoogleChrome/modern-web-guidance
2. Instal plugin dari marketplace:
/plugin install modern-web-guidance@googlechrome
3. Muat ulang plugin:
/reload-plugins
Copilot CLI
Menginstal Modern Web Guidance untuk digunakan dengan Copilot memerlukan dua langkah:
1. Tambahkan marketplace:
/plugin marketplace add GoogleChrome/modern-web-guidance
2. Instal plugin dari marketplace:
/plugin install modern-web-guidance@googlechrome
Goose
goose plugin install https://github.com/GoogleChrome/modern-web-guidance --auto-update
Kimi Code
/plugins install https://github.com/GoogleChrome/modern-web-guidance
Mempelajari sebelum penginstalan
Evaluasi library panduan Modern Web Guidance sebelum penginstalan dengan melakukan penelusuran menggunakan kueri atau mengambil panduan kami berdasarkan ID. Untuk melakukannya, gunakan perintah search CLI untuk menemukan ID kasus penggunaan menggunakan perintah:
npx modern-web-guidance@latest search "animate a dialog modal backdrop"
Tindakan ini akan menampilkan objek JSON di terminal Anda:
[{"id":"light-dismiss-a-dialog","description":"Create a modal dialog that can be closed via light dismiss (i.e. clicking or tapping outside of the dialog)","category":"user-experience","featuresUsed":["<dialog closedby>"],"tokenCount":1085,"similarity":0.7076},
{"id":"animate-to-from-top-layer","description":"Animate elements such as dialogs, popovers, and tooltips as they're entering/exiting the top layer.","category":"user-experience","featuresUsed":["::backdrop","<dialog>","overlay","Popover","@starting-style","transition-behavior"],"tokenCount":1541,"similarity":0.6842},
{"id":"declarative-dialog-popover-control","description":"Toggle the visibility of a dialog or popover from a button without writing JavaScript.","category":"user-experience","featuresUsed":["Invoker commands","Popover","<dialog>"],"tokenCount":2684,"similarity":0.5685},
{"id":"html","description":"Action-oriented guidelines for modern HTML architecture, semantics, native interactive APIs (Dialog, Popover, Details), focus management, and resource prioritization. Use this guide when structuring web documents, implementing native overlays, or optimizing resource loading order.","category":"html","tokenCount":5484,"similarity":0.5471},
{"id":"accessibility","description":"Actionable coding guidelines for building accessible web applications, covering semantic HTML, focus management, forms, media, and testing. Use this skill when auditing or implementing accessibility features, keyboard navigation, or ARIA.","category":"accessibility","tokenCount":7129,"similarity":0.5102}]
Dengan membaca nilai description, Anda dapat memilih id yang paling sesuai dengan target Anda, lalu menggunakan perintah retrieve:
npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"
Dalam hal ini, Markdown panduan untuk kasus penggunaan animate-to-from-top-layer akan ditampilkan di terminal. Untuk kasus penggunaan lainnya, ganti animate-to-from-top-layer dengan ID kasus penggunaan yang valid.
Mengapa menggunakan Modern Web Guidance?
Modern Web Guidance memberikan manfaat bagi developer web dibandingkan model AI tanpa bantuan karena tiga alasan berbeda:
- Agen coding AI cenderung menggunakan solusi lama dan tidak relevan untuk masalah pengembangan web modern. Solusi ini sering kali berisi JavaScript untuk menyediakan fungsi bagi masalah yang lebih baik diselesaikan oleh CSS dan HTML API modern.
- Model AI secara historis tidak mengetahui—atau memiliki informasi yang salah tentang—fitur platform web terbaru.
- Terakhir, model AI cenderung memberikan rekomendasi yang tidak relevan yang tidak mempertimbangkan persyaratan project atau kriteria dukungan browser—bukan menyesuaikan panduan dengan persyaratan Dasar pengukuran project tertentu.
Modern Web Guidance mengatasi kekurangan ini, dan memastikan alur kerja coding yang dibantu AI memiliki alat untuk mengadopsi fitur platform web yang lebih baru terlebih dahulu—dan dengan mempertimbangkan penggantian.
Apa yang ada di Modern Web Guidance?
Modern Web Guidance mencakup praktik terbaik untuk lebih dari 100 kasus penggunaan pengembangan web di beberapa disiplin inti. Di balik layar, ini adalah keterampilan agen yang menginstruksikan agen coding Anda cara memanggil modern-web-guidance CLI untuk menemukan dan mengambil panduan terbaik untuk kasus penggunaan Anda.
- Pengalaman pengguna: Transisi tampilan, gaya CSS
scrollbar-color, dan animasi masuk dan keluar. - CSS: Kueri penampung, ruang warna modern seperti
oklch, tata letak subgrid CSS,text-wrap, dan pemangkasan tinggi baris tipografi. - Performa: Diagnostik Interaction to Next Paint (INP),
scheduler.yielduntuk membagi tugas yang panjang, penjadwalan tugas latar belakang, dan prioritas pemuatan gambar. - Formulir: Kolom input ukuran otomatis (
field-sizing: content), dan gaya validasi akurat dengan:user-invalid. - Komponen UI bawaan: Kontrol langsung atas dialog, CSS Anchor Positioning untuk tooltip, dan
popover. - Aksesibilitas: Pengumuman error yang dapat diakses, dan pengelolaan fokus keyboard.
- AI bawaan: Menggunakan model klien lokal di perangkat (API Deteksi Bahasa, Ringkasan, dan Terjemahan native).
- Kunci sandi: Pendaftaran, autentikasi, dan pengelolaan kunci sandi.
Ini adalah beberapa kasus penggunaan dari setiap disiplin. Untuk melihat semua kasus penggunaan, Anda dapat melihat daftar lengkap kasus penggunaan.
Dasar pengukuran
Dasar pengukuran memberikan kejelasan kepada developer tentang fitur web mana yang dapat dioperasikan di mesin browser utama. Jika fitur web adalah Dasar pengukuran, Anda dapat mempercayai tingkat kompatibilitas browser. Fitur web termasuk dalam salah satu dari tiga kategori yang ditentukan oleh Dasar pengukuran:
- Ketersediaan terbatas berarti fitur tersebut tidak dapat dioperasikan.
- Baru tersedia berarti fitur tersebut baru-baru ini dapat dioperasikan dalam 30 bulan terakhir.
- Tersedia secara luas berarti fitur tersebut telah dapat dioperasikan selama minimal 30 bulan atau lebih.
Meskipun Dasar pengukuran adalah definisi untuk interoperabilitas fitur web, Dasar pengukuran juga merupakan aspek project Anda yang dapat dikonfigurasi. Anda dapat memilih target Dasar pengukuran, lalu mengonfigurasi project untuk menggunakannya dengan menambahkannya ke file AGENTS.md atau CLAUDE.md, misalnya:
This project's Baseline target is Baseline 2024.
<other project info...>
Modern Web Guidance dan penggantian fitur
Modern Web Guidance menggunakan berbagai fitur web modern. Beberapa di antaranya mungkin Dasar pengukuran Baru atau Tersedia secara luas, tetapi beberapa mungkin Ketersediaan terbatas. Jika fitur tidak Tersedia secara luas, panduan kasus penggunaan akan memberikan petunjuk khusus kepada agen tentang cara memastikan kompatibilitas yang lebih luas di browser yang tidak mendukung fitur tersebut. Dalam banyak kasus, penggantian diimplementasikan sebagai peningkatan progresif saat fitur modern dapat digunakan di mana pun fitur tersebut didukung. Jika polyfill diperlukan untuk browser yang tidak didukung, agen akan selalu diinstruksikan untuk memuatnya secara kondisional sehingga hanya dikenai biaya jika diperlukan.
Bagaimana akurasi dipastikan?
Setiap kasus penggunaan di Modern Web Guidance berisi serangkaian evaluasi yang terus dikalibrasi untuk memastikan output berkualitas.
Evaluasi kasus penggunaan menjalankan harness QA otomatis untuk menguji perilaku agen yang benar, dengan Playwright memainkan peran sentral:
- Untuk setiap panduan, skrip Playwright dikembangkan untuk menguji apakah detail implementasi panduan diikuti—misalnya, apakah
@media (prefers-reduced-motion: reduce)diamati jika merupakan persyaratan. - Skrip Playwright ini terus dikalibrasi terhadap implementasi demo referensi "benar" yang mengharapkan tingkat kelulusan 100%. Di sisi lain, skrip memeriksa implementasi yang sengaja salah yang mengharapkan tingkat kelulusan 0%.
- Jika implementasi "benar" dan implementasi yang sengaja salah gagal menghasilkan tingkat kelulusan 100% dan 0%, masing-masing, generator akan otomatis mencoba lagi menggunakan konteks hingga kalibrasi 100% tercapai.
- Terakhir, evaluasi menyeluruh pada aplikasi dasar diterapkan. Salah satu evaluasi ini tidak dipandu, yang merupakan kontrol, menggunakan data pelatihan default tanpa memanggil Modern Web Guidance untuk menyelesaikan tugas. Evaluasi lain (eksperimen) membahas tugas yang sama menggunakan Modern Web Guidance.
Evaluasi kami dijalankan beberapa kali per minggu dengan model dan agen coding canggih, sehingga kami mendapatkan gambaran yang jelas tentang seberapa baik performa agen dengan dan tanpa panduan kami. Rata-rata, hasil awal menunjukkan peningkatan 37 poin persentase dalam kepatuhan terhadap praktik terbaik modern saat agen dilengkapi dengan Modern Web Guidance. Namun, hasil Anda mungkin bervariasi bergantung pada persyaratan project, model, perintah yang Anda tulis, dan alat coding agen pilihan Anda.
Langkah berikutnya
Sekarang Anda memiliki ringkasan umum Modern Web Guidance, dan potensi yang dimilikinya untuk mempermudah penerapan praktik terbaik web modern dalam alur kerja coding AI Anda. Sekarang Anda dapat membaca tentang disiplin dan kasus penggunaan yang disediakan oleh Modern Web Guidance.