Mulai menggunakan Panduan Web Modern

Modern Web Guidance adalah serangkaian keterampilan yang menyematkan keahlian platform web, praktik terbaik, dan data kompatibilitas browser langsung ke agen coding Anda. Hal ini membantu mengarahkan agen coding Anda agar tidak menggunakan pola lama, dan beralih ke solusi yang memanfaatkan kecanggihan dan kemampuan platform web modern.

Penginstalan

Modern Web Guidance dapat diinstal dan digunakan dengan agen coding apa pun yang mendukung keahlian.

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 ini:

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 skill sesuai preferensi Anda.

Jika Anda lebih suka menginstal Modern Web Guidance tanpa menggunakan modern-web-guidance CLI, lihat petunjuk khusus agen berikut. Perlu diperhatikan bahwa sebagian besar opsi ini tidak mendukung pembaruan otomatis.

Antigravity

Download Antigravity dan aktifkan "modern-web-guidance" selama alur penginstalan, atau dari halaman Setelan di bagian Penyesuaian, 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 Skill Manager, yang tersedia di bagian Settings > Asisten AI > Skills. Pilih keterampilan untuk membuka halaman detailnya. Untuk menginstal skill, klik tombol Install untuk menerapkannya ke instance IDE saat ini.

Catatan: Anda dapat memilih target penginstalan yang berbeda, yang juga tersedia di menu Install.

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. Memuat ulang plugin:

/reload-plugins

Codex

codex plugin marketplace add GoogleChrome/modern-web-guidance
codex plugin add modern-web-guidance@googlechrome

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

Grok

grok plugin install https://github.com/GoogleChrome/modern-web-guidance --trust

Kimi Code

/plugins install https://github.com/GoogleChrome/modern-web-guidance

Menjelajahi sebelum penginstalan

Evaluasi library panduan 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"

Tindakan ini akan menghasilkan 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":"ui-behaviors","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":"ui-behaviors","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":"ui-behaviors","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 mencerminkan sasaran Anda, dan 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 panduan lainnya, ganti animate-to-from-top-layer dengan ID panduan yang valid.

Mengapa harus menggunakan Modern Web Guidance?

Modern Web Guidance memberikan manfaat bagi developer web dibandingkan model AI tanpa bantuan karena tiga alasan berbeda:

1. Agen coding AI cenderung menggunakan solusi lama yang sudah usang untuk masalah pengembangan web modern. Solusi ini sering kali berisi JavaScript untuk menyediakan fungsi bagi masalah yang lebih baik diselesaikan dengan API CSS dan HTML modern.
2. Model AI secara historis tidak mengetahui—atau memiliki informasi yang salah tentang—fitur platform web terbaru.
3. Terakhir, model AI cenderung memberikan rekomendasi usang yang tidak mempertimbangkan persyaratan project atau kriteria dukungan browser, alih-alih menyesuaikan panduan dengan persyaratan Baseline project tertentu.

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 saja 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 CLI modern-web-guidance untuk menemukan dan mengambil panduan terbaik untuk kasus penggunaan Anda.

• Pengalaman pengguna: Transisi tampilan, gaya visual scrollbar-color CSS, serta 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.yield untuk memecah tugas berdurasi lama, penjadwalan tugas latar belakang, dan penentuan prioritas pemuatan gambar.
• Formulir: Kolom input yang ukurannya otomatis disesuaikan (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: Gunakan model klien lokal di perangkat (API Deteksi Bahasa, Ringkasan, dan Terjemahan native).
• Kunci sandi: Pendaftaran, autentikasi, dan pengelolaan kunci sandi.

Berikut adalah beberapa panduan dari setiap kategori. Untuk melihat semua panduan, Anda dapat melihat daftar lengkap panduan.

Dasar pengukuran

Baseline memberikan kejelasan kepada developer tentang fitur web yang dapat dioperasikan di mesin browser utama. Jika fitur web adalah Baseline, Anda dapat memercayai tingkat kompatibilitas browser. Fitur web termasuk dalam salah satu dari tiga kategori yang ditentukan oleh Baseline:

• Ketersediaan terbatas berarti fitur ini 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 setidaknya 30 bulan atau lebih.

Meskipun Baseline adalah definisi untuk interoperabilitas fitur web, Baseline juga merupakan aspek yang dapat dikonfigurasi dari project Anda. Anda dapat memilih target Baseline, 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...>

Penting: Jika Anda menginstal Modern Web Guidance, tetapi tidak mengonfigurasi target Baseline untuk project Anda, Modern Web Guidance akan ditetapkan secara default ke Baseline Tersedia luas.

Modern Web Guidance dan penggantian fitur

Modern Web Guidance menggunakan berbagai fitur web modern. Beberapa di antaranya mungkin tersedia di Baseline Baru atau Luas, tetapi beberapa mungkin memiliki ketersediaan Terbatas. Jika suatu 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 diterapkan sebagai progressive enhancement, yang memungkinkan fitur modern digunakan di mana pun fitur tersebut didukung. Jika polyfill diperlukan untuk browser yang tidak didukung, agen selalu diinstruksikan untuk memuatnya secara bersyarat sehingga hanya dikenai biaya jika diperlukan.

Bagaimana akurasi dipastikan?

Setiap kasus penggunaan dalam Modern Web Guidance berisi serangkaian evaluasi yang terus dikalibrasi untuk memastikan output yang berkualitas.

Evaluasi kasus penggunaan menjalankan infrastruktur pengelola QA otomatis untuk menguji perilaku agen yang benar, dengan Playwright memainkan peran sentral:

1. Untuk setiap panduan, skrip Playwright dikembangkan untuk menguji apakah detail penerapan panduan diikuti—misalnya, apakah @media (prefers-reduced-motion: reduce) diamati jika diperlukan.
2. Skrip Playwright ini terus melakukan kalibrasi terhadap implementasi demo referensi yang "benar" yang mengharapkan tingkat kelulusan 100%. Di sisi lain, skrip memeriksa implementasi yang sengaja dibuat cacat dan mengharapkan tingkat kelulusan 0%.
3. Jika salah satu atau kedua implementasi yang "benar" dan sengaja dibuat cacat gagal menghasilkan tingkat kelulusan 100% dan 0%, generator akan otomatis mencoba lagi menggunakan konteks hingga kalibrasi 100% tercapai.
4. 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) menangani tugas yang sama menggunakan Modern Web Guidance.

Evaluasi kami berjalan beberapa kali per minggu dengan model dan agen coding tercanggih, sehingga memberi kami gambaran yang jelas tentang seberapa baik performa agen dengan dan tanpa panduan kami. Rata-rata, hasil awal menunjukkan peningkatan sebesar 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 agentic pilihan Anda.

Langkah berikutnya

Sekarang Anda memiliki gambaran umum tentang Modern Web Guidance, dan potensinya untuk mempermudah penerapan praktik terbaik web modern dalam alur kerja coding AI Anda. Sekarang Anda dapat mempelajari panduan yang disediakan oleh Modern Web Guidance.