Modern Web Guidance は、AI アシスト コーディング ワークフローに最新のベスト プラクティスを適用するエージェント スキルです。一般的なウェブ開発の問題に対する従来の回避策ではなく、新しいウェブ プラットフォーム機能を使用するソリューションにコーディング エージェントを誘導するのに役立ちます。
インストール
Modern Web Guidance スキルは、さまざまなエージェントにインストールできます。これにより、推奨されるワークフローを維持しながら、ガイダンスのメリットを享受できます。
modern-web-guidance CLI（推奨）
推奨されるインストール方法は、Chrome チームが作成した modern-web-guidance CLI を使用する方法です。modern-web-guidance
CLI を使用してスキルをインストールすると、スキルが自動的に最新の状態に保たれます。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
[Download Antigravity] をダウンロードし、インストール フロー中、または [設定] ページの [カスタマイズ]、[Google プラグインでビルド] から [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 Code で使用する Modern Web Guidance をインストールする手順は次の 3 つです。
1. マーケットプレイスを追加します。
/plugin marketplace add GoogleChrome/modern-web-guidance
2. マーケットプレイスからプラグインをインストールします。
/plugin install modern-web-guidance@googlechrome
3. プラグインを再読み込みします。
/reload-plugins
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
インストール前に確認する
インストールする前に、クエリで検索するか、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":"user-experience","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":"user-experience","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":"user-experience","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"
この場合、ユースケースのガイド Markdown がターミナルに表示されます。animate-to-from-top-layer他のユースケースの場合は、animate-to-from-top-layer
を有効なユースケース IDに置き換えます。
Modern Web Guidance を使用する理由
Modern Web Guidance スキルは、AI モデルをアシストしないウェブ デベロッパーに、次の 3 つの理由でメリットをもたらします。
- AI コーディング エージェントは、最新のウェブ開発の問題に対する古いソリューションをデフォルトで使用する傾向があります。これらのソリューションには、最新の CSS と HTML API で解決できる問題の機能を提供するための JavaScript が含まれていることがよくあります。
- AI モデルは、最新のウェブ プラットフォーム機能を認識していないか、誤った情報を持っていることがありました。
- 最後に、AI モデルは、特定のプロジェクトのベースライン要件に合わせてガイダンスを調整するのではなく、プロジェクト要件やブラウザのサポート基準を考慮しない古い推奨事項を作成する傾向があります。
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）を使用します。
- パスキー: パスキーの登録、認証、管理。
これらは、各分野のユースケースの一部です。すべてのユースケースを確認するには、ユースケースの完全なリストをご覧ください。
ベースライン
ベースラインは、主要なブラウザ エンジンで相互運用可能なウェブ機能をデベロッパーに明確に示します。ウェブ機能がベースラインの場合、ブラウザの互換性のレベルを信頼できます。ウェブ機能は、ベースラインで定義された次の 3 つのカテゴリのいずれかに分類されます。
- 利用が制限されている とは、機能が相互運用できないことを意味します。
- 新しく利用可能 とは、過去 30 か月以内に機能が相互運用可能になったことを意味します。
- 広く利用可能 とは、機能が 30 か月以上相互運用可能であることを意味します。
ベースラインはウェブ機能の相互運用性の定義ですが、プロジェクトの構成可能な側面でもあります。ベースライン
ターゲットを選択し、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 の各ユースケースにはガイドが含まれており、ほとんどのユースケースは AI エージェントを高品質の出力に誘導するために継続的に調整されています。
調整されたユースケースでは、自動 QA ハーネスを使用してエージェントの動作が正しいかどうかをテストします。Playwright は中心的な役割を果たします。
- 各ガイドについて、ガイドの実装の詳細が守られているかどうかをテストする Playwright スクリプトが開発されています。たとえば、
@media (prefers-reduced-motion: reduce)が要件である場合に、それが守られているかどうかをテストします。 - これらの Playwright スクリプトは、合格率 100% を想定する「正しい」参照デモ実装に対して継続的に調整されます。一方、スクリプトは、合格率 0% を想定する意図的に欠陥のある実装に対してチェックされます。
- 「正しい」実装と意図的に欠陥のある実装のいずれかまたは両方で、合格率がそれぞれ 100% と 0% にならない場合、ジェネレータは 100% の調整が達成されるまでコンテキストを使用して自動的に再試行します。
- 最後に、ベース アプリケーションでエンドツーエンドの評価が適用されます。これらの評価の 1 つはガイドなしで、タスクを完了するために Modern Web Guidance スキルを呼び出さずにデフォルトのトレーニング データを使用するコントロールです。もう 1 つの評価（実験）では、Modern Web Guidance スキルを使用して同じタスクに対処します。
Google の評価は、最先端のモデルとコーディング エージェントを使用して毎日実行され、ガイダンスの有無にかかわらずエージェントのパフォーマンスを明確に把握できます。平均して、エージェントに Modern Web Guidance を搭載すると、最新の効果的な手法の遵守が 37% 向上することが初期の結果で示されています。ただし、結果はプロジェクト要件、モデル、作成するプロンプト、使用するエージェント コーディング ツールによって異なる場合があります。
次のステップ
これで、Modern Web Guidance の概要と、AI コーディング ワークフローで最新のウェブ ベスト プラクティスを簡単に採用できる可能性について理解できました。Modern Web Guidance で提供されるスキルとユースケースを確認してください。