公開日: 2026 年 7 月 15 日
パスキーは簡単に実装できますが、機能とベスト プラクティスは進化し続けています。パスキーが必要な理由と使用方法を理解するには時間がかかります。 このプロセスを簡素化するため、Chrome チームは Modern Web Guidance パスキー スキルを導入しました。これにより、デベロッパーとエージェントはパスキーを使用して安全で最新のログイン エクスペリエンスを構築できます。
パスキー スキルを使用する理由
Modern Web Guidance は、Anti Gravity や Claude Code などの AI コーディング エージェントを ガイドするように設計された一連のスキルです。パスキー スキルを使用すると、最新の API とベスト プラクティスを使用して、登録、認証、管理、再認証を実装できます。コーディング エージェントは、フロントエンド UI とバックエンド ロジックの両方の実装を自律的に生成します。
評価によると、パスキー スキルを使用した実装は、Claude Code Opus 4.8 でパスキー スキルを使用しない実装よりも優れています。この評価では、このドキュメントで説明されているデモ アプリケーションとプロンプトを使用します。
| パスキー スキルなし | パスキー スキルあり | |
|---|---|---|
| PASS | 47 | 80 |
| 失敗 | 32 | 0 |
| なし | 12 | 11 |
| 合計 | 91 | 91 |
最も目に見える違いは、パスキー管理画面です。この画面には、コミュニティがキュレートしたパスキー プロバイダ リストに基づいて作成されたパスキーのリストが表示されます。 パスキー管理のベスト プラクティスに従います。
パスキー スキルを使用すると、コーディング エージェントに強力で目に見えない機能が追加されます。
getClientCapabilities: 最新の機能検出を実行します。- JSON シリアル化: 1 回の JavaScript 呼び出しでエンコードされたペイロードをシリアル化します。
- エラー処理: エラーの種類に応じてメッセージを表示するか、閉じます。
- 条件付き仲介: ユーザーがブラウザの自動入力候補から直接ログインできるようにします。
- Signal API: プロバイダとサーバー間で認証情報リストの同期を維持します。
- 条件付き作成: パスワードで最近ログインしたユーザーのパスキーを自動的に作成します。
ステップ 1: デモ リポジトリのクローンを作成する
パスキー スキル デモ プロジェクトでパスキー スキルを試してください。リポジトリのクローンを作成します。
git clone git@github.com:GoogleChromeLabs/passkey-skills-demo.git
ステップ 2: Modern Web Guidance をインストールする
プロジェクト ディレクトリでインタラクティブな設定ウィザードを実行して、Modern Web Guidance をインストールします。
npx modern-web-guidance@latest install
このウィザードにより、必要なファイルがプロジェクト レイアウトに追加され、AI エージェントがパスキーの要件を理解できるようになります。
ステップ 3: プロンプトを使用する
インストールしたら、次のプロンプトを使用して機能を構築します。これらの例では、パスキー スキルがカバーする 4 つのユースケースを取り上げ、サンドボックス プロジェクト専用に設計されています。
登録
ユーザーがアカウントのパスキーを登録できるようにします。実装するには、次のプロンプトを試してください。
Implement passkey registration at /settings page under start directory
エージェントの実行例: エージェントは、新しいパスキーを登録するために、 フロントエンド UI とバックエンド ロジックを自律的に生成または変更します。
認証
明示的なボタン トリガーまたはブラウザの自動入力候補を使用して、検出可能な認証情報を使用して、リピーターがすばやくログインできるようにします。実装するには、次のプロンプトを試してください。
Implement passkey authentication at the top page under start directory
エージェントの実行例: エージェントは、メインのランディング ページまたはログイン ルートでログインと検証のループを 自律的に処理します。
管理
ユーザーが登録したパスキーを表示、名前変更、削除できるようにしながら、サーバーとブラウザのパスワード マネージャー間で認証情報の同期を維持します。 実装するには、次のプロンプトを試してください。
Implement passkey management at /settings page under start directory
エージェントの実行例: エージェントは、ユーザーが 既存のパスキーを表示、追加、取り消すための構造上の選択肢を作成します。
再認証
セキュリティの変更や送金などの機密情報に関する操作を許可する前に、既存のパスキーを使用してログインしているユーザーの身元を確認します。実装するには、次のプロンプトを試してください。
Implement passkey reauthentication at /reauth under start directory
エージェントの実行例: エージェントは、機密情報に関する ユーザー操作のステップアップ セキュリティを設定します。
/modern-web-guidance
または、Codex の場合は次のコマンドを使用します。
$modern-web-guidance
不明な場合は、エージェントのドキュメントを参照するか、エージェントに modern-web-guidance スキルを直接呼び出す方法を問い合わせてください。
サーバー側を統合する
コーディング エージェントはサーバーサイドのパスキー コードを生成できますが、最新のライブラリ バージョンを使用しない可能性があります。パスキー スキル デモ リポジトリには、JavaScript と TypeScript の推奨サーバーサイド ライブラリである
SimpleWebAuthnのスキルである
simplewebauthnスキルが含まれています。このスキルは、コーディング エージェントの動作を補完します。
他のサーバー側のプログラミング言語の場合、Google は、言語固有のパスキー、FIDO2、または WebAuthn ライブラリと、最新の API を使用するスキルを使用してパスキーを統合することをおすすめします。ライブラリの作成者は、コーディング エージェントが常に最新の API を使用できるように、独自のスキルを作成します。
免責事項とフィードバック
Modern Web Guidance とパスキー スキルはプレビュー版です。これらのスキルは、 パスキー スキル デモ プロジェクトを使用して、Antigravity や Claude Code などのエージェントで開発およびテストされました。他のコードベースに対してテストされていますが、提供されているサンプル プロンプト以外にも調整が必要になる場合があります。生成されたコードが期待どおりであることを確認し、必要に応じて追加のプロンプトを指定してください。
Chrome チームは、これらのスキルを更新し、他の ID と認証機能を Modern Web Guidance に随時追加しています。フィードバックや機能 リクエストがある場合は、 modern-web-guidance-src リポジトリに送信してください。
今すぐお試しいただき、パスキーの導入を簡素化してください。