Modern Web Guidance とは

Modern Web Guidance は、Google Chrome チームが公開しているコーディングエージェント向けのオープンソースの「スキル」集と CLI である。エージェントが Web アプリを書く前に、現在のブラウザ標準（Popover API、<dialog>、CSS Anchor Positioning、コンテナクエリなど）と対応状況のデータを引いてから実装させ、「2019年風の JavaScript で何でも自前実装する」癖を直すことを目的にしている。ライセンスは Apache-2.0、導入は npx modern-web-guidance@latest install の1行で済む。

Chrome の公式ドキュメントによると、対象は100を超えるユースケースで、UX・CSS・パフォーマンス・フォーム・組み込み UI 部品・アクセシビリティ・組み込み AI・パスキーなどを含む。GitHub のソースリポジトリ（GoogleChrome/modern-web-guidance-src）は2026年11月11日時点でスター約1.4k で、同日 Hacker News に Show HN として載り話題になっている。本稿は Chrome 公式ドキュメントと GitHub の README を一次情報に、仕組み・各エージェントへの導入手順・使い方・類似アプローチとの違い・注意点を整理する。

- 何か: Web プラットフォームの知識・ベストプラクティス・ブラウザ互換データをエージェントに渡すスキル群。中身は「modern-web-guidance CLI を呼べ」とエージェントに指示するスキルで、ガイド本体は CLI が返す
- 方式: エージェントが search でガイドを検索し、retrieve でガイド ID を指定して取得してから実装する。検索はローカルで動き、API キーもネットワーク呼び出しも要らない（README 記載）
- 入手: npx modern-web-guidance@latest install。Apache-2.0。スキルに対応した任意のコーディングエージェントで使え、Chrome のドキュメントは Claude Code・Codex・Gemini CLI・Copilot CLI・Antigravity・Goose・Grok・Kimi Code などを挙げている

README によると、収録しているのは250の現代的な Web 機能（CSS・レイアウト140、HTML・DOM 36、JavaScript・API 74）と、203の実際の開発ユースケースである。ユースケースの領域にはアクセシビリティ、組み込み AI、フォーム、パフォーマンス、プライバシー、PWA、セキュリティ、WebAssembly、WebMCP なども含まれる。

コーディングエージェントは学習データに多く含まれる書き方を選びやすく、ブラウザが標準で提供するようになった機能でも、JavaScript の状態管理やライブラリで実装してしまうことがある。freeCodeCamp の解説記事（2026年6月24日付）は、「ボタンにホバーするとツールチップを出す」という依頼で、ガイドなしでは js-hidden クラスの切り替え、全ツールチップを閉じる関数、タッチ対応、外側クリック検出といった JavaScript の状態層が書かれた例を紹介している。ガイドありでは JavaScript なしで、popover="hint"、interestfor 属性、CSS Anchor Positioning、@starting-style を使った実装になったという。

LogRocket の記事（2026年7月22日付）も、同じタスク管理アプリのプロンプトを Gemini CLI で、スキルあり・なしの2つの Next.js プロジェクトに実行させた比較を載せている。結果は次のとおり。いずれも著者1人による1回の比較で、一般化はできない点に注意したい。

Chrome のドキュメントによると、仕組みは次の流れである。エージェントが Web 関連のタスクでスキルを有効にし、CLI の search でプロンプトに近いガイドを探し、retrieve でガイド ID を指定して本文を取得し、その内容に沿ってコードを書く。ガイドは説明文をもとに ID で選ばれる。README は、検索にオフラインで動く依存なしの埋め込みモデルと BM25 検索エンジンを組み合わせていると説明している。ガイドはトークン効率を意識して書かれ、モデルがすでに知っている内容は評価（eval）で削ぎ落とすという。

もう一つの要点が Baseline ターゲットである。Baseline は、ブラウザ機能の対応状況を段階で示す仕組みで、ドキュメントでは次の3段階として説明されている。

プロジェクトのターゲットは AGENTS.md や CLAUDE.md に書いて伝える。公式の例は「This project's Baseline target is Baseline 2024.」である。何も設定しない場合の既定は Widely available。ターゲットに入らない機能を使うガイドには、プログレッシブエンハンスメントなどのフォールバックが付き、ポリフィルは条件付きで読み込む設計になっている。

実験的な機能の扱いにも制限がある。単一のブラウザエンジンだけで実装されている「volatile」な機能と、Origin Trial の機能は、search では見つかっても retrieve では既定で取得できず、エージェントが不安定な API を勝手に採用しないようになっている。許可するにはプロジェクト直下の .mwgrc（ユーザー全体なら ~/.mwgrc）に設定を書く。

推奨は対話式のインストーラである。エージェントを検出し、導入先（プロジェクト単位またはグローバル）を選んでスキルを配置する。CLI 経由で入れると自動更新が有効になり、他の多くの方法では自動更新されないと公式ドキュメントは説明している。Node.js と npm が必要になる点は、npx を使うことからの推測で、公式ページには明記がない。

エージェントごとのコマンドは公式ドキュメントに次のとおり載っている（抜粋）。

Copilot CLI も Claude Code と同じ /plugin marketplace add の形式で、Grok・Kimi Code・JetBrains WebStorm・Antigravity アプリにもそれぞれの導入手順がある。Claude Code に入れたあとは、プロジェクト直下の .claude/skills/ にスキルファイルが置かれたかを確認するとよい（freeCodeCamp の手順）。

導入後は、普段どおり「ツールチップを作って」「モーダルを作って」と依頼するだけでよい。エージェントが Web 関連と判断すればスキルが働く。まず Baseline ターゲットを AGENTS.md（Claude Code なら CLAUDE.md）に1行書いておくと、提案される機能の範囲が決まる。

エージェントが何を受け取るかは、自分の手で確認できる。導入前でも search と retrieve は試せる。

公式ドキュメントは用途を4つに分けている。新しい UX を作る（アコーディオン、タブバー、コンテナクエリのダッシュボード）、古いコードを現代化する（モーダルを <dialog> へ、ツールチップを Popover API へ）、セキュリティを改善する（パスキーログイン、CSP のひな形、セキュリティ監査）、パフォーマンスを改善する（ホバー時のプリロード、INP・LCP の改善）。既存プロジェクトでは、legacy-scan で候補を洗い出してから現代化を依頼する流れが使いやすい。ただし README は legacy-scan の検出方法や出力形式まで説明していないため、出力を見て判断する必要がある。

エージェントに最新情報を渡す方法は他にもある。ライブラリの最新ドキュメントを取得する MCP（Context7 など）、MDN を引く MCP、プロジェクトに置く AGENTS.md や CLAUDE.md のルール、ESLint などのリンターである。Modern Web Guidance の特徴は、Web プラットフォーム全体を対象に、手書きで整えたガイドを Baseline の対応状況とセットで渡す点にある。

別系統の関連ツールとして、UI デザインの「AIっぽさ」を避けるスキルを扱ったHallmark の解説がある。見た目の指針を渡す Hallmark に対し、Modern Web Guidance は実装に使う Web 標準の選び方を渡す。役割が違うため、併用も考えられる。

Chrome のドキュメントによると、各ユースケースに eval があり、Playwright のスクリプトで @media (prefers-reduced-motion: reduce) などガイドの細部が守られているかを検査する。参照実装は100%合格、わざと欠陥を入れた実装は0%になることが条件で、満たすまで生成器が再試行する。さらに、ガイドなしの対照群と比べる end-to-end の評価を、現行のモデルとエージェントで週に数回実行している。初期の結果では、ベストプラクティスの遵守度が平均37ポイント向上したとされる。ただし同ページは、結果はプロジェクト・モデル・プロンプト・ツールで変わりうると断っており、方法の詳細は確認できなかった。

LogRocket と freeCodeCamp の記事は、導入時の注意点として次を挙げている。

- Chrome は初期プレビューと位置づけており、変化が速い
- 新しい Baseline 機能を優先するため、馴染みのない API が出てくる。対応ブラウザの確認が必要で、Chrome 専用の社内アプリには向いても、広く公開するサイトでは注意がいる
- interestfor（Interest Invokers API）は Chrome ではフラグ付きでポリフィルがある。CSS Anchor Positioning は Baseline 2025 とされる
- 成熟したアクセシビリティ部品や複数フレームワーク対応が必要な場面では、ライブラリを使うほうが適切なこともある
- インラインスタイルやキーフレームを全体の CSS に移すと、部品を削除したときに孤立した CSS が残りうる。クラス名の名前空間化が必要
- 生成されたコードのレビュー（キーボード操作、フォーカス、スクリーンリーダー、フォールバック）は引き続き必要

- npx ...@latest は実行のたびに npm から最新版を取得する。社内利用では、バージョンを固定するか、導入されるスキルの内容を確認してから使うのが無難である
- README は検索がオフラインでネットワーク呼び出し不要としているが、テレメトリについての記載は確認できなかった。厳格な環境では通信を自分で確認したい
- スキルは AGENTS.md や CLAUDE.md と同様、エージェントの挙動を変えるファイルである。導入前に配置先と内容を確認する
- 公式ページはアンインストール方法を明記していない。配置された .claude/skills/ などのスキルファイルを削除するか、各エージェントのプラグイン管理コマンドで外すことになる