Modern Web Guidance | Chrome for Developers
Skip to main content
English
Deutsch
Español – América Latina
Français
Indonesia
Italiano
Nederlands
Polski
Português – Brasil
Tiếng Việt
Türkçe
Русский
עברית
العربيّة
فارسی
हिंदी
বাংলা
ภาษาไทย
中文 – 简体
中文 – 繁體
日本語
한국어
Sign in
This is an early preview of Modern Web Guidance. We're actively adding new content and we welcome contributions or feedback on GitHub.
Home
Docs
Modern Web Guidance
Stay organized with collections
Save and categorize content based on your preferences.
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.<br>Install with modern-web-guidance CLI (recommended):
npx modern-web-guidance@latest install
Get started
View on GitHub
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:<br>/plugin marketplace add GoogleChrome/modern-web-guidance<br># 2. Install the plugin<br>/plugin install modern-web-guidance@googlechrome<br># 3. Reload plugins<br>/reload-plugins
Copilot CLI
Install Modern Web Guidance skills for Copilot CLI:
# 1. Add the marketplace:<br>/plugin marketplace add GoogleChrome/modern-web-guidance<br># 2. Install the plugin<br>/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
construction
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.
assignment
Modernize legacy code
Update legacy modal window implementations to use the element and animate them using modern CSS features.
Migrate legacy tooltips to use the Popover API and CSS Anchor Positioning.
security
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.
speed
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.
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 more
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],[],[],[]]