Modern Web Guidance は、ウェブ プラットフォームの専門知識、ベスト プラクティス、ブラウザ互換性データをコーディング エージェントに直接埋め込む一連のスキルです。コーディング エージェントが従来のパターンから離れ、最新のウェブ プラットフォームのパワーと機能を活用したソリューションに向かうように導きます。
インストール
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] と、インストール フローで [modern-web-guidance] を有効にするか、[設定] ページの [カスタマイズ]、[Google プラグインでビルド] から有効にします。
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 をインストールする手順は次のとおりです。
1. マーケットプレイスを追加します。
/plugin marketplace add GoogleChrome/modern-web-guidance
2. マーケットプレイスからプラグインをインストールします。
/plugin install modern-web-guidance@googlechrome
3. プラグインを再読み込みします。
/reload-plugins
Copilot CLI
Copilot で使用するために Modern Web Guidance をインストールする手順は次のとおりです。
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 スキルは、次の 3 つの理由から、AI モデルを単独で使用するよりもウェブ デベロッパーにとってメリットがあります。
- AI コーディング エージェントは、最新のウェブ開発の問題に対して、古いソリューションをデフォルトで使用する傾向があります。これらのソリューションには、最新の CSS API と 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 は、さまざまな最新のウェブ機能を使用します。これらの機能の一部は、ベースラインで新しく利用可能または広く利用可能ですが、在庫僅少の場合もあります。機能が広く利用できない場合は、ユースケース ガイドで、機能をサポートしていないブラウザで互換性を高める方法について具体的な手順がエージェントに提供されます。多くの場合、フォールバックはプログレッシブ エンハンスメントとして実装され、最新の機能はサポートされている場所で使用できます。サポートされていないブラウザでポリフィルが必要な場合、エージェントは常に条件付きで読み込むように指示されるため、必要な場合にのみ費用が発生します。
精度はどのように確保されますか？
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 スキルを使用して同じタスクに対処します。
評価は、最先端のモデルとコーディング エージェントを使用して毎日実行され、ガイダンスの有無にかかわらずエージェントのパフォーマンスを明確に把握できます。平均して、初期の結果では、エージェントに Modern Web Guidance を搭載した場合、最新のベスト プラクティスへの準拠が 37% 向上しています。ただし、結果は、プロジェクト要件、モデル、作成するプロンプト、使用するエージェント コーディング ツールによって異なる場合があります。
次のステップ
これで、Modern Web Guidance の概要と、AI コーディング ワークフローで最新のウェブ ベスト プラクティスを簡単に採用できる可能性について理解できました。Modern Web Guidance で提供されるスキルとユースケースを確認してください。