How to Stop Your AI Coding Agent from Writing Outdated Code with Modern Web Guidance

                     How to Stop Your AI Coding Agent from Writing Outdated Code with Modern Web Guidance
               



Tópico:
                     How to Stop Your AI Coding Agent from Writing Outdated Code with Modern Web Guidance
               
Categoria: Tutoriais | FreeCodeCamp Premium
Idioma Principal: Português (Conteúdo de Tecnologia)

Conteúdo do Tutorial / Guia Passo a Passo:
-------------------------------------------------------------------------
AI coding agents can save developers a lot of time – that is, until you open the output and realize they've written code like it's 2019.

Ask an agent to build a tooltip, for example. The HTML looks polished, the CSS transitions are smooth, the

Código Selecionar Expandir

aria-describedbywiring is correct. Then you get to the JavaScript: a

Código Selecionar Expandir

js-hiddenclass toggle system, a

Código Selecionar Expandir

dismissAllTooltips()function, touch event handlers, click-outside detection, and an entire interaction management layer to compensate for what CSS alone can't do.

The agent isn't broken. It's just reaching for patterns that dominate its training data, even though the browser has had better answers for years.

Modern Web Guidance (MWG) is Google Chrome's open-source fix. It injects expert-vetted, platform-aware guidance directly into your AI agent's context, steering it toward current, accessible, and performant web standards.

In this article, you'll learn why Modern Web Guidance solves the "legacy code" problem, and how to integrate it into your workflow for consistently up-to-date results.

Table of Contents:

• Why Do AI Agents Default to Legacy Patterns?

• What Is Modern Web Guidance (MWG)?

• How To Install Modern Web Guidance

• After Installing Modern Web Guidance: What Actually Changes

• What Modern Web Guidance Does Not Handle for You

• Conclusion

Why Do AI Agents Default to Legacy Patterns?

Every large language model (LLM) learns from the web, which is evolving at a truly rapid pace. New browser APIs ship years before they have enough tutorials, Stack Overflow answers, and real-world codebases to meaningfully appear in training data.

The practical result: even when a model has been trained to know that a modern API exists, it has seen the old approach thousands of times and the new approach a handful of times. As a result, when it generates code, the legacy pattern wins, not because the model is ignorant, but because the training signal for the outdated approach is stronger.

Prompting doesn't fully solve this. Telling your agent to "use modern APIs" nudges things slightly, but it doesn't provide the dense, expert-vetted implementation patterns the model needs to write production-ready modern code confidently. You'd have to paste in documentation for every feature, in every session, indefinitely.

Here's what the problem looks like in practice. To have real outputs to test, I prompted Antigravity IDE to build two separate components without Modern Web Guidance installed.

Before: Tooltip Component

Prompt: "Build a tooltip component that appears above a button when hovered."

The HTML is reasonable. The CSS handles positioning with

Código Selecionar Expandir

position: absolute, animates opacity, and even wires up

Código Selecionar Expandir

role="tooltip"and

Código Selecionar Expandir

aria-describedbycorrectly. Then you get to the JavaScript:

[code]// ❌ Before MWG — a full interaction management layer built in JS
document.addEventListener('DOMContentLoaded', () => {
const containers = document.querySelectorAll('.tooltip-container');

containers.forEach(container => {
const trigger = container.querySelector('.tooltip-trigger');
const tooltip = container.querySelector('.tooltip-content');

const forceHide = () => tooltip.classList.add('js-hidden');
const resetVisibility = () => tooltip.classList.remove('js-hidden');

// Escape key to dismiss
trigger.addEventListener('keydown', (e) => {
if (e.key === 'Escape') { forceHide(); e.

... [O tutorial continua no link abaixo] ...