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
Get started View on GitHub

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.
View all installation options

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

npx skills add GoogleChrome/modern-web-guidance

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

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

Install Modern Web Guidance skills in Gemini CLI:

gemini extensions install https://github.com/GoogleChrome/modern-web-guidance --auto-update

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

Learn how to contribute

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