Panduan Web Modern adalah serangkaian keterampilan yang selalu relevan dan telah diverifikasi oleh pakar yang memandu agen coding AI Anda di berbagai kasus penggunaan umum untuk membangun pengalaman web modern yang mudah diakses, berperforma tinggi, dan aman.

Instal dengan modern-web-guidance CLI (direkomendasikan):

npx modern-web-guidance@latest install
Mulai Lihat di GitHub

Berfungsi dengan agen coding AI pilihan Anda

Panduan Web Modern dapat digunakan dengan agen coding AI favorit Anda, sehingga Anda memiliki akses ke panduan untuk praktik terbaik web modern dalam alur kerja pilihan Anda.
Melihat semua opsi penginstalan

Instal Panduan Web Modern di project Anda menggunakan Keahlian Agen Vercel:

npx skills add GoogleChrome/modern-web-guidance

Menginstal kemampuan Panduan Web Modern untuk Kode Claude:

# 1. Add the marketplace:
/plugin marketplace add GoogleChrome/modern-web-guidance
# 2. Install the plugin
/plugin install modern-web-guidance@googlechrome
# 3. Reload plugins
/reload-plugins

Instal kemampuan Panduan Web Modern untuk Copilot CLI:

# 1. Add the marketplace:
/plugin marketplace add GoogleChrome/modern-web-guidance
# 2. Install the plugin
/plugin install modern-web-guidance@googlechrome

Instal kemampuan Panduan Web Modern di Antigravity CLI:

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

Perintah untuk pengalaman pengguna yang lebih baik

Coba beberapa contoh perintah berikut untuk memanggil panduan web modern dalam alur kerja coding dengan bantuan AI Anda untuk membangun fitur baru, memodernisasi kode lama, dan mempercepat aplikasi Anda. 
Create an accordion-style stats component that smoothly animates on open and close.
 
Build a tab bar with a sliding highlight that tracks active items using CSS Anchor Positioning.
 
Design a dashboard card that uses container queries to adapt its layout to its own width.
 
Update legacy modal window implementations to use the <dialog> element and animate them using modern CSS features.
 
Migrate legacy tooltips to use the Popover API and CSS Anchor Positioning.
 
Implement a passkey-based login flow using the latest WebAuthn features.
 
Implement a starter Content Security Policy (CSP) without breaking my app.
 
Perform a security audit of my site and suggest improvements.
 
Set up my app to begin preloading pages when users hover over important links.
 
My app has lots of long tasks, and its INP is affected. Help me fix it.
 
Help me improve my app's LCP.
Gabungkan Chrome DevTools untuk agen dengan keterampilan Panduan Web Modern untuk meningkatkan alur kerja pengembangan web Anda. Jalankan audit performa real-time, periksa hierarki aksesibilitas, dan ambil log konsol—lalu terapkan perbaikan kode web modern yang akurat secara otomatis.
Pelajari lebih lanjut

Pelajari cara berkontribusi

Punya ide tentang cara meningkatkan kualitas Panduan Web Modern? Pelajari cara Anda dapat berkontribusi.
Pelajari lebih lanjut