Your Coding Agent Keeps Writing 2015 JavaScript. Here's How to Fix That.
You've probably noticed it: you ask a coding agent for a modal, and it hands you a pile of JavaScript with manual focus trapping and a polyfill or two. Ask for a scroll effect, and you get a library import instead of a few lines of CSS. The code works, but it feels like it was written five years ago—because, in a sense, it was. Modern Web Guidance is an attempt to fix that by feeding your coding agent curated web platform expertise directly into its context.
What It Does
Modern Web Guidance is a set of skills that embed web platform knowledge, best practices, and browser compatibility data into coding agents. The goal is straightforward: steer agents away from legacy patterns and toward solutions that use what the modern web platform already offers.
It ships as a CLI you run through npx, with commands to install an interactive setup, search for relevant guides, retrieve a specific guide by ID, and scan a codebase for legacy patterns. The guides themselves are described as token-efficient—the team runs evals to prune content that models already know, so what lands in your agent's context window is targeted rather than bloated. The project is stewarded by the Google Chrome, Microsoft Edge, Mozilla Firefox, and MDN teams, alongside the web development community.
Why It's Cool
It targets the actual root of the problem. The README is refreshingly honest about why agents write dated code: LLM training data contains vast amounts of legacy code, so models default to older patterns. Even when a model knows a newer API exists, it often lacks the density of real-world implementation patterns needed for production-ready output. This project addresses that gap directly instead of pretending better prompting will solve it.
The guides are pruned, not padded. Token efficiency matters when you're stuffing guidance into a context window, and the eval-driven approach here means you're not paying for content the model already has memorized. That's a thoughtful design decision you don't see often in tooling like this.
It covers specific, practical territory. The README lists core disciplines including user experience work (View Transitions, entry/exit animations, parallax scroll, scrollbar-color), CSS layout (container queries, subgrid, modern color spaces like oklch, text-wrap tuning, line-height trimming), and more beyond the truncated portion. These are exactly the areas where agents tend to reach for JavaScript or libraries when native solutions exist.
The focus areas are well chosen. The project explicitly prioritizes modern browser APIs, performance and accessibility (preferring platform-level APIs that the browser can optimize and that include built-in accessibility affordances), and responsible fallbacks—guiding models toward lightweight fallbacks rather than heavy polyfills or legacy libraries.
You can try it before committing. The search and retrieve commands let you poke at the guide content without installing anything, and legacy-scan gives you a way to audit an existing codebase for patterns worth modernizing. That's a low-friction way to evaluate whether the guidance is actually useful to you.
How to Try It
Getting started is a single command:
npx modern-web-guidance@latest install
That runs an interactive wizard to walk you through installation. If you'd rather kick the tires first, you can use the CLI without installing anything:
# Search for relevant guides
npx modern-web-guidance@latest search "animate a dialog modal backdrop"
# Retrieve a guide by ID
npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"
# Scan a codebase for legacy patterns to modernize
npx modern-web-guidance@latest legacy-scan .
The legacy-scan command is a nice entry point if you want to see what it flags in your own projects before wiring it into your agent workflow.
Head over to the repository for the full picture, and check the documentation for details on alternative installation methods. There's also an eval dashboard if you're curious how the guides perform.
Final Thoughts
If you're regularly using coding agents for front-end work, this is worth a look—especially if you've grown tired of reviewing generated code that reaches for JavaScript when CSS would do. The multi-vendor stewardship is a good signal that the guidance isn't tied to one browser's priorities, and the token-efficiency focus suggests the team understands the constraints of working within an agent's context. It won't write your code for you, but it might make the code your agent writes a lot less dated.
Follow @githubprojects for more developer tools and open source projects.