# Modern Web Guidance

> Source: <https://developer.chrome.com/docs/modern-web-guidance>
> Published: 2026-05-27 10:36:38+00:00

### Build with Modern Web Guidance

Modern Web Guidance is a set of evergreen and expert-vetted skills that guide your AI coding agents across many common use cases to build modern web experiences that are accessible, performant, and secure.

**Install with modern-web-guidance CLI (recommended):**

```
npx modern-web-guidance@latest install
```

## Works with your preferred AI coding agent

Modern Web Guidance can be used with your favorite AI coding agents, ensuring you have access to guidance for modern web best practices in your preferred workflow.

###
`npx skills`

Install Modern Web Guidance in your project using Vercel's Agent Skills:

```
npx skills add GoogleChrome/modern-web-guidance
```

### Claude Code

Install Modern Web Guidance skills for Claude Code:

```
# 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
```

### Copilot CLI

Install 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

Install Modern Web Guidance skills in Antigravity CLI:

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

## Prompts for better user experiences

Try out a few of the following sample prompts to invoke modern web guidance in your AI-assisted coding workflow to build new features, moderize legacy code, and speed up your app.

### Build new user experiences

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

### Modernize legacy code

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

### Improve security

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

### Improve performance

```
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 at Google I/O
](https://www.youtube.com/watch?v=bo3i0FzDUYo)

Watch the Modern Web Guidance session at Google I/O to learn more about the skills, and how they improve your AI-assisted web development workflow.

### Use Modern Web Guidance skills with Chrome DevTools for agents

Combine Chrome DevTools for agents with Modern Web Guidance skills to improve your web development workflow. Run real-time performance audits, inspect accessibility trees, and capture console logs—and then automatically apply precise modern web code fixes.

## Learn how to contribute

Have ideas on how to improve Modern Web Guidance? Learn how you can contribute!