ウェブ開発ライフサイクルの現在の段階（初期スタイリングから最終的なセキュリティ実装まで）に合わせて、リストされているモダン ウェブ ガイダンスのスキルを選択してください。
ウェブのコア分野
ウェブの分野ごとに作業を絞り込み、集中させるのに役立つオーケストレーター。
accessibility
/modern-web-guidance accessibility
アプリケーション全体で効果的なアクセシビリティ パターンを評価、修正、実装するための中心的な監査ガイドとして機能します。
GitHub で accessibility スキルを表示する
performance
/modern-web-guidance performance
Core Web Vitalsを最適化し、ページの読み込み時間のレイテンシを短縮し、ユーザー入力へのレスポンスを改善するのに役立ちます。
user-experience
/modern-web-guidance user-experience
レスポンシブなカスタム要素、スムーズなトランジション、最新のスタイリング パターンを迅速に実装するためのユーザー インターフェース（UI）ツールキットとして機能します。
GitHub で user-experience スキルを表示する
ウェブ テクノロジー
これらのコアスキルは、あらゆる最新のアプリケーションに不可欠な構成要素を提供し、セマンティック HTML、速度、相互運用性を考慮した最新のベスト プラクティスでプロジェクトを開始できるようにします。
html
/modern-web-guidance html
最新の HTML アーキテクチャ、セマンティクス、ネイティブのインタラクティブ API（Dialog、Popover、Details）、フォーカス管理、リソースの優先順位付けに関するアクション指向のガイドライン。ウェブ ドキュメントの構造化、ネイティブ オーバーレイの実装、リソース読み込み順序の最適化を行う場合は、このガイドを使用してください。
css
/modern-web-guidance css
最新の CSS アーキテクチャ、レイアウト、パフォーマンスに関するアクション指向のガイドライン。スタイルの作成、デザイン システムの管理、ウェブ レンダリングの最適化を行う場合は、このガイドを使用してください。
css-layout
/modern-web-guidance css-layout
Flexbox、Grid、Subgrid、コンテナクエリ、アンカー ポジショニング、固有サイズ設定などの最新の CSS レイアウト。レスポンシブ UI コンポーネントまたはページ レイアウトを設計する場合は、このスキルを使用してください。
forms
/modern-web-guidance forms
アクセシブルで安全かつ使いやすいウェブフォームを構築するためのベスト プラクティス。フォーム、入力、送信フローの作成または変更を行う場合は、このガイドを使用してください。
cpp-on-the-web
/modern-web-guidance cpp-on-the-web
WebAssembly を使用した最新のウェブ向けの C および C++ のコンパイル。C++ コードの移植、Emscripten を使用した C++ ライブラリのビルド、ブラウザでの高パフォーマンス C++ コンポーネントの設定が必要な場合は、このスキルを使用してください。
GitHub で cpp-on-the-web スキルを表示する
ブラウザの機能（オプトイン）
これらのスキルは、Manifest V3 などの最新の標準に準拠した Chrome 拡張機能を開発し、メタデータ、プライバシー ポリシー、権限の正当性の準備を支援することで、Chrome ウェブストアへの公開を効率化するのに役立ちます。これらのスキルはオプトインであり、デフォルトでは有効になっていません。
chrome-extensions
/modern-web-guidance chrome-extensions
一般的な Service Worker のライフサイクルとサンドボックス化の落とし穴を回避する、Manifest V3 に準拠した安全な Chrome 拡張機能を構築します。オプトインするには、chrome-extensions スキルを指定する必要があります。
npx skills add GoogleChrome/modern-web-guidance --skill chrome-extensions
GitHub で chrome-extensions スキルを表示する
セキュリティ、信頼、ID
これらのスキルは、防御的な HTTP ヘッダーとオリジン分離によって XSS などのクライアントサイドの脆弱性利用型不正プログラムからアプリケーションを保護することで、ユーザーの信頼に重点を置いています。デベロッパーは、パスキーを使用した認証フローの開発、サードパーティ トラッキングの最小化、C/C++ ライブラリを WebAssembly モジュールに移植するためのスキルの使用もできます。
security
/modern-web-guidance security
ウェブ デベロッパー向けの予防的なセキュリティ ガイドライン（XSS、CSP、Cookie、クロスオリジン分離）。このスキルを使用して、セキュリティ ポリシーの監査、テスト、デプロイのプロセスを安全に進めます。
passkeys
/modern-web-guidance passkeys
ウェブ アプリケーションでの WebAuthn とパスキーの実装に関する包括的なオリエンテーションと横断的な原則。パスキーの登録、認証、管理、再認証を行う場合は、このガイドを使用してください。
privacy
/modern-web-guidance privacy
ウェブ デベロッパーがプライバシー バイ デザイン、データの最小化、サードパーティ監査、安全なデータ処理を実装するためのアクション指向のガイドライン。アプリケーションの設計、サードパーティ サービスの統合、ユーザーデータの処理、セキュリティ ヘッダーの構成を行う場合は、このスキルを使用してください。
エージェント システム
これらのスキルは、WebMCP を使用してウェブ アプリケーションと AI ワークフローのギャップを埋めるのに役立ちます。クライアントサイドのブラウザ機能をインタラクティブ ツールとして公開することで、AI エージェントにアプリケーション機能と直接やり取りするように指示できます。
webmcp
/modern-web-guidance webmcp
WebMCP を実装して、クライアントサイドのブラウザ機能を AI エージェント用のインタラクティブ ツールとして公開します。
次のステップ
モダン ウェブ ガイダンスについて理解できたので、実際に試してみましょう。モダン ウェブ ガイダンスでサポートされている機能とユースケースを確認し、開始するためにいくつかのサンプル プロンプトを試します。