AI コーディングは「プロンプトをどう書くか」から「AI に何を食わせるか」に主戦場が移ってる
X で毎日 Claude Code 情報を配信してるコムテです
金曜日の朝。ワイは、Google の Google Engineering Practices（コードレビュー基準のドキュメント集）を Claude Code のスキルに手作業で食わせるという回りくどい作業をしてた
Claude Code に質の高いPR書かせたいと思っていたからである
Google Engineering Practices をスキルにリポジトリごとぶち込んで、必要な部分だけ読ませたわけ
リポジトリを丸ごと references というディレクトリに置いて、SKILL .md で「迷ったらこの 1 ファイルだけ読め」って導線を引く、みたいな感じね
要するに「専門家が決めた作法を AI に参照させる辞書」を手で組んでた
最初に要約して入れたら原文からズレて失敗したけど、リポジトリ丸ごと積む形にしたら安定した
Claude Code がリンク先ちゃんと読まないからって、要約かますの微妙ですよね？
とりま、SKILL.md 全文もコピペで作れる手順も izanami に書いた
まぁ、それはいいとして
その後くらいに、Chrome が Modern Web Guidance っていう公式の Agent Skill を出してきたのを発見
自分が今日手でやってた「専門家検証済みの作法を AI に食わせる」術を、プラットフォーマーが公式に標準化しに来てた
個人が手ロールで埋めてた穴を、半日後にプラットフォーマーが公式で塞ぎに来る流れ。AI コーディングの世界でこれから何回も起きそうです！
まぁ、野良スキルより公式がいいよね
ほんじゃ、Modern Web Guidanceを、ちょい試した感想を雑に書いとく
ガッツリやりたい人は、自分で試してくれよな
AI って放っとくと古いコードを書く問題
あるよね？（ない？）
適当な例だけど「モーダル作って」って頼むと、div を重ねて position: fixed して、自前でフォーカストラップ書いて、Esc キーのハンドラを addEventListener で生やす的な、昔の Stack Overflow みたいなコードをしれっと書いてくるイメージ
でも今のブラウザには <dialog> 要素がある。showModal() 一発でモーダルになるし、フォーカス管理も Esc も標準で効く（よね？）
AI がそれを使わないのは、学習データに古い書き方が圧倒的に多いから。新しい API のサンプルはまだ世の中に少ない
つまり AI は「動くけど古い」コードを書きがち。ここを矯正する辞書が要る、っていうのが今日の Chrome のスキルの出発点だね
Modern Web Guidance は何者なん？
Modern Web Guidance は、Google I/O 2026 で発表された公式の Agent Skill。今はまだ early preview（早期プレビュー）で、ユースケースは継続的に増えてってるらしい
Chrome チームに加えて Microsoft Edge チームと Web コミュニティが支援してるのかな
なんか、AI いわく「ベンダー横断でモダンな Web の作法を一個に束ねに来てる」のがポイントらしいよ（あーね）
chrome for developers ページはこっちです
Modern Web Guidance の中身
AI に雑にまとめてもらった。こんな感じらしいよ
- 102 のモダン Web 機能を、128 のユースケースに整理した SKILL.md + CLI（多くは専門家が継続キャリブレーション済み。ただ全部じゃなくてカバレッジは作業中らしい）
npx modern-web-guidance@latest install一発で導入。searchとretrieveのサブコマンドあり- 対応エージェントがとにかく広い。universal な skills 規格で 55 エージェント。Claude Code / Antigravity / Cursor / Codex / Gemini CLI / GitHub Copilot / Hermes Agent ほか
- 完全オフライン動作。TensorFlow.js（ブラウザ・Node で動く機械学習ライブラリ）のローカルモデルでクエリをマッチするので、ネットワークも API キーも要らない
- ライセンスは Apache 2.0、依存ゼロ
依存ゼロ + オフライン動作なのが地味にえぐい。社内ネットワークが厳しい現場でも、API キーの管理も外部通信の許可も要らずに入れられる。サプライチェーンの審査も通しやすい
狙いはさっきの話そのままで、AI に古い workaround をやめさせて、<dialog> 要素・Popover API・CSS Anchor Positioning・WebAuthn・CSP みたいなモダン API を使わせること。専門家が「今ならこう書く」を検証済みのユースケースとして渡す、っていう発想だね
スキルの種類も豊富
アプリケーション全体で効果的なアクセシビリティ パターンを評価、修正、実装するための中心的な監査ガイド
ページの読み込み時間のレイテンシを短縮し、ユーザー入力へのレスポンスを改善
レスポンシブなカスタム要素、スムーズなトランジション、最新のスタイリング パターンを迅速に実装
css
forms
Modern Web Guidance install
汎用の CLI で入れるなら npx 一発
Claude Code なら、この3コマンド
Antigravity CLI
インストール後、/reload-plugins の行を見ると、plugins・skills・agents・hooks までまとめて読み直してて、Claude Code のプラグイン体系にちゃんと組み込まれてた
Claude Code を検出して、非対話でインストールが進む
対応エージェントが「55 agents」と結構デカいよね
おお、Claude Code だけじゃなくて Antigravity / Cursor / Codex / Gemini CLI / GitHub Copilot / Hermes Agent とかに、universal な .agents/skills/ 規格で一気に入る感じかあ
install のときにセキュリティ評価（Gen / Socket / Snyk）まで出してくるのね
次に中身を引く。accessible modal dialog（アクセシブルなモーダル）でクエリを投げてみた
返ってきた。実際は JSON で返ってくるんやけど、読みやすいように整形。similarity（クエリとの類似度スコア）付きで、関連するガイドが順に並ぶ
完全オフラインで、ローカルのモデルだけで類似度を計算して返してくる。で、一番上の dialog 系を retrieve すると、AI に渡る作法の中身そのものが出てくる
返ってきたガイドがこれ（抜粋）。Invoker Commands API を使って、JS を一行も書かずに <dialog> をモーダルにする宣言的な書き方を推してた
さらにガイドには Baseline 状況（Invoker Commands は 2025-12 から Baseline）と、未対応ブラウザ向けの polyfill 戦略（feature detect して条件付き import しろ、まで MANDATORY 指定）まで入ってた
「とりあえず動く」じゃなくて「今のブラウザでこう書け、古い環境はこう逃がせ」まで面倒を見る粒度
しかも、その Baseline のターゲットはプロジェクト側で選べる。CLAUDE.md や AGENTS.md に「このプロジェクトの Baseline は 2024」って書いとくと、その基準に合わせて fallback の出し方を変えてくれるらしい（何も指定しないとデフォルトで Widely available 扱い）
古い環境を切り捨てたくない案件でも、自分とこの対応ブラウザ基準に寄せられるわけやね
このガイドを読まずに「モーダル作って」と頼むと、AI はたいてい div を重ねて自前で組む（学習データに古い書き方が多いから）。ガイドを入れると、AI は上の宣言形を参照してから書くようになる。出力の寄り方はこう
| Before（スキルなし） | After（スキルあり） |
|---|---|
| 「モーダル作って」→ div + 自前 JS | 「モーダル作って」→ <dialog> ベースで提案 |
| 古い書き方を疑わない | 検証済みユースケースを参照してから書く |
| 出力がブレる | 専門家の作法に寄る |
これ体感だけの話かと思いきや、公式の eval（評価）でも裏が取れてて、Modern Web Guidance を入れたエージェントは「モダンな作法への準拠度」が平均で 37 ポイントくらい上がったって書いてあった
まあ early results（初期結果）らしいんで、モデルとかプロンプト、使うエージェント次第で変わる、っていう但し書き付きやけどね
要は AI が「最初に辞書を引いてから書く」状態になる。プロンプトで毎回「dialog 要素を使って」って指示しなくても、エージェントが勝手にモダン API 側に寄ってくれる。これがスキルとして食わせる意味だね
Clawd（クロード） 興奮！
Claude Code の Clawd（クロード。マスコットキャラクター） 君が嬉しそうに
「朝に組んでた eng-practices スキルと、Chrome の Modern Web Guidance を並べてみると、構造が完全に同じだった！」
って言うんだよね
- 専門家が決めた作法を、リポジトリ単位で references に置く
- SKILL.md で「いつ・どのファイルを読むか」の導線を引く
- AI に毎回 references を引かせてから書かせる
ワイの方法はイケてたってことなんよ！
自分が eng-practices でやったのは「全部を一度に読ませない。判断に迷ったら 1 ファイルだけ読め」っていう導線設計だった。Modern Web Guidance も発想は同じで、search で関連ユースケースだけ引いて、必要な分だけ AI に渡す
コンテキストを節約しながら、専門知識をピンポイントで効かせる。手ロールとプラットフォーム公式が、同じ結論に独立してたどり着いてた
ここで棲み分けが見えてくる。Web 標準みたいに「正解が世界共通で、ベンダーが束ねられる」領域は公式が標準化する。逆に eng-practices みたいに「組織やチームの判断基準」が混ざる領域は、手ロールで自分の文脈に合わせる価値が残る。公式が来た領域には乗る、来てない交差点は自分で埋める
プラットフォーマーが AI コンテキスト辞書を標準化し始めた
ここからは自分の見立て。事実というよりは、今日の体験から見えてきた仮説
Modern Web Guidance を単体で見ると「便利なスキルが出たね」で終わる。でも最近の Chrome の動きと並べると、もっと大きな流れに見えてくる
- Modern Web Guidance ＝ AI に「どう書くか」の作法を渡す辞書
- WebMCP ＝ AI に「Web ページをどう操作するか」の口を渡す
- Chrome DevTools for agents ＝ AI に「動いてる挙動をどう観測するか」の目を渡す
この3つを並べると、書く・操作する・観測する、っていう AI 開発のコンテキスト層を Chrome が一個ずつ標準化しに来てるように見える
今までは各自が手ロールで埋めてた穴を、プラットフォーマーが公式の規格で塗り潰しに来てる、って感じだね
野良スキルが増えてるのを見かねて、こういうのを出してきたのかな？
ここは断定じゃなく自分の解釈。「三点セットで標準化戦略だ」って公式が言ってるわけじゃない。ただ、同日に手ロールと公式がぶつかった体験からすると、こういう絵で見ると腑に落ちる、っていう話
仮にこの見立てが当たってるなら、今後「AI に何を食わせるか」の標準辞書はどんどん公式から出てくるね
個人が手で organize する手間は減るし、品質も専門家検証済みで担保される。素直にありがたい流れだと思う
おわりに
今日の同日体験で腹落ちしたこと
- 公式が来た領域には乗る。Modern Web Guidance みたいに「Web 標準の作法」っていう世界共通の正解は、手ロールより公式版の方が品質も網羅性も上。
npx modern-web-guidance@latest installで今すぐ入る - 標準化されてない交差点こそ個人の一次情報。eng-practices みたいに組織の判断基準が混ざる領域は、手ロールで自分の文脈に合わせる価値が残ってる
- プラットフォーマーは AI のコンテキスト層を標準化し始めてる（これは自分の見立て）。手で埋めてた穴が公式で塞がる流れは、たぶんこれから加速する
手ロールしてた発想を半日後に公式が標準化してきた、っていう体験が地味に効いた一日だったね
AI コーディングは「プロンプトをどう書くか」から「AI に何を食わせるか」に主戦場が移ってて、その辞書の供給元が個人からプラットフォーマーに移りつつある感じ
