Claude Codeにmodern-web-guidanceを入れて最新CSSを使わせる
Google Chromeチームのmodern-web-guidanceは、古い書き方に流れがちなフロントエンド生成を最新のWeb標準へ寄せます。導入手順、search・retrieve、CLAUDE.mdへの足し方を扱います。
modern-web-guidanceは、Google Chromeチームが公開しているClaude Code向けのプラグインです。コーディングエージェントが古い書き方に流れやすいWebフロントエンドの実装を、最新のWeb標準の書き方へ寄せます。dialogやpopoverで足りる場面でJavaScriptを山ほど書く、といった癖を減らす狙いです。公式READMEのインストール手順は/plugin marketplace addと/plugin installの2コマンドで、入れたあとはエージェントが必要な場面で自動で呼び出します。ここでは導入、手元での動作確認、収録内容、CLAUDE.mdとの併用までを順に扱います。
modern-web-guidanceは何を足すプラグインか
modern-web-guidanceは、ブラウザAPI・レイアウト・パフォーマンスなどのベストプラクティスをスキルとしてエージェントに持たせるプラグインです。Google Chromeチーム・Microsoft Edgeチーム・Web開発コミュニティの支援を受けたプロジェクトとされています。
背景にある問題設定は明快です。LLMの学習データには古いコードが大量に含まれるため、エージェントは今ならネイティブ機能で済む処理にも肥大化したJavaScriptを書きがちです。APIの存在を知っていても、実運用に耐える最新の実装パターンの密度が足りません。
そこでスキルのCLIが、質問に合うガイドを検索してエージェントのコンテキストへ返します。README上の重点は次の3つです。
ガイドが重点を置く3つの領域
モダンなブラウザAPI
モデルが誤用しがちなAPIの組み立て方を示します。
パフォーマンスとアクセシビリティ
ブラウザが最適化できるプラットフォーム標準のAPIを優先し、アクセシビリティの仕組みが組み込まれたものを選びます。
軽い代替手段
重いポリフィルや旧来のライブラリではなく、軽量なフォールバックを使わせます。
同じ「Claude Codeで特定領域の精度を上げる」プラグインでも、security-guidanceプラグインは編集のたびに脆弱性を検査する側です。modern-web-guidanceは検査ではなく、書く前に参照する知識を渡す側にあたります。
入れる前に知っておくこと
導入前に押さえておきたい点は3つあります。
- プレビューリリースです。READMEに「新しい内容を継続的に追加している」と注記があり、収録内容は今後も変わります
- npxでの実行が前提です。内容が古くならないようにnpxを使う設計で、CLI自体はオフラインで動き、プライベートかつローカルで完結すると説明されています
- 匿名の利用情報が収集されます
収集項目はインストール数、呼び出し元のエージェント名、取得したガイドのID、エージェントが生成した検索クエリです。ユーザーの生のプロンプトは収集しないとされています。止めたいときはシェルの設定ファイルに次の1行を足します。
export DISABLE_TELEMETRY=1検索クエリは外部へ送られるため、社内ネットワークの制約やプライバシーの方針と照らして先に確かめられます。
Claude Codeへのインストール手順
Claude Codeでは、マーケットプレイスの追加、プラグインの導入、再読み込みの順に進めます。
/plugin marketplace add GoogleChrome/modern-web-guidance
/plugin install modern-web-guidance@googlechrome
/reload-plugins手順にはもう1行あり、/pluginを開いてGoogleChromeマーケットプレイスを選び、Enterを押してAutoUpdateを有効にします。更新を手作業で追いたくなければ、この設定を入れておく形です。
なお、Anthropic公式マーケットプレイスのカタログ(claude-plugins-official)にもmodern-web-guidanceのエントリがあり、作者はGoogle Chrome、カテゴリはdevelopment、案内先はgoo.gle/modern-web-guidanceです。どちらの経路で入れても、上のREADME手順のようにマーケットプレイス名を付けて指定すれば迷いません。Claude Code側のプラグイン操作の基本は、公式のプラグイン導入ドキュメントにある/plugin install <plugin>@<marketplace>の形です。公式マーケットプレイスの全体像は公式マーケットプレイスのプラグイン一覧の記事にまとめています。
Claude Code以外のエージェント向けの経路も、READMEにはまとまっています。
| 利用環境 | READMEの手順 |
|---|---|
| 対話ウィザード | READMEの手順npx modern-web-guidance@latest install |
| Vercel Skills CLI | READMEの手順npx skills add GoogleChrome/modern-web-guidance |
| GitHub CLI | READMEの手順gh skill install GoogleChrome/modern-web-guidance |
| Claude Code | READMEの手順/plugin marketplace addと/plugin install(上記) |
このほかGitHub Copilot CLI、OpenAI Codex、Google Antigravity、Grok Build CLI、Kimi Code向けの手順も載っています。複数のエージェントを併用するチームでも、同じ内容を共有できます。
手元で検索と取得を試す
プラグインを入れなくても、CLIだけなら試せます。試すのは検索と取得の2コマンドです。
npx modern-web-guidance@latest search "animate a dialog modal backdrop"
npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"searchは質問文に合うガイドを探し、retrieveはガイドIDを指定して本文を取り出します。エージェントも同じ流れで動きます。仕組みは次の3段階です。
エージェントがガイドを取り込むまで
- 1
スキルが有効になる
関連するタスクが来ると、エージェントがmodern-web-guidanceスキルを呼び出します。Web標準に関する質問ではCLIを使うよう指示されています。
- 2
ローカルで意味検索する
search "<query>"を実行します。照合にはオフラインで動くCPU向けのTensorFlow.jsモデルを使い、ネットワーク呼び出しもAPIキーも要りません。 - 3
ガイドを取得する
retrieve <guide-id>でガイドを取り、コードパターン・落とし穴・フォールバックを自分のコンテキストへ取り込みます。
動作確認の観点では、まず自分のプロジェクトで使いそうな質問をsearchに投げ、候補のガイドIDが期待どおり出るかを見ます。ここでIDが出れば、エージェントが自動で引ける状態です。
収録範囲は232機能、どこまで頼れるか
収録されているのはCSS・HTML・JavaScriptの3分野、合計232のWeb機能です。内訳は次のとおりです。
| 分野 | 機能数 |
|---|---|
| CSSとレイアウト | 機能数128 |
| HTMLとDOM | 機能数36 |
| JavaScriptとAPI | 機能数68 |
ガイド自体は別の分類で整理されており、一覧には次のカテゴリが並びます。
- accessibility・built-in-ai・css・forms・html・js
- performance・privacy・pwa・security
- ui-atoms・ui-behaviors・ui-components・visual-design
- wasm・webmcp
具体例を挙げると、次のガイドがあります。
animate-to-from-top-layer: ダイアログやポップオーバーが最前面レイヤーに出入りするときのアニメーションdeclarative-dialog-popover-control: JavaScriptなしでボタンからダイアログやポップオーバーを開閉する方法identify-inp-causes: INP(Interaction to Next Paint)が悪化する原因となる、重いJavaScriptの特定trusted-types: DOM型XSSをTrusted Typesで防ぐ実装passkey-registration: 既存アカウントへのパスキー登録
ここで注意したいのは、webmcpのような先端領域も含む点です。ブラウザ対応が限られる機能は、ガイドが示すフォールバックの方針(追加機能は古いブラウザに無視させ、重要な挙動には低コストの代替を書く)とあわせて使います。
安全に取り入れるための方針は次の4点です。
- 追加的な拡張(投機的プリロードなど)と、重要な挙動(ダイアログ制御やネットワークのビーコンなど)を区別する
- ポリフィルは50行未満の軽い自前実装か、条件付きで読み込むものにとどめる
fetchLater()の64KBペイロード上限や、macOS固有のスクロールバー挙動のような癖を文書化する- Baselineプロジェクトの互換性データを使い、対応ブラウザの設定に合わせて適応する
chrome-extensionsスキルとの使い分け
リポジトリには2つのスキルパックがあり、--chooseを付けると入れるものを選べます。
npx modern-web-guidance@latest install --choose表記上、modern-web-guidanceが約234トークンで、モダンなブラウザAPI・レイアウト・パフォーマンスを扱います。chrome-extensionsは約181トークンで、Manifest V3・バックグラウンドワーカー・拡張機能API・Chrome Web Storeでの公開を扱います。
つまりWebサイトの実装なら前者、Chrome拡張の開発なら後者です。拡張機能を作る場面ではManifest V3での開発手順の流れの中で、chrome-extensionsスキルが参照元になります。この数値は、スキル1つあたりのコンテキスト消費の目安を示したものです。実際の消費量はclaude plugin detailsで自分の環境で測れます。
CLAUDE.mdに一文足してガイドを確実に引かせる
スキルは関連タスクで自動起動しますが、プロジェクトの規約として明記しておくと引かれ方が安定します。例えば次のような一節を、フロントエンド用のCLAUDE.mdに置く形が考えられます。
## フロントエンド実装の方針
- UI部品(ダイアログ・ポップオーバー・タブ・フォーム検証)を実装する前に、
modern-web-guidanceの`search`で該当ガイドを引くこと
- ネイティブのHTML/CSS機能で足りる場合は、JavaScriptライブラリを足さない
- ブラウザ対応が不明な機能は、ガイドのフォールバック方針に従うこれはREADMEの内容を踏まえた運用例であり、公式が定めた書式ではありません。効いているかどうかは、次のように確かめます。
- 同じ指示(例: 「アニメーション付きのモーダルを作って」)を、プラグインを無効にした状態と有効にした状態で出す
- 生成されたコードの
<dialog>やpopover属性などのネイティブ機能の使用有無を比べる - 使われていなければ、CLAUDE.mdの文言を具体的なガイドIDに寄せて書き直す
評価の枠組みも公開されています。ガイドごとにPlaywrightで書いた検査を、模範実装(100%通過が目標)と対照ページ(0%通過が目標)の両方に当てて校正する方式です。自分のチームでも、上の3手順を小さな検査スクリプトにしておくと、ガイドを更新したときの退行に気づきやすくなります。
READMEの評価数値をどう読むか
READMEは直近の評価結果をスナップショットで載せています。Claude Code(sonnet-5-5)の行だけを抜き出すと、次のとおりです。
| 日付 | タスク数/検査数 | ガイドなし→ガイドあり(上積み) |
|---|---|---|
| 10月25日 | タスク数/検査数168 / 1422 | ガイドなし→ガイドあり(上積み)56% → 90%(+34pp) |
| 10月22日 | タスク数/検査数168 / 1422 | ガイドなし→ガイドあり(上積み)56% → 86%(+30pp) |
| 10月20日 | タスク数/検査数172 / 1450 | ガイドなし→ガイドあり(上積み)54% → 89%(+35pp) |
| 10月19日 | タスク数/検査数171 / 1438 | ガイドなし→ガイドあり(上積み)56% → 88%(+32pp) |
評価では、プロンプトにAPI名を書かず「画像の読み込みを速くして」のような開発者の依頼文を使います。ガイドを自然に見つけられるかを試す設計です。数値は提供元自身が測った結果なので、自分のコードベースで同じ上積みが出るとは限りません。「どれだけ伸びる余地があるか」は、ガイドなしの通過率(100%からの差)で見るのが評価側の考え方です。
まとめ
導入そのものは、READMEどおりに3コマンドで終わります。差が出るのは入れたあとで、同じ指示をプラグイン有無で比べて、dialogやpopoverのようなネイティブ機能が使われるかを確かめるところまでやると、効果の有無が自分のプロジェクトで判断できます。収集される検索クエリの扱いは、先に決めておくところです。