Modern Web Guidance

GoogleChrome/modern-web-guidance — コーディングエージェントに モダン Web プラットフォームの専門知識を注入する SKILL.md + CLI。Google Chrome / Microsoft Edge チームとコミュニティが支援。README と SKILL.md から要約。

1 — 概要

102

Web 機能（機能一覧）

128

ユースケースガイド

スキルパック

+33pp

eval 代表 uplift（guided）

解決する問題

LLM の学習データにはレガシー実装が多く、エージェントは 肥大化した JavaScript で、すでにネイティブ API がある課題を実装しがちです。Modern Web Guidance は、トークン効率を意識した 実運用向けガイドをコンテキストへ返し、パフォーマンス・アクセシビリティ・適切なフォールバックを揃えます。

HTML/CSS とクライアント JS のタスクでは、SKILL.md が 最初に実行することを要求します（View Transitions、Popover、INP、Passkeys、Built-in AI など）。

開発者プロンプト — 「ダイアログのバックドロップをアニメーション」

↓ search

CLI — 類似ユースケース ID を JSON で返す

↓ retrieve

ガイド Markdown — エージェントのコンテキストへ

2 — CLI の流れ（search → retrieve）

SKILL.md の手順

エントリは npm パッケージ modern-web-guidance（bin → modern-web.mjs）。実装の詳細は modern-web-guidance-src、公開用リポジトリはスキル配布専用です。

Step 1 — search

ユースケース検索

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

返却は JSON 配列（id、description、category、featuresUsed、tokenCount、similarity）。曖昧なときは list で全ガイドを一覧できます。

Step 2 — retrieve

ガイド本文の取得

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

複数 ID はカンマ区切り。出力は Markdown の実装手順。フレームワーク非依存なので、React / Vue / Angular へはプロジェクトに合わせて適用します。

ブラウザサポート: Baseline Widely available はフォールバック不要が既定。それ以外はガイドの推奨に従い、ユーザーがブラウザ方針（例: Safari 17.4+、ポリフィル禁止）を定義していればそれを優先します。

flowchart TD
  A[エージェント: Web 実装タスク] --> B{SKILL トリガー?}
  B -->|HTML/CSS/クライアント JS| C[npx modern-web-guidance search]
  B -->|バックエンド/CI のみ| Z[スキップ]
  C --> D[関連 id を選択]
  D --> E[npx retrieve id]
  E --> F[ガイドをコンテキストに載せる]
  F --> G[ネイティブ API で実装]

3 — カバーする分野

User Experience

View Transitions、スクロール駆動アニメ、:has()、ダークモード、パララックス、3D シーン内 UI など。

CSS Layout

コンテナクエリ、subgrid、oklch、text-wrap、行高トリミング。

Performance

LCP / INP、content-visibility、Fetch Priority、scheduler.yield、長タスク分割。

Forms & UI

Anchor Positioning、Popover API、:user-invalid、オートフィル、カスタム <select>。

Accessibility

エラー告知と aria-invalid の同期、キーボードフォーカス管理。

Built-in AI / WebMCP

オンデバイス翻訳・要約・言語検出、宣言的 WebMCP（エージェント向けフォーム）。

ガイド例: navigation-drawer（README 参照）。

4 — リポジトリ構成とスキルパック

配布物

パス / パック	役割
`skills/modern-web-guidance/SKILL.md`	メインスキル（search / retrieve 手順、トリガー条件）
`skills/modern-web-guidance/guides/`	カテゴリ別 Markdown ガイド（accessibility, css, forms, performance 等）
`skills/chrome-extensions/`	Manifest V3・拡張 API・Web Store 向け別パック（~181 tokens 見出し）
`policies/modern-web-guidance.toml`	ポリシー定義
`.cursor-plugin/` / `.claude-plugin/`	Cursor / Claude Code マーケットプレイス用メタデータ

npx modern-web-guidance@latest install --choose でインストールするパックを選択できます。

5 — インストール

代表的な方法

対話式ウィザード（推奨）

npx modern-web-guidance@latest install

インストールせず試す場合:

検索・取得のみ

npx modern-web-guidance@latest search "…"
npx modern-web-guidance@latest retrieve "guide-id"

その他

更新: npx modern-web-guidance@latest update（install 経由の場合）
Claude Code: /plugin marketplace add GoogleChrome/modern-web-guidance など（README 参照）
テレメトリ無効: シェルに DISABLE_TELEMETRY=1（収集内容は serving 実装を参照）

Windows: npx が失敗する場合は npx.cmd。オフライン時は npx --offline を試します。

6 — 評価ハーネス

校正ループ

ガイドは Playwright グレーダーと E2E エージェント eval で検証されます。開発者プロンプトは API 名を避け、エージェントがガイドを自然に発見できるかを測ります。

日付	エージェント	タスク / アサーション	Unguided → Guided
2026-05-18	claude_code (opus-4-7)	75 / 603	52% → 85%（+33pp）
2026-05-16	codex_cli (gpt-5.5)	75 / 603	49% → 82%（+33pp）
2026-05-15	antigravity	74 / 600	47% → 91%（+44pp）

出典: README「Recent eval results snapshot」（抜粋）。

7 — 参照

公式リンク

GitHub: GoogleChrome/modern-web-guidance — スキル配布リポジトリ
modern-web-guidance-src — 実装・CONTRIBUTING
npm: modern-web-guidance
ドキュメント由来: MDN Web Docs、W3C / WHATWG / IETF 仕様（README Attribution）