AIコーディングエージェントにフロントエンドのコードを書かせると、妙に古い書き方になることがあります。document.write を使ったり、<dialog> があるのに自前でモーダルを組んだり。原因は、LLMの学習データに古いWebコードが大量に含まれているからです。この問題に、Google Chrome 公式が modern-web-guidance（★6.5k・Apache-2.0・v1.0.0）という形で手を打ちました。

これは、最新のWeb標準をAIエージェントに教えるスキル集です。本記事では、GitHubリポジトリ（2026-11-12 時点、タグ v1.0.0）のREADMEとガイド実物を一次情報として、何ができて何に注意すべきかを整理します。なおCLI本体（modern-web.mjs）はリポジトリに含まれず npx で取得されるため、各エージェントへの実インストールは検証していません。コマンドは公式READMEの引用です。

30秒でわかる modern-web-guidance

  • 何 — AIコーディングエージェントに最新のWeb標準・ベストプラクティス・ブラウザ互換データを教えるスキル集（Google Chrome 公式）
  • なぜ — 「LLMの学習データには大量のレガシーコードが含まれる」（README）。放っておくとAIは古い書き方に寄る
  • 規模 — READMEによれば250のモダンWeb機能（CSS 140・HTML&DOM 36・JS&API 74）。実ファイルで200本超のガイド
  • 対応 — Claude Code・Codex・Cursor・Gemini・Kimi・Grok・Copilot など。npx modern-web-guidance@latest install か各プラグイン
  • ライセンス — Apache-2.0（ガイド本文はREADMEによればCC-BY-4.0）

AIにコードを書かせる全体像やツールの選び方は Vibe Codingとは？AIコーディングの始め方・ツール比較・実践ワークフロー2026 にまとめています。

modern-web-guidanceとは——AIに最新Web標準を教えるスキル

READMEは、このツールをこう説明します。

a set of skills that embed web platform expertise, best practices, and browser compatibility data directly into your coding agents. It helps to steer your coding agents away from legacy patterns

（Webプラットフォームの知識・ベストプラクティス・ブラウザ互換データを、あなたのコーディングエージェントに直接埋め込むスキル集。エージェントをレガシーパターンから遠ざける手助けをする）

WHY IT EXISTSLLMの学習データには古いWebコードが大量にある（README）

AIが古い書き方に寄るのを、最新標準で引き戻す

  1. 学習データが古い

    LLM training data contains vast amounts of legacy code（README）。だからAIは数年前のやり方を出しがち

  2. そのまま書かせると

    document.write・自前モーダル・.then() チェーンなど、今は不要な古いパターンになる

  3. スキルを入れる

    250のモダンWeb機能のガイドとブラウザ互換データをエージェントの手元に置く

  4. 最新へ誘導

    コードを書く前に『今ならこう書く』を参照。closedby 属性・async/await などモダンな書き方へ

出典: GoogleChrome/modern-web-guidance の README（2026-11-12 確認、タグ v1.0.0）。『250機能』は README の公称値

狙いは明確です。READMEは背景として 「LLM training data contains vast amounts of legacy code（LLMの学習データには大量のレガシーコードが含まれる）」 と述べています。だからAIにそのまま書かせると、数年前のやり方が出てくる。modern-web-guidance は、最新のWeb標準とブラウザ互換データをエージェントの手元に置き、コードを書く前に「今ならこう書く」を参照させます。

何が入っているのか——250のモダンWeb機能

READMEによれば、カバー範囲は250のモダンWeb機能です。内訳は CSS 140・HTML&DOM 36・JS&API 74。リポジトリを実際に見ると、guides/ 以下に200本を超えるガイドファイルがあり、performance・ui-behaviors・forms・css・security・ui-components など分野ごとに分かれています。さらに Chrome 拡張機能向けには20の必須ルール（Mandatory Rules）が別に用意されています。

中身は「古い書き方」と「モダンな代替」の対になっています。実際のガイドから、いくつか例を挙げます。

AIが書きがちな古い手法 ガイドが勧めるモダンな書き方
ダイアログの外側クリックを自前JSで検知して閉じる <dialog closedby="any">（軽く閉じる挙動を属性で）
.then() のチェーンで非同期処理 async/await
送信ボタンのラベルを「Continue」「Submit」に 「Sign In」（ブラウザのオートフィルが効くように）
拡張機能で iframe.contentDocument.write(html)（SecurityError になる） サンドボックス化した iframe を使う
IME変換中の Enter を素通りさせて誤送信 変換中は keyCode: 229 を見て送信を抑止

WHAT'S INSIDEREADMEの公称値（実ファイルは200本超のガイド）

250のモダンWeb機能＋拡張の必須20ルール

CSS

140

JS & API

74

HTML & DOM

36

拡張 必須ルール

20
出典: README の内訳（CSS140・HTML&DOM36・JS&API74）と chrome-extensions の SKILL.md（必須20ルール）。数値はREADME記載・未検証

こうした対が200本以上あるため、エージェントは「それ、今は <dialog> の属性でできます」といった指摘を、コードを書く前に受け取れます。ブラウザ互換データ（どのブラウザで使えるか）も添えられているのがChrome公式らしい点です。

ガイドは分野ごとに分かれ、UIの挙動（ui-behaviors）やパフォーマンス、フォーム、CSS、セキュリティなど、フロントエンドの実務に広く当たります。エージェントは必要なガイドだけを取り出せるよう、オフラインの埋め込み＋BM25で検索する設計だとREADMEにあります。全ガイドをコンテキストに毎回詰め込むのではなく、書こうとしている内容に関係する項目だけが引かれるため、トークンの無駄が少ないのも実務上の利点です。

入れ方——npx一発と各エージェントのプラグイン

導入はエージェントごとに用意されています。以下はすべて公式READMEの記載で、筆者が実行して確認したものではありません。

もっとも汎用的なのは npx です。

# どのエージェントでも使える汎用インストール（公式READMEの記載・未実行）
npx modern-web-guidance@latest install
# 更新
npx modern-web-guidance@latest update

Claude Code では、プラグインのマーケットプレイスとして追加してからインストールします。

# Claude Code（公式READMEの記載・未実行）
/plugin marketplace add GoogleChrome/modern-web-guidance
/plugin install modern-web-guidance@googlechrome

Codex も同様のプラグイン方式です。

# Codex（公式READMEの記載・未実行）
codex plugin marketplace add GoogleChrome/modern-web-guidance
codex plugin add modern-web-guidance@googlechrome

ほかに Cursor・Gemini（gemini-extension.json）・Kimi・Grok・GitHub Copilot 向けの定義ファイルがリポジトリに含まれ、README にそれぞれの導入コマンドが並びます。動作要件は Node.js 22 以上（package.json の engines）。検索はオフラインの埋め込み＋BM25で動くとREADMEにありますが、初回は npx でCLI本体を取得するため、最初だけネットワークが要ります。テレメトリは DISABLE_TELEMETRY=1 で無効化できます。

modern-web-guidanceの使いどころと注意点——公称値は鵜呑みにしない

HOW TO USE / CAVEATS入れ方と、割り引いて見る点

npx一発か各プラグイン、公称値は鵜呑みにしない

  1. 1.入れ方

    汎用は npx modern-web-guidance@latest install。Claude Code は /plugin install、Codex・Cursor・Gemini・Kimi・Grok・Copilot にも対応（README）

  2. 2.効果の数値は公称値

    README のテスト結果表は計測方法が未記載。『何%改善』は README の主張として受け取る

  3. 3.CLI本体はnpx取得

    modern-web.mjs はリポジトリに無く、初回だけネットワークが要る。検索はオフライン＋BM25（README）

  4. 4.ライセンスは二層

    ソースは Apache-2.0、ガイド本文は CC-BY-4.0（README）。引用・再配布は表示義務に注意

出典: README とリポジトリ構成（2026-11-12 確認）。CLI本体の挙動は配布物に無く未確認

有用な一方で、いくつか割り引いて見るべき点があります。

  • 効果の数値は公称値：READMEには導入前後のテスト結果の表が載っていますが、計測方法の詳細や再現手順は本記事時点で確認できていません。「何%改善」といった数字は、README の主張として受け取るのが安全です。
  • CLI本体はリポジトリに無い：bin に指定された modern-web.mjs は clone に含まれず、npx 実行時に取得されます。中身の検索・取得ロジックそのものは外から読めません。
  • ライセンスが二層：ソースは Apache-2.0 ですが、ガイド本文は CC-BY-4.0 と README にあります（CC-BY の本文自体は配布物に含まれていません）。ガイドを引用・再配布するなら表示義務に注意します。
  • 万能ではない：レガシー検出（legacy-scan）は対象が全体の一部とされ、すべての古い書き方を捕まえるわけではありません。あくまで「最新の書き方へ寄せる補助」です。

とはいえ、AIにフロントエンドを書かせる人にとって、最新のWeb標準をエージェントの手元に置く発想は理にかなっています。学習データの古さをプロンプトで毎回直すより、スキルとして常設する方が確実です。「エージェントに何を常設で持たせるか」という点では、codex-plugin-ccとは｜Claude CodeからCodexにレビューと実装を委譲する公式プラグイン のようにエージェント間を橋渡しする仕組みや、context-mode（MCPサーバー）とは｜AIコーディングのトークン浪費をツール出力98%圧縮で防ぐ のようにトークンを節約する工夫とも地続きの話で、良い実例です。

参照ソース