GoogleChrome/modern-web-guidance-src — AI向けモダンWeb指針ツール

概要

GoogleChrome/modern-web-guidance-src は、AIコーディングエージェントに対してモダンなWebプラットフォームの専門知識、ベストプラクティス、およびブラウザ互換性データを直接提供するためのツールセット「Modern Web Guidance」のソースコードリポジトリです。本リポジトリには、ガイドラインコンテンツの作成・調整・評価を行うためのコードやドキュメントが含まれています。

近年、LLM（大規模言語モデル）を活用したコーディングエージェントの利用が急速に拡大しています。しかし、モデルの訓練データには過去の膨大なレガシーコードが含まれているため、現代のWeb標準であれば数行のCSSやネイティブJavaScript APIで実現できる処理に対して、不要に肥大化した古いライブラリや冗長なスクリプトを提案してしまうケースが少なくありません。Modern Web Guidance は、エージェントのコンテキストウィンドウに必要な最新の技術指針を届けることで、レガシーな実装パターンから脱却し、最新のWeb機能を活かした堅牢なコード生成を支援します。

本プロジェクトは Google Chrome チームだけでなく、Microsoft Edge、Mozilla Firefox、MDN チーム、そしてWeb開発コミュニティによって共同で管理（スチュワード）されています。AIエージェントを活用した開発フローをモダン化したいエンジニアや、生成されるWebフロントエンドコードの品質を高めたい開発者に向いています。

主な特徴

READMEの記述に基づき、Modern Web Guidance の主な特徴を整理します。

コーディングエージェントへの最新Web知識の直接注入 CLIツールを介して、ターゲットを絞った専門家監修のガイドラインをエージェントのコンテキストウィンドウへ渡します。これにより、モデルが誤用しやすい最新ブラウザAPIの構造化を助けます。
パフォーマンスとアクセシビリティの重視 重いPolyfillやレガシーライブラリの利用を避け、ブラウザ自身が最適化可能でアクセシビリティ機能が最初から組み込まれているプラットフォームネイティブのAPIを優先するように誘導します。
トークン効率を考慮したガイド設計 LLMのコンテキスト制限に配慮し、評価（evals）を実行しながらモデルが既に理解している不要な基礎知識を削ぎ落とすチューニングが行われています。
250以上のモダンWeb機能をカバー CSSやレイアウト（140機能以上）、ユーザー体験、パフォーマンス、フォーム・ネイティブUI、アクセシビリティ、クライアントサイドBuilt-in AIまで、ここ数年の新機能から先端機能まで網羅しています。
レガシーコードの検出スキャン機能 プロジェクトのコードベースをスキャンし、最新のWeb標準へ置き換え可能な古いパターンを検出するコマンドが用意されています。

使い方

READMEには、npx コマンドを通じて対話型ウィザードを実行したり、個別の機能を直接呼び出したりする手順が記載されています。

クイックスタート（インストール）

Modern Web Guidance をインストールするための対話型ウィザードは、以下のコマンドで起動できます。

npx modern-web-guidance@latest install

インストールせずに各機能を試す場合

インストールを行わずに、CLIの各種コマンドを単発で実行して挙動を確認することも可能です。

1. 関連するガイドラインを検索する

実装したい内容に関するキーワードを指定して検索を行います。

npx modern-web-guidance@latest search "animate a dialog modal backdrop"

2. ガイドラインIDを指定して取得する

ガイドIDを直接指定することで、該当するベストプラクティスや実装指針を取得できます。

npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"

3. コードベース内のレガシーパターンをスキャンする

現在の作業ディレクトリや指定パスをスキャンし、モダンなWeb標準へリプレイスできる箇所をチェックします。

npx modern-web-guidance@latest legacy-scan .

技術的なポイント

TypeScript による実装と評価基盤

リポジトリの主要言語は TypeScript であり、ガイダンスの生成・提供にとどまらず、それらのガイダンスを継続的に測定・評価（Evaluation）するためのダッシュボードやシステムが構築されています。

6つの主要領域（Core Disciplines）

本プロジェクトでカバーされている領域は以下の6点に整理されています。

User Experience: View Transitions、出入りアニメーション、パララックススクロール、CSS scrollbar-color など滑らかなビジュアル表現
CSS Layout: コンテナクエリ、subgrid、oklch などの最新色空間、テキスト折り返し調整、行の高さ調整
Performance: インスタントプリロード、INP（Interaction to Next Paint）の診断、scheduler.yield によるタスクスケジューリング
Forms & UI: Tooltip向けの Anchor Positioning、Popover API、`` 要素、:user-invalid バリデーション、自動サイズ調整フィールド
Accessibility: スクリーンリーダーおよびキーボード操作性、コンテンツのナビゲーションと発見しやすさ
Built-in AI: ブラウザ内蔵のローカルクライアントモデル（翻訳、要約、言語検出API）

ブラウザ主要ベンダーとMDNによる連携

単一の企業・ブラウザに閉じた取り組みではなく、Google Chrome、Microsoft Edge、Mozilla Firefox、そして MDN Web Docs の各チームが関与しています。これにより、特定ブラウザの独自実装に偏らず、Web標準やブラウザ互換性の観点を反映したガイダンス設計が目指されています。

注意点

リポジトリの役割: 本リポジトリ（modern-web-guidance-src）は、配信対象となる配布物（GoogleChrome/modern-web-guidance）の「ソースコード・評価用リポジトリ」という位置づけです。
ライセンス: Apache License 2.0 で公開されています。利用や改変にあたってはライセンス条件を確認してください。
前提環境: README上には Node.js やエージェント実行環境の具体的なバージョン要件は明記されていませんが、npx コマンドが実行できる Node.js 環境が必要です。
エージェント側の統合: CLIで検索・取得したテキストをどのようにAIエージェントのプロンプトやコンテキストへ統合するかは、利用しているエージェント環境（各種コーディングアシスタント製品など）側の仕様や設定に依存します。

まとめ

GoogleChrome/modern-web-guidance-src は、LLMが学習データの影響で古いWeb実装を出力しがちな問題を解消するため、主要ブラウザベンダーとコミュニティが協力して開発しているプロジェクトです。トークン効率を高めた250以上の最新Web機能ガイドやコードベースのスキャン機能を通じて、AIエージェントを活用した開発をより堅牢かつ標準準拠なものへ導く取り組みとして注目されます。