Modern Web Guidance は、ウェブ プラットフォームの専門知識、ベスト プラクティス、ブラウザ互換性データをコーディング エージェントに直接組み込む一連のスキルです。これにより、コーディング エージェントをレガシー パターンから遠ざけ、最新のウェブ プラットフォームのパワーと機能を活用するソリューションに導くことができます。
インストール
Modern Web Guidance は、スキルをサポートする任意のコーディング エージェントにインストールして使用できます。
modern-web-guidance CLI（推奨）
推奨されるインストール方法は、Chrome チームが作成した modern-web-guidance CLI を使用することです。modern-web-guidance CLI を使用して Modern Web Guidance をインストールすると、自動更新が有効になります。modern-web-guidance CLI から次のようにインストールできます。
npx modern-web-guidance@latest install
必要に応じて、Chrome 拡張機能を開発している場合は、次のコマンドをおすすめします。
npx modern-web-guidance@latest install --choose
これにより、インタラクティブ ウィザードが実行され、スキルが好みに合わせてインストールされます。
modern-web-guidance CLI を使用せずに Modern Web Guidance をインストールする場合は、次のエージェント固有の手順をご覧ください。ただし、これらのオプションのほとんどは自動更新に対応していません。
Antigravity
Antigravity をダウンロードし、インストール フロー中に「modern-web-guidance」を有効にします。または、[設定] ページの [カスタマイズ]、[Build with Google Plugins] で有効にします。
Antigravity CLI
agy plugin install https://github.com/GoogleChrome/modern-web-guidance
Gemini CLI
gemini extensions install https://github.com/GoogleChrome/modern-web-guidance --auto-update
JetBrains WebStorm
Modern Web Guidance は、[設定] > [AI アシスタント] > [スキル] の [スキル マネージャー] で確認できます。スキルを選択して詳細ページを開きます。スキルをインストールするには、[インストール] ボタンをクリックして、現在の IDE インスタンスに適用します。
GitHub CLI
gh skill install GoogleChrome/modern-web-guidance
npx skills
npx skills add GoogleChrome/modern-web-guidance
Claude Code
claude plugin install modern-web-guidance@claude-plugins-official
Claude Code CLI
Claude Code CLI で使用するために Modern Web Guidance をインストールする手順は次の 3 つです。
1. マーケットプレイスを追加します。
/plugin marketplace add GoogleChrome/modern-web-guidance
2. マーケットプレイスからプラグインをインストールします。
/plugin install modern-web-guidance@googlechrome
3. プラグインを再読み込みします。
/reload-plugins
Codex
codex plugin marketplace add GoogleChrome/modern-web-guidance
codex plugin add modern-web-guidance@googlechrome
Copilot CLI
Copilot で使用する Modern Web Guidance をインストールするには、次の 2 つの手順を行います。
1. マーケットプレイスを追加します。
/plugin marketplace add GoogleChrome/modern-web-guidance
2. マーケットプレイスからプラグインをインストールします。
/plugin install modern-web-guidance@googlechrome
ガチョウ
goose plugin install https://github.com/GoogleChrome/modern-web-guidance --auto-update
Grok
grok plugin install https://github.com/GoogleChrome/modern-web-guidance --trust
Kimi コード
/plugins install https://github.com/GoogleChrome/modern-web-guidance
インストール前に確認する
インストール前に、クエリで検索するか、ID でガイドを取得して、Modern Web Guidance ガイド ライブラリを評価します。これを行うには、CLI の search コマンドを使用して、プロンプトを使用してユースケース ID を検索します。
npx modern-web-guidance@latest search "animate a dialog modal backdrop"
これにより、ターミナルに JSON オブジェクトが出力されます。
[{"id":"light-dismiss-a-dialog","description":"Create a modal dialog that can be closed via light dismiss (i.e. clicking or tapping outside of the dialog)","category":"ui-behaviors","featuresUsed":["<dialog closedby>"],"tokenCount":1085,"similarity":0.7076},
{"id":"animate-to-from-top-layer","description":"Animate elements such as dialogs, popovers, and tooltips as they're entering/exiting the top layer.","category":"ui-behaviors","featuresUsed":["::backdrop","<dialog>","overlay","Popover","@starting-style","transition-behavior"],"tokenCount":1541,"similarity":0.6842},
{"id":"declarative-dialog-popover-control","description":"Toggle the visibility of a dialog or popover from a button without writing JavaScript.","category":"ui-behaviors","featuresUsed":["Invoker commands","Popover","<dialog>"],"tokenCount":2684,"similarity":0.5685},
{"id":"html","description":"Action-oriented guidelines for modern HTML architecture, semantics, native interactive APIs (Dialog, Popover, Details), focus management, and resource prioritization. Use this guide when structuring web documents, implementing native overlays, or optimizing resource loading order.","category":"html","tokenCount":5484,"similarity":0.5471},
{"id":"accessibility","description":"Actionable coding guidelines for building accessible web applications, covering semantic HTML, focus management, forms, media, and testing. Use this skill when auditing or implementing accessibility features, keyboard navigation, or ARIA.","category":"accessibility","tokenCount":7129,"similarity":0.5102}]
description の値を読み取ると、目標を最もよく反映する id を選択し、retrieve コマンドを使用できます。
npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"
この場合、animate-to-from-top-layer ユースケースのガイド Markdown がターミナルに表示されます。他のガイドの場合は、animate-to-from-top-layer を有効なガイド ID に置き換えます。
Modern Web Guidance を使用する理由
Modern Web Guidance は、次の 3 つの理由から、アシストなしの AI モデルよりもウェブ デベロッパーにメリットをもたらします。
- AI コーディング エージェントは、現代のウェブ開発の問題に対して、古い、時代遅れのソリューションをデフォルトで使用する傾向があります。これらのソリューションには、最新の CSS API と HTML API でより適切に解決できる問題の機能を提供する JavaScript が含まれていることがよくあります。
- AI モデルはこれまで、最新のウェブ プラットフォーム機能を認識していなかったり、不正確な情報を持っていたりしました。
- 最後に、AI モデルは、特定のプロジェクトのBaseline要件に合わせてガイダンスを調整するのではなく、プロジェクトの要件やブラウザのサポート基準を考慮しない、古い推奨事項を提示する傾向があります。
Modern Web Guidance は、こうした欠点に対処し、AI を活用したコーディング ワークフローに、新しいウェブ プラットフォーム機能を最初に採用するためのツールを、フォールバックを考慮して提供します。
Modern Web Guidance の内容
Modern Web Guidance には、複数のコア分野にわたる 100 以上のウェブ開発ユースケースのベスト プラクティスが含まれています。内部的には、これはコーディング エージェントに modern-web-guidance CLI を呼び出してユースケースに最適なガイダンスを見つけて取得する方法を指示するエージェント スキルです。
- ユーザー エクスペリエンス: ビュー遷移、CSS
scrollbar-colorスタイル、開始アニメーションと終了アニメーション。 - CSS: コンテナクエリ、
oklchなどの最新の色空間、CSS サブグリッド レイアウト、text-wrap、タイポグラフィの行の高さのトリミング。 - パフォーマンス: Interaction to Next Paint（INP）診断、長いタスクを分割するための
scheduler.yield、バックグラウンド タスクのスケジューリング、画像読み込みの優先順位付け。 - フォーム: 入力フィールドの自動サイズ調整（
field-sizing: content）、:user-invalidを使用した正確な検証スタイル。 - 組み込みの UI コンポーネント: ダイアログの直接制御、ツールチップの CSS アンカー配置、
popover。 - ユーザー補助機能: ユーザー補助機能に対応したエラー通知とキーボード フォーカス管理。
- 組み込み AI: ローカルのオンデバイス クライアント モデル（ネイティブの言語検出、要約、翻訳 API）を使用します。
- パスキー: パスキーの登録、認証、管理。
以下に、各カテゴリのガイドの一部を示します。すべてのガイドを確認するには、ガイドの全一覧をご覧ください。
ベースライン
Baseline は、主要なブラウザ エンジンで相互運用可能なウェブ機能をデベロッパーに明確に示します。ウェブ機能が Baseline の場合、ブラウザの互換性レベルを信頼できます。ウェブ機能は、Baseline で定義されている 3 つのカテゴリのいずれかに分類されます。
- 在庫僅少とは、機能が相互運用可能でないことを意味します。
- 「新たに利用可能」とは、過去 30 か月以内に相互運用可能になった機能であることを意味します。
- 「広く利用可能」とは、その機能が少なくとも 30 か月以上相互運用可能であることを意味します。
Baseline はウェブ機能の相互運用性の定義ですが、プロジェクトの構成可能な側面でもあります。Baseline ターゲットを選択し、AGENTS.md ファイルまたは CLAUDE.md ファイルに追加して、それを使用するようにプロジェクトを構成できます。次に例を示します。
This project's Baseline target is Baseline 2024.
<other project info...>
Modern Web Guidance と機能のフォールバック
Modern Web Guidance では、さまざまな最新のウェブ機能が使用されています。これらの機能の一部は、Baseline の「新規利用可能」または「広く利用可能」に該当する可能性がありますが、一部は「在庫僅少」に該当する可能性があります。機能が広く利用できない場合、ユースケース ガイドには、その機能をサポートしていないブラウザでより広範な互換性を確保する方法について、エージェント向けの具体的な手順が記載されています。多くの場合、フォールバックはプログレッシブ エンハンスメントとして実装され、最新の機能がサポートされている場所であればどこでも使用できます。サポートされていないブラウザでポリフィルが必要な場合、エージェントは常に条件付きで読み込むように指示されるため、必要な場合にのみコストが発生します。
精度はどのように確保されていますか？
Modern Web Guidance の各ユースケースには、高品質な出力を確保するために継続的に調整される一連の評価が含まれています。
ユースケース評価では、自動化された QA ハーネスを実行して、エージェントの正しい動作をテストします。Playwright が中心的な役割を果たします。
- 各ガイドについて、ガイドの実装の詳細が遵守されているかどうか（たとえば、
@media (prefers-reduced-motion: reduce)が要件である場合に、それが遵守されているかどうか）をテストする Playwright スクリプトが開発されています。 - これらの Playwright スクリプトは、100% の合格率を想定した「正しい」リファレンス デモ実装に対して継続的に調整されます。もう一方のスクリプトは、意図的に欠陥のある実装に対してチェックを行い、0% の合格率を想定しています。
- 「正しい」実装と意図的に欠陥のある実装のいずれかまたは両方で、それぞれ 100% と 0% の合格率が得られない場合、ジェネレーターは 100% のキャリブレーションが達成されるまで、コンテキストを使用して自動的に再試行します。
- 最後に、ベース アプリケーションのエンドツーエンド評価が適用されます。これらの評価の 1 つは、Modern Web Guidance を呼び出さずにデフォルトのトレーニング データを使用してタスクを完了する、ガイドなしの評価（コントロール）です。別の評価（テスト）では、Modern Web Guidance を使用して同じタスクを処理します。
Google の評価は、最先端のモデルとコーディング エージェントを使用して週に複数回実行され、Google のガイダンスがある場合とない場合のエージェントのパフォーマンスを明確に把握できます。初期の結果では、エージェントが Modern Web Guidance を使用した場合、最新のベスト プラクティスの遵守率が平均で 37 パーセント ポイント向上することが示されています。ただし、結果はプロジェクトの要件、モデル、作成するプロンプト、好みのエージェント コーディング ツールによって異なる場合があります。
揮発性機能のガイダンスを有効にする
不安定な機能とは、1 つのブラウザ エンジンにのみ実装されている試験運用版のウェブ機能であり、互換性を破る変更が加えられる可能性があります。これらの機能のガイダンスを有効にするには、プロジェクトのルートで次のコマンドを実行します。
npx modern-web-guidance@latest set-allow-volatile-features
オリジン トライアルの機能に関するガイダンスを有効にする
試験運用版の機能が最初にリリースされるときは、通常、フラグの背後に隠されているか、オリジン トライアルを通じて本番環境のウェブサイトでのみ利用できるようになっています。一部の Modern Web Guidance ガイドではこれらの機能を使用しますが、これらの機能のガイダンスは、デフォルトではコーディング エージェントに提供されません。これらの機能に関するガイダンスを取得するには、プロジェクトのルートで次のコマンドを実行します。
npx modern-web-guidance@latest set-allow-origin-trials
次のステップ
これで、Modern Web Guidance の概要と、AI コーディング ワークフローに最新のウェブのベスト プラクティスを簡単に導入できる可能性について理解できました。Modern Web Guidance が提供するガイドを確認できるようになりました。