Modern Web Guidance とは？インストール・使い方・例

Modern Web Guidance は、Web アプリケーションを扱うコーディングエージェント向けのオープンソース Skill と CLI です。Web プラットフォームの指針、互換性の文脈、実装パターンを Agent が検索できるコンテキストとしてまとめ、古いライブラリ、polyfill、大きな JavaScript の代替実装へ反射的に寄ることを避ける助けになります。Chrome、Edge、Mozilla、MDN のチームと Web 開発コミュニティが共同で管理しています。実装とレビューを補助するものであり、対象ブラウザや支援技術でアプリケーションをテストする代わりにはなりません。

提供するもの

検索可能な Agent 向けガイド: 対応コーディング Agent 環境に Skill を入れ、具体的な UI またはプラットフォームの課題を検索してから、絞り込んだガイドを取得します。
モダナイゼーションスキャナ: npx modern-web-guidance@latest legacy-scan . は対応済みの旧式パターンを静的に検出し、各結果を推奨される現代的な置き換えへ結び付けます。
整理済みの対象範囲: 1.0 は 250 の Web プラットフォーム機能にまたがる 203 のユースケースを扱い、CSS レイアウト、フォーム、アクセシビリティ、性能、UI コンポーネント、PWA、セキュリティ、ブラウザ組み込み AI API を含みます。
互換性を意識したワークフロー: 新規または単一エンジンの変化しやすい機能は取得前に明示的な opt-in が必要で、実験的 API が黙って本番向けの推奨になることを防ぎます。

実用的なワークフロー

ブランチまたはクリーンなチェックアウトで CLI を実行します。まず legacy-scan で機械的な候補を集め、変更前にリンクされたガイドを開きます。新機能では曖昧なプロダクト要件ではなく、「確認モーダルダイアログ」のような具体的なプリミティブで検索し、結果を取得してからプロジェクトのブラウザ対応方針の範囲で実装します。最後に既存テスト、アクセシビリティ検査、実際の対象ブラウザで結果を確認します。ガイドだけでは、フォールバック、分析要件、フレームワーク統合が製品に適切かは判断できません。

使いどころ

学習データに古い書き方が多く含まれるフロントエンドコードを Agent が変更する場合に、Modern Web Guidance は特に役立ちます。検証には Playwright Automation、UI 品質の確認には ai-design-check と組み合わせられます。コンポーネントライブラリではないため視覚デザインシステムは提供せず、チーム自身のデザイントークンやサポートマトリクスを置き換えません。一般的なコーディングアシスタントと比べ、Web プラットフォームの判断に焦点を絞ります。

制限と安全な導入

公開されている評価結果はプロジェクトの資料であり、特定のモデル、フレームワーク、ブラウザ基準での成果を保証しません。特に旧式パターンがクロスブラウザ動作、分析、セキュリティの理由で残っている可能性がある場合、スキャン結果はレビューのきっかけとして扱ってください。ガイドに書かれているだけで実験的 API を有効にせず、ブラウザの対応状況、利用者への影響、フォールバックを確認します。管理された環境では、Skill の更新も他の開発依存関係と同じように固定またはレビューしてください。

始め方

npx modern-web-guidance@latest install を実行し、使うコーディング Agent の統合を選びます。範囲が限定されたコンポーネントで検索またはスキャンを試し、最小でレビュー可能な変更を行ったうえで、利用者が使うブラウザで結果を比較してください。これにより、Skill を未レビューのソースコード生成器にせず、現代的な実装の選択肢として使えます。