Modern Web Guidance - コーディングエージェントを最新Web標準へ導くスキル集
Show HN: Get your coding agent off ~2019 JavaScript, onto modern web primitives
Modern Web Guidanceは、Google Chrome、Microsoft Edge、Mozilla Firefox、MDNの各チームが共同で開発した、コーディングエージェント向けのスキルセットです。LLMが古い学習データに引っ張られてレガシーなJavaScriptを生成しがちな問題を解決します。250以上のモダンなWeb機能と203の実践的なユースケースを、トークン効率の良い形でエージェントのコンテキストに注入。View Transitions、コンテナクエリ、Popover API、組み込みAIなど、ブラウザが本来備える高性能なネイティブ機能の活用を促します。npx modern-web-guidance@latest installで簡単に導入でき、legacy-scanコマンドで既存コードのモダン化も可能です。
Modern Web Guidanceは、コーディングエージェントをレガシーなパターンから遠ざけ、モダンなWebプラットフォームの力と可能性を活かしたソリューションへと導きます。
HNでの議論
120- surround
以下は、スキルがあなたのエージェントに使うよう指示するブラウザ機能のうち、Chromeでは安定しているがFirefoxとSafariではサポートされていないもののリストです：
CSS @function
CSS calc-size()
CSS interpolate-size
CSS corner-shape
CSS border-shape
CSS flex-wrap: balance
CSS text-fit
CSS text-decoration-skip-spaces
CSS scroll-axis-lock
CSS scroll-target-group
CSS :target-current
CSS scroll-initial-target
CSS container scroll-state queries
scrollsnapchange イベント
scrollsnapchanging イベント
HTML focusgroup
Element.startViewTransition()
CSS view-transition-scope
Interest Invokers (interestfor)
LanguageModel (Prompt API)
LanguageDetector
Translator
Summarizer API
Window.fetchLater()
Speculation Rules API
Long Animation Frames API
VisibilityStateEntry
PerformanceSoftNavigation
InteractionContentfulPaint
Connection-Allowlist
CSS url() integrity() 修飾子
HTML meta name="text-scale"
HTML template for
HTML processing instructions
PasswordCredential
Promiseを返すscrollメソッド
Web App Origin Migration
Local Network Access パーミッション
Request.targetAddressSpace
beforeinstallprompt イベント
公平を期すために言うと、スキルはChrome自体ではサポートされていない約11の機能も推奨しています。そしてこのプロジェクトは互換性に配慮しているようです：「モデルに適切で軽量なフォールバックを使うよう導く」。
- simonw
配布方法の提案：現在のnpmパッケージに加えて、GitHub Pagesを設定して、スキルのmarkdownインデックスドキュメントを https://googlechrome.github.io/modern-web-guidance-src/skill... で公開してください（現在は404です）。
そのインデックスページは、すべてのドキュメントのプレーンなmarkdownバージョンにリンクし、grepで検索して適切な答えを見つけられるように設計すべきです。
そうすれば、何もインストールする必要がありません。エージェントがHTTPリクエストを送れるなら、「https://googlechrome.github.io/modern-web-guidance-src/skill... でヒントを探して」と伝えるだけで、インデックスを取得し、最も関連性の高いドキュメントに移動します。MCPもnpmもインストールも一切不要です。
- advisedwang
Chromeはすでにブラウザ標準の世界で権力を持ちすぎている。みんなのLLMがWeb開発のやり方についてChromeチームのガイダンスに従うなんて、最も避けたいことだ。この道は「このサイトを見るには[支配的なブラウザ]で表示してください」に逆戻りする。
- chalmovsky
素晴らしい！ちょうど、Alex Russellの「Reactはレガシーテクノロジーだ」という引用が、残念ながら完全に無視されたことについて記事を書いているところでした。
そして今、これがちょうど私の手に落ちてきました！私が主張したかった論点のいくつかは、ここで提供されているようです。ちゃんと見る機会はなかったけれど、とても有望で素敵に見えます！
ありがとう！
- flossly
私はテンプレートをコンパイル言語で持ちたい派です。文字列のマップを補間ポイント付きの文字列に渡すのではなく、実際に「ただのコード」で、同じ「ただのコード」の中でテンプレート/レイアウト/コンポーネントを組み合わせてHTMLビルダーを定義します。
HtmlFlow（Java/Kotlin）やkotlinx.htmlのように。
このアプローチにはTailwindとAlpine.jsを選びます。理由は：SSRファーストにしたい（重要なところでは小さなJSベースの改善を加える）のでSPAではなく、スタイリングはスタイリングされるHTMLコードの近くに置きたい（CSS定義と使用法を一致させる必要がない）、そして少量のJSも扱うHTMLの近くに保ちたい（Alpineはそれを簡単にし、JSのニーズの99%を実装する明確な道を提供する）。
みんなと同じように、LLMが私のためにコードを書いてくれます :) でも結果は私自身にも私のLLMにも推論しやすいものです。バニラJSは少し。jQueryなし。主にHTMLにバインドされたAlpine命令。そしてどこでもTailwind。こうすれば、一箇所を見ればどう動くかわかるし、CTRLクリックでたどり着けます。
- phyzix5761
「ベストプラクティス」はAI時代にはほぼ死んだ。もうすぐ誰もAIが生成したコードを読まなくなるだろう。それは恐ろしい考えだ。
- bakkoting
> 何か間違っている点や奇妙な点を見つけたら、声をかけてください！
でもどうやって？modern-web-guidance-srcリポジトリでissueを立てるのが正しい場所であってほしい。とにかく、atobとbtoaの代わりにfromBase64とtoBase64を使う件でissueを立てました。
でも、どうせエージェントに全力投球しているなら、少なくとも過去3〜5年のJS、DOM、HTML仕様のコミットをすべてエージェントに見させて、明らかな改善でエージェントが使っていないものを自動的にトリアージすることを検討すべきです。かなり簡単でしょう。
---
ところで、ターゲットとするブラウザに応じてこれのバージョンを自動提供するのはとても役立つと思います。例えば、すべてのエバーグリーンブラウザで少なくとも1年間利用可能でないものは使いたくありません。ほとんどの開発者も同様の基準を持っているか、少なくとも最先端は使いたくないでしょう。あなたのリポジトリからそれを得ることは_可能_ですが、スクリプトを書くか、エージェントに各機能について独自の判断をさせる必要があり、手間がかかります。それはあなたの側でできる仕事で、私たち残り全員がする必要を省けます。
- internet2000
結構です。私のエージェントにChromeのモノカルチャーに貢献してほしくありません。Chromeは新しいIE6です。