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 をダウンロードし、インストール フロー中に、または [設定] ページの [カスタマイズ] > [Build with Google Plugins] で「modern-web-guidance」を有効にします。
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 Code
/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 は、次の 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 の Newly available または Widely available に該当する可能性がありますが、一部は在庫僅少に該当する可能性があります。機能が広く利用できない場合、ユースケース ガイドには、その機能をサポートしていないブラウザでより広範な互換性を確保する方法に関する具体的な手順が記載されています。多くの場合、フォールバックはプログレッシブ エンハンスメントとして実装され、最新の機能がサポートされている場所であればどこでも使用できます。サポートされていないブラウザでポリフィルが必要な場合、エージェントは常に条件付きで読み込むように指示されるため、必要な場合にのみコストが発生します。
精度はどのように確保されていますか？
Modern Web Guidance の各ユースケースには、高品質な出力を確保するために継続的に調整される一連の評価が含まれています。
ユースケース評価では、自動 QA ハーネスを実行してエージェントの動作が正しいかどうかをテストします。このテストでは、Playwright が中心的な役割を果たします。
- 各ガイドについて、ガイドの実装の詳細が遵守されているかどうか（たとえば、
@media (prefers-reduced-motion: reduce)が要件である場合に遵守されているかどうか）をテストする Playwright スクリプトが開発されています。 - これらの Playwright スクリプトは、100% の合格率を想定した「正しい」リファレンス デモ実装に対して継続的に調整されます。もう一方の端では、スクリプトは、0% の合格率を想定した意図的に欠陥のある実装に対してチェックを行います。
- 「正しい」実装と意図的に欠陥のある実装のいずれかまたは両方で、それぞれ 100% と 0% の合格率が得られない場合、ジェネレータは 100% のキャリブレーションが達成されるまで、コンテキストを使用して自動的に再試行します。
- 最後に、ベース アプリケーションのエンドツーエンド評価が適用されます。これらの評価のうち 1 つは、コントロールとして、Modern Web Guidance を呼び出さずにデフォルトのトレーニング データを使用してタスクを完了する、ガイドなしの評価です。もう 1 つの評価（テスト）では、Modern Web Guidance を使用して同じタスクを処理します。
評価は、最先端のモデルとコーディング エージェントを使用して週に複数回実施され、エージェントがガイダンスの有無によってどのようにパフォーマンスを発揮するかを明確に把握できます。初期の結果によると、Modern Web Guidance を利用したエージェントは、最新のベスト プラクティスの遵守率が平均で 37 パーセント ポイント向上しています。ただし、結果はプロジェクトの要件、モデル、作成するプロンプト、好みのエージェント コーディング ツールによって異なる場合があります。
次のステップ
これで、Modern Web Guidance の概要と、AI コーディング ワークフローにモダンウェブのベスト プラクティスを簡単に導入できる可能性について理解できました。これで、Modern Web Guidance が提供するガイドを確認できるようになりました。