Unlock modern web capabilities in your AI coding workflows

Key Concepts

• AI Coding Agents: Automated tools that generate code based on natural language prompts.
• Modern Web Guidance: A Chrome-developed, expert-vetted skill package designed to improve AI-generated web code.
• Knowledge Cutoff: The date after which an AI model has no training data regarding new web features.
• Baseline: A standard for web platform compatibility that tracks which features are widely supported across browsers.
• Scroll-Driven Animations: A modern web API that allows animations to be linked to the scroll position of a container.
• View Transitions API: A modern API for creating smooth visual transitions between different DOM states or page navigations.
• Interest Invokers API: A browser feature for handling UI interactions (like tooltips or popovers) declaratively.
• Semantic Search: The mechanism used by Modern Web Guidance to match user prompts to relevant, vetted technical guides.

---

1. The Problem: AI and the Modern Web

Philip Walton highlights a significant discrepancy between the capabilities of modern web browsers and the code generated by AI agents.

• Legacy Bias: AI models often suggest outdated patterns (e.g., heavy JavaScript for simple UI) because their training data is heavily weighted toward legacy browser support (like Internet Explorer).
• Knowledge Gaps: Models are unaware of the 50+ features Chrome ships annually due to training cutoffs.
• Incorrect API Usage: AI often hallucinates or uses deprecated attribute names (e.g., interesttarget vs. interestfor in the Interest Invokers API), leading to silent failures.
• Conservative Support: AI agents default to "lowest common denominator" browser support, ignoring modern capabilities even when the project context allows for them.

2. Modern Web Guidance: The Solution

Modern Web Guidance is a package that embeds Chrome’s expertise directly into coding agents.

• Installation: Can be installed via npx modern-web-guidance install or through IDE extensions.
• Architecture: Unlike standard "skill" files, it uses a CLI-based semantic search. When a user prompts an agent, the tool searches for relevant guides and injects them into the context window only if a match is found.
• Two-Tiered Guidance:
  1. High-Level Guides: Best practices for performance, accessibility, and security.
  2. Low-Level Feature Guides: Focused on specific use cases (e.g., "visually connect persisting elements") rather than just documenting API syntax.
• Cross-Browser Strategy: Guides prioritize the "ideal" modern implementation first, then provide explicit fallback strategies based on the project's AGENTS.md configuration.

3. Methodology and Evaluation

• Baseline Integration: By defining browser support in an AGENTS.md file, the AI can decide whether to use modern APIs (like scroll-driven animations) or fall back to legacy methods.
• Rigorous Evals: The Chrome team runs 554+ daily assertions against models like Gemini, Claude, and GPT.
• Guided vs. Unguided: Data shows that agents using Modern Web Guidance perform significantly better in implementing complex UI tasks compared to unguided agents.
• Dynamic Maintenance: The team monitors eval results; if unguided models consistently match the performance of guided models for a specific feature, that guide is retired to keep the package token-efficient.

4. Real-World Application: Mobile-First UX

Walton demonstrated the tool by building a mobile email application.

• The Challenge: Creating a "native-feeling" mobile web experience where UI elements (like sidebars or email lists) track with the user's finger.
• The Result:
  • Unguided: The AI relied on JavaScript-based swipe detection, which felt "laggy" and lacked native physics.
  • Guided: The AI utilized Scroll-Driven Animations and Scroll Snap Points. This allowed the browser to handle the physics via hardware acceleration, resulting in a seamless, native-like experience that worked identically on both Android and iOS.

5. Notable Quotes

• "AI is definitely not perfect... if you ask a coding agent to go build something for you on the web, it's most likely not going to reach for the latest web platform features."
• "We need our guides to match the prompts that developers are actually using."
• "If we want to make the web better, then, at the end of the day, we're going to actually have to make it as easy as possible for you developers to use all of these amazing features."

Synthesis

The core takeaway is that while AI coding agents are powerful, they are currently "stuck in the past" regarding web development. Modern Web Guidance acts as a bridge, providing AI with up-to-date, expert-vetted, and context-aware instructions. By shifting the focus from "writing code" to "implementing use cases" with modern platform features, developers can achieve native-level performance and polish on the web without needing to manually manage complex cross-browser fallbacks.