Modern Web Guidance: steer a coding agent toward modern Web platform patterns

Who it's for

If you find a coding agent piles up large amounts of outdated JavaScript as soon as overlays, animation, or interaction appear, and you actually want capabilities the current Web platform already provides, this skill set fits better. It embeds Web platform experience, best practices, and browser-compatibility data into the coding agent, to steer solutions from old patterns toward the modern platform, not to write another generic front-end tutorial.

The official explanation: coding agents often default to old patterns because training data holds a lot of leftover code, so they often generate bloated scripts for tasks that already have native, high-performance platform solutions. If you are working on dialogs, top-layer animation, or compatibility checks, and you accept installing a skill set with npx, the benefit is more direct. If you only want to browse docs and do not plan to change agent behavior, you can start with command-line search and need not run the install wizard first.

First try in 3 minutes

The official install entry is only this one:

npx modern-web-guidance@latest install

It starts an interactive wizard that installs Modern Web Guidance into your coding agent. This changes the agent's skill configuration on this machine; it is not a read-only query. Before you run it, confirm: this machine has npx, you are willing to finish choices in the wizard, and this is the agent environment you want to write into. Read the prompts, then execute; do not press Enter in an unclear environment.

After install, do one reversible check: ask the agent to inspect "how to animate a dialog backdrop" and require it to look at modern platform capabilities first, not write a long script first. Success signal: the answer leans toward platform solutions and compatibility, instead of defaulting to leftover patterns. If the agent still only gives old patterns, stop at the check; do not let it change repository files.

If you are not ready to write into the agent, you can first use the same CLI for a read-only search (see the next section). That step does not replace install; it only confirms the command works.

Use cases

Case 1: Search related guides by task. You already have one concrete need, for example animating a dialog backdrop, but do not yet know the guide name. In the terminal run:

npx modern-web-guidance@latest search "animate a dialog modal backdrop"

The official page labels this Search for relevant guides. The page does not write how many rows return, the sort order, or whether install is required first. So you can only confirm: this command searches guides by keyword. Seeing entries related to dialogs, backdrops, and animation is enough; it does not authorize you to treat search results as a final patch you can paste.

Case 2: Fetch one guide by a known ID. When you have already seen an identifier such as animate-to-from-top-layer, run:

npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"

The official page labels this Retrieve a guide by ID. It does not explain a complete inventory of IDs, and it does not write whether retrieve will change project files. So the first time, treat the output only as guide body text. To land it in code, hand it to a coding agent that already has the skill for comparison, and clearly forbid it from changing files before you nod.

Boundaries

This is a preview. The official text says content is still being added, and welcomes contributions or feedback at

https://github.com/GoogleChrome/modern-web-guidance-src

The page does not guarantee guides cover the whole Web platform, and it does not write whether preview-period commands are stable. If a topic cannot be found, that only means current content does not have it yet; do not invent an "equivalent best practice".

The install path is the interactive wizard above; search and retrieve are two other commands. Do not treat search / retrieve as a second installer, and do not infer it is bound to one agent product. The official text only says it targets coding agents and gives no client roster.

The first time, prefer search or a read-only comparison by the agent. The wizard writes skills; retrieve also does not declare whether it is display-only. Any step that would change the repository or configuration must first have the agent recite the files it will change; you confirm, then continue.