ウェブ開発ライフサイクルの現在の段階（最初のスタイリングから最終的なセキュリティ実装まで）に合わせて、リストされているモダン ウェブ ガイダンスのスキルを選択してください。
ウェブに関するコアな分野
ウェブの分野ごとに作業を絞り込み、集中させるのに役立つオーケストレーター。
accessibility
/modern-web-guidance accessibility
アプリケーション全体で効果的なアクセシビリティ パターンを評価、修正、実装するための中心的な監査ガイドとして機能します。
GitHub で accessibility スキルを表示する
performance
/modern-web-guidance performance
ウェブに関する主な指標の最適化、ページ読み込み時間の短縮、ユーザー入力に対する応答性の向上に役立ちます。
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 エージェント用のインタラクティブ ツールとして公開します。
次のステップ
Modern Web Guidance について理解できたので、実際に試してみましょう。モダン ウェブ ガイダンスでサポートされている機能とユースケースを確認し、開始するためにいくつかのサンプル プロンプトを試します。