Modern Web Guidance

Google has released Modern Web Guidance, a set of expert-vetted skills for AI coding agents that help developers build accessible, performant, and secure web experiences. The tool, which works with AI agents including Claude Code, Copilot CLI, and Vercel's Agent Skills, provides prompts for building new features, modernizing legacy code, and improving security and performance. The guidance can be installed via CLI commands and integrates with Chrome DevTools for agents to enable real-time audits and automated code fixes.

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