modern-web-guidance
Keep your coding agent up to date with the latest web best practices
Modern Web Guidance is an agent skill developed by the Google Chrome and Microsoft Edge teams that embeds modern web platform expertise, best practices, and browser compatibility data into coding agents. It helps steer agents away from legacy patterns toward native, high-performance web platform solutions through expert-curated, token-efficient guidelines. The skill provides 135 developer use cases across 108 modern web features, covering CSS layout, performance optimization, accessibility, built-in AI APIs, and more. Agents use a local semantic search CLI to retrieve targeted code patterns, gotchas, and fallbacks without requiring API keys or network calls.
Key Features
Use Cases
- 01Guiding coding agents to implement modern CSS features like container queries, subgrid, and scroll-driven animations
- 02Helping agents build accessible forms with proper autofill, validation feedback, and screen reader support
- 03Teaching agents to use native browser APIs for dialogs, popovers, and tooltips instead of JavaScript libraries
- 04Implementing performance optimizations like INP improvements, lazy loading, and speculation rules
- 05Building animations and transitions using View Transitions API and native web platform capabilities
- 06Integrating on-device AI features like translation, summarization, and language detection without external APIs
Related Skills
View moresuperpowers
An agentic skills framework & software development methodology that works.
skills
Skills for Real Engineers. Straight from my .agents directory.
skills
Public repository for Agent Skills
ponytail
Makes your AI agent think like the laziest senior dev in the room. The best code is the code you never wrote.
modern-web-guidance — FAQ
What is Modern Web Guidance?+
Modern Web Guidance is an agent skill that provides expert-curated guidelines on modern web platform features, helping coding agents generate production-ready code using native browser APIs instead of legacy patterns or heavy libraries.
How do I install Modern Web Guidance?+
Run 'npx modern-web-guidance@latest install' for an interactive wizard, or use your agent's plugin system like 'npx skills add GoogleChrome/modern-web-guidance' for Vercel Skills CLI, or '/plugin marketplace add GoogleChrome/modern-web-guidance' followed by '/plugin install modern-web-guidance@googlechrome' for Claude Code.
Which AI coding agents support Modern Web Guidance?+
Modern Web Guidance works with Claude Code, Codex CLI, Google Antigravity, GitHub Copilot CLI, Grok Build CLI, Kimi Code, OpenAI Codex, and any agent that can execute CLI commands and read returned content.
Does Modern Web Guidance require API keys or internet connection?+
No. The skill uses a local, offline TensorFlow.js model for semantic search with no network calls or API keys required. The npm package is self-contained with no extra dependencies.
Is Modern Web Guidance free to use?+
Yes, Modern Web Guidance is free and open source, supported by the Google Chrome and Microsoft Edge teams along with the web development community.
How does the agent retrieve guidance?+
The agent runs 'modern-web-guidance search "query"' to find relevant guides using local semantic search, then retrieves specific guides with 'modern-web-guidance retrieve <guide-id>' to insert targeted patterns directly into its context window.
How do I install modern-web-guidance?+
Open the source repository on GitHub and follow its README. modern-web-guidance is a skill — MCP Agents Market links you directly to the official repo.
Is modern-web-guidance free?+
modern-web-guidance is an open-source project hosted on GitHub. Check the repository for its license and any usage requirements.