{"slug": "modern-web-guidance", "title": "Modern Web Guidance", "summary": "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.", "body_md": "### Build with Modern Web Guidance\n\nModern 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.\n\n**Install with modern-web-guidance CLI (recommended):**\n\n```\nnpx modern-web-guidance@latest install\n```\n\n## Works with your preferred AI coding agent\n\nModern 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.\n\n###\n`npx skills`\n\nInstall Modern Web Guidance in your project using Vercel's Agent Skills:\n\n```\nnpx skills add GoogleChrome/modern-web-guidance\n```\n\n### Claude Code\n\nInstall Modern Web Guidance skills for Claude Code:\n\n```\n# 1. Add the marketplace:\n/plugin marketplace add GoogleChrome/modern-web-guidance\n# 2. Install the plugin\n/plugin install modern-web-guidance@googlechrome\n# 3. Reload plugins\n/reload-plugins\n```\n\n### Copilot CLI\n\nInstall Modern Web Guidance skills for Copilot CLI:\n\n```\n# 1. Add the marketplace:\n/plugin marketplace add GoogleChrome/modern-web-guidance\n# 2. Install the plugin\n/plugin install modern-web-guidance@googlechrome\n```\n\n### Antigravity CLI\n\nInstall Modern Web Guidance skills in Antigravity CLI:\n\n```\nagy plugin install https://github.com/GoogleChrome/modern-web-guidance\n```\n\n## Prompts for better user experiences\n\nTry 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.\n\n### Build new user experiences\n\n```\nCreate an accordion-style stats component that smoothly animates on open and close.\nBuild a tab bar with a sliding highlight that tracks active items using CSS Anchor Positioning.\nDesign a dashboard card that uses container queries to adapt its layout to its own width.\n```\n\n### Modernize legacy code\n\n```\nUpdate legacy modal window implementations to use the <dialog> element and animate them using modern CSS features.\nMigrate legacy tooltips to use the Popover API and CSS Anchor Positioning.\n```\n\n### Improve security\n\n```\nImplement a passkey-based login flow using the latest WebAuthn features.\nImplement a starter Content Security Policy (CSP) without breaking my app.\nPerform a security audit of my site and suggest improvements.\n```\n\n### Improve performance\n\n```\nSet up my app to begin preloading pages when users hover over important links.\nMy app has lots of long tasks, and its INP is affected. Help me fix it.\nHelp me improve my app's LCP.\n```\n\n###\n[\nModern Web Guidance at Google I/O\n](https://www.youtube.com/watch?v=bo3i0FzDUYo)\n\nWatch 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.\n\n### Use Modern Web Guidance skills with Chrome DevTools for agents\n\nCombine 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.\n\n## Learn how to contribute\n\nHave ideas on how to improve Modern Web Guidance? Learn how you can contribute!", "url": "https://wpnews.pro/news/modern-web-guidance", "canonical_source": "https://developer.chrome.com/docs/modern-web-guidance", "published_at": "2026-05-27 10:36:38+00:00", "updated_at": "2026-05-27 10:46:06.061944+00:00", "lang": "en", "topics": ["ai-agents", "ai-tools", "ai-products", "ai-infrastructure"], "entities": ["Modern Web Guidance", "Vercel", "Google Chrome", "Claude Code", "Copilot CLI", "Antigravity CLI"], "alternates": {"html": "https://wpnews.pro/news/modern-web-guidance", "markdown": "https://wpnews.pro/news/modern-web-guidance.md", "text": "https://wpnews.pro/news/modern-web-guidance.txt", "jsonld": "https://wpnews.pro/news/modern-web-guidance.jsonld"}}