What is Modern Web Guidance?

Modern Web Guidance is a set of skills that embed web platform expertise, best practices, and browser compatibility data directly into your coding agents. Install it with npx modern-web-guidance@latest install, or as a plugin for Claude Code, Copilot CLI, or Antigravity CLI.

Is Modern Web Guidance only for Chrome?

No. Modern Web Guidance is published by Chrome for Developers, but its skills are built on web platform standards and browser compatibility data, so the guidance applies to code that runs in any modern browser.

How do I stop my AI coding agent from generating outdated HTML, CSS and JavaScript?

Install Modern Web Guidance in your agent. Its skills give the agent current web platform best practices and browser compatibility data, so prompts like "Update legacy modal window implementations to use the element" or "Migrate legacy tooltips to use the Popover API and CSS Anchor Positioning" produce modern, well-supported code.

Which AI coding agents does Modern Web Guidance work with?

Modern Web Guidance can be used with your favorite AI coding agents. Documented install paths include the modern-web-guidance CLI (npx modern-web-guidance@latest install), npx skills, Claude Code, Copilot CLI, and Antigravity CLI.

What can I build with Modern Web Guidance?

Build new user experiences (accordion components with smooth animation, tab bars using CSS Anchor Positioning, dashboard cards with container queries), modernize legacy code ( , Popover API), improve security (passkey login with WebAuthn, a starter Content Security Policy, security audits), and improve performance (preload on hover, fix long tasks affecting INP, improve LCP).

Ini adalah pratinjau awal Panduan Web Modern. Kami aktif menambahkan konten baru dan menerima kontribusi atau masukan di GitHub.

Google menggunakan teknologi AI untuk menerjemahkan konten ke dalam bahasa pilihan Anda. Terjemahan AI mungkin mengandung kesalahan.

Modern Web Guidance

Modern Web Guidance adalah serangkaian keterampilan yang menyematkan keahlian platform web, praktik terbaik, dan data kompatibilitas browser langsung ke agen coding Anda.

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

npx modern-web-guidance@latest install

Mulai Lihat di GitHub

Berfungsi dengan agen coding AI pilihan Anda

Modern Web Guidance 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

`npx skills`

Instal Modern Web Guidance di project Anda menggunakan Agent Skills Vercel:

npx skills add GoogleChrome/modern-web-guidance

Claude Code

Instal Modern Web Guidance dari plugin Claude Code:

claude plugin install modern-web-guidance@claude-plugins-official

CLI Copilot

Instal kemampuan Modern Web Guidance untuk Copilot CLI:

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

CLI Antigravity

Instal kemampuan Modern Web Guidance untuk Antigravity CLI:

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

Modern Web Guidance di Google I/O

Tonton sesi Modern Web Guidance di Google I/O untuk mempelajari lebih lanjut keterampilan tersebut dan cara keterampilan tersebut meningkatkan alur kerja developer web Anda yang didukung AI.

Tonton sekarang

Perintah untuk pengalaman pengguna yang lebih baik

Coba beberapa contoh perintah berikut untuk memanggil Modern Web Guidance dalam alur kerja coding dengan bantuan AI untuk membangun fitur baru, memodernisasi kode lama, dan mempercepat aplikasi Anda.

Membangun pengalaman pengguna baru

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.

Memodernisasi kode lama

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.

Meningkatkan keamanan

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.

Meningkatkan performa

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.

Pengantar codelab Modern Web Guidance

Temukan cara memandu asisten coding AI Anda untuk menghasilkan kode web yang canggih dan interoperabel. Dalam codelab pengantar ini, Anda akan mengaudit aplikasi web lama dan menggunakan alat Modern Web Guidance untuk meminta agen menerapkan praktik terbaik modern. Pelajari cara menetapkan target browser Baseline, mengoptimalkan Core Web Vitals, dan mengubah output AI generik menjadi solusi web berperforma tinggi.

Mulai

Menggunakan kemampuan Modern Web Guidance dengan Chrome DevTools untuk agen

Gabungkan Chrome DevTools untuk agen dengan keahlian Modern Web Guidance guna meningkatkan alur kerja developer 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 Modern Web Guidance? Pelajari cara berkontribusi.