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 技术将内容翻译成您偏好的语言。AI 翻译可能包含错误。

Modern Web Guidance

Modern Web Guidance 是一组技能，可将 Web 平台专业知识、最佳实践和浏览器兼容性数据直接嵌入到编码智能体中。

使用 modern-web-guidance CLI 安装（推荐）：

npx modern-web-guidance@latest install

开始使用在 GitHub 上查看

支持您偏好的 AI 编码智能体

Modern Web Guidance 可与您喜爱的 AI 编码智能体搭配使用，确保您可以在首选工作流中获取有关现代 Web 最佳实践的指导。

查看所有安装选项

`npx skills`

使用 Vercel 的 Agent Skills 在项目中安装 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

安装 Modern Web Guidance skills for Copilot CLI：

# 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

Modern Web Guidance at Google I/O

观看 Google I/O 大会上的 Modern Web Guidance 专题演讲，详细了解这些技能以及它们如何改进 AI 辅助 Web 开发工作流。

立即观看

提示可带来更优质的用户体验

尝试使用以下几个示例提示，在 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 Codelab 简介

了解如何引导 AI 编码助理生成前沿、可互操作的 Web 代码！在此入门 Codelab 中，您将审核一个旧版 Web 应用，并使用 Modern Web Guidance 工具提示代理采用现代最佳实践。学习如何设置 Baseline 浏览器目标、优化 Core Web Vitals，以及将通用 AI 输出转化为高性能 Web 解决方案。

开始使用