Modern Web Guidance adalah kemampuan agen yang menerapkan praktik terbaik modern ke alur kerja coding yang dibantu AI. Kemampuan ini membantu mengarahkan agen coding Anda agar tidak menggunakan solusi lama untuk masalah pengembangan web umum, dan mengarahkannya ke solusi yang harus menggunakan fitur platform web yang lebih baru.
Penginstalan
Kemampuan Modern Web Guidance dapat diinstal di berbagai agen, sehingga Anda dapat mempertahankan alur kerja pilihan Anda sekaligus mendapatkan manfaat dari panduan yang diberikan.
modern-web-guidance CLI (direkomendasikan)
Metode penginstalan yang direkomendasikan adalah melalui modern-web-guidance CLI yang dibuat oleh tim Chrome. Menginstal kemampuan melalui modern-web-guidance CLI akan otomatis memperbarui kemampuan. Anda dapat menginstal dari modern-web-guidance CLI seperti berikut:
npx modern-web-guidance@latest install
Atau, jika Anda mengembangkan ekstensi Chrome, sebaiknya gunakan perintah berikut:
npx modern-web-guidance@latest install --choose
Perintah ini menjalankan wizard interaktif untuk menginstal kemampuan sesuai preferensi Anda.
Jika Anda lebih suka menggunakan kemampuan Modern Web Guidance tanpa menggunakan modern-web-guidance CLI, baca terus untuk mempelajari cara menginstalnya untuk agen pilihan Anda.
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 kemampuan Modern Web Guidance di Pengelola Kemampuan, yang tersedia di bagian Settings > AI Assistant > Skills. Pilih kemampuan untuk membuka halaman detailnya. Untuk menginstal kemampuan, 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
Menginstal Modern Web Guidance untuk digunakan dengan Claude Code 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
Angsa
goose plugin install https://github.com/GoogleChrome/modern-web-guidance --auto-update
Mempelajari sebelum penginstalan
Evaluasi library panduan kemampuan Modern Web Guidance sebelum penginstalan dengan menelusuri 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"
Perintah 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 sasaran 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?
Kemampuan Modern Web Guidance memberikan manfaat bagi developer web dibandingkan model AI tanpa bantuan karena tiga alasan yang berbeda:
- Agen coding AI cenderung menggunakan solusi lama dan usang 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 usang dan tidak mempertimbangkan persyaratan project atau kriteria dukungan browser—bukan menyesuaikan panduan dengan persyaratan Dasar pengukuran project tertentu.
Kemampuan Modern Web Guidance mengatasi kekurangan ini, dan memastikan bahwa 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, kemampuan ini adalah kemampuan agen tunggal 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 memecah tugas yang panjang, penjadwalan tugas latar belakang, dan prioritas pemuatan gambar. - Formulir: Kolom input yang dapat diubah ukurannya secara otomatis (
field-sizing: content), dan gaya validasi yang 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 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 Anda 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 selalu diinstruksikan untuk memuatnya secara kondisional sehingga hanya dikenakan biaya jika diperlukan.
Bagaimana akurasi dipastikan?
Setiap kasus penggunaan di Modern Web Guidance berisi panduan, dan sebagian besar kasus penggunaan terus dikalibrasi untuk mengarahkan agen AI ke output berkualitas.
Kasus penggunaan yang dikalibrasi menggunakan 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 dan mengharapkan tingkat kelulusan 0%.
- Jika implementasi "benar" dan implementasi yang sengaja salah gagal menghasilkan tingkat kelulusan 100% dan 0%, 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 kemampuan Modern Web Guidance untuk menyelesaikan tugas. Evaluasi lain (eksperimen) membahas tugas yang sama menggunakan kemampuan Modern Web Guidance.
Evaluasi kami berjalan setiap hari 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. Anda kini dapat mempelajari kemampuan dan kasus penggunaan yang disediakan oleh Modern Web Guidance.