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:
/plugin marketplace add GoogleChrome/modern-web-guidance
/plugin install modern-web-guidance@googlechrome
/reload-plugins
Copilot CLI
Install Modern Web Guidance skills for Copilot CLI:
/plugin marketplace add GoogleChrome/modern-web-guidance
/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 pre 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
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!