I Installed Modern Web Guidance and Checked Whether My Blog Had Anything Left to Fix

I installed Modern Web Guidance, published by the Chrome team, into Claude Code at the user level. After that, I used PageSpeed Insights to check whether this blog had anything left to fix. This post records how I installed it and what the measurements showed.

What Modern Web Guidance is

Modern Web Guidance is a collection of skills for AI coding agents. It bundles best practices for web development with data on browser support, and it is published by Chrome for Developers. It covers more than 100 use cases.

It was made because of the code AI agents write. According to the official page, AI agents tend to pick outdated patterns. They may not know about newer features, and they don't think about which browsers a project needs to support. For example, they build a modal from scratch in JavaScript when a <dialog> element would do.

Once it is installed, the agent calls the Modern Web Guidance CLI before starting work, then finds and reads a guide that fits the task. search finds guides, and retrieve prints a guide's content. You can also try these yourself before installing.

npx modern-web-guidance@latest search "animate a dialog modal backdrop"
npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"

The guides are written to be read by AI, so they are closer to instructions than to explanatory articles. For example, the guide "Light-Dismiss a Dialog" (closing a dialog by clicking the backdrop) includes code for the recommended implementation, rules to follow, and a fallback implementation for browsers that don't support it. The rules are written as MANDATORY / DO / DO NOT.

According to the official page, evaluation scores were 37 percentage points higher on average with the guides than without them. However, these are early results from the Chrome team itself, and the page also notes that results may vary.

Installing it at the user level

I wanted to use it in every project, not just this blog, so I decided to install it at the user level. You can also install it as a Claude Code plugin, but I used the following command, which the official page recommends. This method also supports automatic updates.

npx modern-web-guidance@latest install

The skill itself goes into ~/.agents/skills/modern-web-guidance, and Claude Code loads it through a link at ~/.claude/skills/modern-web-guidance. ~/.agents/skills/ is also where Codex, Cursor, Cline, and other agents look, so those agents can use it too.

During installation, security ratings from three services were shown. Gen rated it "Safe" and Snyk rated it "Low Risk." Only Socket showed one warning.

Turning off usage data

Modern Web Guidance sends anonymous usage data to Google. I didn't want that, so I added the following line to ~/.zshrc.

export DISABLE_TELEMETRY=1

Keeping the default Baseline

Modern Web Guidance uses a standard called Baseline to decide how new the features it uses can be. If you don't specify anything, it uses Widely available, which means only features that have worked in all major browsers for 30 months or more. If you want to use newer features too, write something like "This project's Baseline target is Baseline 2024." in CLAUDE.md or AGENTS.md.

I kept the default this time.

Is there anything for Modern Web Guidance to fix?

Modern Web Guidance is a collection of skills for improving the quality of the web code that AI writes. Since I had installed it, I wanted to see whether this blog had anything left for it to fix. So I measured the blog with PageSpeed Insights, which scores things like loading speed and accessibility.

Without changing anything, the top page scored 100 in all four categories on both mobile and desktop. It also passed all three agent browsing checks (3/3).

I also measured an article page (my previous post). On mobile, it scored 100 in all four categories, the same as the top page. On desktop, only Performance varied: 100 on the first run and 97 on the second. The other three categories were 100, and agent browsing was 3/3 on both.

Because the blog still gets few visitors, the real-user data showed "No data" for every page.

What was left to improve

The "Diagnostics" section, which doesn't affect the score, listed these three items.

• 107 KiB of unused JavaScript
• 30 KiB of unused CSS
• 2.7 seconds of main-thread work

The unused JavaScript turned out to be Three.js, which I use for the background animation. Three.js is 743 KB before compression and still 185 KB after gzip, far larger than any other JavaScript on this site. Yet all the background does is "draw dots," "draw lines," and "tilt slightly."

I set Three.js to load when the browser is idle. But if that loading starts while PageSpeed Insights is measuring, parsing the JavaScript and initializing WebGL count as main-thread work. The 97 was probably because this work fell within the measurement window.

The unused CSS turned out to be the definitions for the Japanese font. To load Noto Sans JP split by character ranges, there are 124 @font-face rules. The font files themselves are loaded only for the characters a page uses. Lighthouse just counts the definitions as unused, so I left them as they are.

Wrapping up

I added Three.js because I wanted to make the blog a little richer. But right now it is only used for the background, and all it does is dots, lines, and a tilt. That looks doable with the browser's built-in Canvas 2D, so I'm considering whether to rewrite it.

I installed Modern Web Guidance, but there was almost nothing left on this blog for it to fix. The scores are already close to perfect, and it's hard to stand out any further on the technical side. If I want to stand out, what's left is the content of the posts. I want to write about my side projects and my work too, but first I'd better write about FlutterKaigi while my memory is still fresh (haha).