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).

這是 Modern Web Guidance 的搶先體驗版。我們正積極新增內容，也歡迎您在 GitHub 上提供意見回饋或貢獻內容。

Google 會運用 AI 技術將內容翻譯成你偏好的語言，但可能會出錯。

Modern Web Guidance

Modern Web Guidance 是一組技能，可將網頁平台專業知識、最佳做法和瀏覽器相容性資料，直接嵌入程式設計代理。

使用 modern-web-guidance CLI 安裝 (建議)：

npx modern-web-guidance@latest install

開始使用前往 GitHub 查看

可與您偏好的程式設計 AI 代理搭配運作

Modern Web Guidance 可與您慣用的程式設計 AI 代理搭配運作，確保您在偏好的工作流程中，能取得現代化網頁最佳做法的指引。

查看所有安裝選項

`npx skills`

使用 Vercel 的代理技能，在專案中安裝 Modern Web Guidance：

npx skills add GoogleChrome/modern-web-guidance

Claude Code

從 Claude Code 外掛程式安裝 Modern Web Guidance：

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

Copilot CLI

安裝 Copilot CLI 的 Modern Web Guidance 技能：

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

Antigravity CLI

為 Antigravity CLI 安裝 Modern Web Guidance 技能：

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

Google I/O 大會上的Modern Web Guidance

觀看 Google I/O 大會的 Modern Web Guidance 講座，進一步瞭解這些技能，以及如何運用這些技能，改善 AI 輔助網頁程式開發人員工作流程。

立即觀看

提示可提升使用者體驗

請嘗試下列範例提示，在 AI 輔助程式設計工作流程中叫用 Modern Web Guidance，建構新功能、翻新舊程式碼，並加快應用程式速度。

打造全新使用者體驗

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.

Modern Web Guidance 簡介程式碼實驗室

瞭解如何引導 AI 程式設計助理，生成先進且可互通的網頁程式碼！在這個入門程式碼實驗室中，您將稽核舊版網頁應用程式，並使用 Modern Web Guidance 工具提示代理，採用現代最佳做法。瞭解如何設定基準瀏覽器目標、最佳化 Core Web Vitals，以及將一般 AI 輸出內容轉換為高效能網頁解決方案。

開始使用