最新のウェブガイダンス | Modern Web Guidance

これは、Modern Web Guidance の早期プレビューです。新しいコンテンツは積極的に追加しています。GitHub での投稿やフィードバックをお待ちしています。

Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Modern Web Guidance を使用して構築する

Modern Web Guidance は、多くの一般的なユースケースで AI コーディングエージェントをガイドし、アクセシビリティ、パフォーマンス、セキュリティに優れた最新のウェブエクスペリエンスを構築するための、常に最新の状態に保たれ、専門家によって検証された一連のスキルです。

modern-web-guidance CLI を使用してインストールする（推奨）:

npx modern-web-guidance@latest install

使ってみる GitHub で表示

お好みの AI コーディングエージェントと連携

Modern Web Guidance は、お気に入りの AI コーディングエージェントで使用できます。これにより、お好みのワークフローで最新のウェブのベストプラクティスのガイダンスにアクセスできます。

すべてのインストールオプションを表示する

`npx skills`

Vercel のエージェントスキルを使用して、プロジェクトに Modern Web Guidance をインストールします。

npx skills add GoogleChrome/modern-web-guidance

Claude Code

Claude Code 用の Modern Web Guidance スキルをインストールします。

# 1. Add the marketplace:
/plugin marketplace add GoogleChrome/modern-web-guidance
# 2. Install the plugin
/plugin install modern-web-guidance@googlechrome
# 3. Reload plugins
/reload-plugins

Copilot CLI

Copilot CLI 用の Modern Web Guidance スキルをインストールします。

# 1. Add the marketplace:
/plugin marketplace add GoogleChrome/modern-web-guidance
# 2. Install the plugin
/plugin install modern-web-guidance@googlechrome

Gemini CLI

Gemini CLI に Modern Web Guidance スキルをインストールする:

gemini extensions install https://github.com/GoogleChrome/modern-web-guidance --auto-update

ユーザーエクスペリエンスを向上させるためのプロンプト

次のサンプルプロンプトをいくつか試して、AI アシストコーディングワークフローで最新のウェブガイダンスを呼び出し、新機能の構築、レガシーコードのモダナイズ、アプリの高速化を行います。

新しいユーザーエクスペリエンスを構築する

Create an accordion-style stats component that smoothly animates on open and close.

Build a tab bar with a sliding highlight that tracks active items using CSS Anchor Positioning.

Design a dashboard card that uses container queries to adapt its layout to its own width.

レガシーコードをモダナイズする

Update legacy modal window implementations to use the <dialog> element and animate them using modern CSS features.

Migrate legacy tooltips to use the Popover API and CSS Anchor Positioning.

セキュリティの強化

Implement a passkey-based login flow using the latest WebAuthn features.

Implement a starter Content Security Policy (CSP) without breaking my app.

Perform a security audit of my site and suggest improvements.

パフォーマンスを改善

Set up my app to begin preloading pages when users hover over important links.

My app has lots of long tasks, and its INP is affected. Help me fix it.

Help me improve my app's LCP.

エージェント向けの Chrome DevTools で Modern Web Guidance スキルを使用する

エージェント向けの Chrome DevTools と Modern Web Guidance のスキルを組み合わせて、ウェブ開発のワークフローを改善します。リアルタイムのパフォーマンス監査を実行し、アクセシビリティツリーを検査して、コンソールログをキャプチャします。その後、正確な最新のウェブコードの修正を自動的に適用します。

詳細

投稿の方法を確認

Modern Web Guidance の改善についてのご意見やご要望ご協力をお願いいたします。

詳細