mcpField
A
auth0-branding

auth0-branding

github.com/auth0デザイン・UI55285 回インストール1 日前に更新
リポジトリ

auth0-branding について

auth0-brandingは、Auth0 Universal Loginのブランディングを設定するスキルです。テナントのログイン体験を管理するチーム向けに、外観、ページテンプレート、文言、設定確認を扱います。

主な機能

  1. 01ブランド資料に基づくテナント設定
  2. 02外観とページテンプレートの編集
  3. 03ブランドの語調に合わせた文言調整
  4. 04選択したAuth0標準設定への復元
  5. 05Universal Loginを使うフローの確認

活用シーン

  1. 01WebサイトのブランドをUniversal Loginに適用
  2. 02ロゴ、色、フォント、ボタンラベルの変更
  3. 03提供された文例に合わせたログイン文言の改稿
  4. 04ブランディング変更が表示されない原因の診断

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/auth0/agent-skills --skill auth0-branding

インストール後、Claude Code で/auth0-brandingを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
advanced.md
api.md
capability-brand.md
capability-check.md
capability-manual.md
capability-rollback.md
capability-voice.md
examples.md
screens.md
tests/
.gitignore
evals.json
README.md
run-regression.sh

詳細

Auth0 のブランディング

Auth0 Universal Login をブランドに合わせてスタイリングします。テーマ(色、タイポグラフィ、枠線、ウィジェットのレイアウト)、テナントレベルのブランディング設定(ロゴ、ファビコン、プライマリカラー)、ページテンプレート(ウィジェットを囲む Liquid HTML)、画面ごとのカスタムテキストを扱います。

機能

このスキルが最初のメッセージで明確な意図を示して呼び出された場合(例:「ferrari.com に合わせてテナントをブランディングして」「テーマをリセットして」「Universal Login が有効か確認して」)、意図を解析し、該当する機能に直接振り分けます。選択肢は表示しません。

このスキルが意図を示さずに呼び出された場合(単独の /auth0-branding、または曖昧な「ブランディングについて教えて」)、以下の表を表示し、「番号を選ぶか、名前を指定するか、実現したいことを説明してください。」と一行で尋ねます。返信を解析し、1、「テナントをブランディングして」、「acme.com のような見た目にして」を同等の入力として受け付けます。

#機能内容
1テナントをブランディングする自分が所有するウェブサイト、手持ちのブランドアセット、または手動入力をもとに、Universal Login を最初から最後までスタイリングします。色、ロゴ、タイポグラフィ、ページレイアウト、および(任意で)ログインテキストのトーンをまとめて適用します
2特定の設定を変更するロゴ、色、フォント、角の丸み、背景、ボタンラベル、ページテンプレートなど、個々の項目を直接更新します。URL からの情報抽出やアセットの解析は不要です
3ブランドのトーンに合わせる提供されたソース(ウェブサイト、サンプル文、トーンの説明)に合わせて、Universal Login のテキストを書き換えます。テキストのみが対象で、色やレイアウトは変更しません
4Auth0 のデフォルトに戻すクリアする対象を選びます。テナントのブランディング設定、テーマ、ページテンプレート、または特定のプロンプトのカスタムテキストから選択できます
5設定を確認するログイン、サインアップ、パスワードリセット、MFA がテナントで実際に Universal Login を使用しており、Classic ではないことを確認します。安全な読み取り専用の最初の確認です

前提条件のセクションは、すべての機能に適用されます。

プロンプトのスタイル

自由入力のプロンプトを優先してください。このスキルは、ユーザーにクリックを強いるのではなく、自然な返信を解析する必要があります。次のいずれかに該当する場合に限り、AskUserQuestion を使用してください。

  1. 分かりにくい選択肢から複数選ぶ場合。一覧を見たほうがユーザーにとって便利なケースです(例:機能 3 のフローカテゴリ。ユーザーが全項目をすぐに思い出せない場合)。
  2. 破壊的な操作を伴う場合の安全確認(例:機能 4 の「リセット前にバックアップを保存しますか?」というはい/いいえの確認)。
  3. ユーザーが把握しづらい、トレードオフのある 3 つ以上の選択肢を区別する必要がある場合。

それ以外はすべて自由入力にします。具体的には、次のとおりです。

  • 確認プロンプト(「進めますか?適用/編集/キャンセルを選ぶか、変更したい内容をお知らせください」)は自由入力にします。返信を解析してください。返信に具体的な変更内容が含まれている場合は、その場で適用して提案を再表示し、編集用のサブメニューをクリックさせないでください。
  • **「値を貼り付けてください」**という入力(16 進数コード、URL、フォント名)は自由入力にします。単一項目の入力を選択式にしないでください。
  • 呼び出し時の機能振り分けは自由入力にします。上記の機能一覧の前の段落を参照してください。

見つけやすさのためのヒント:すべての提案で、デフォルトではオフの項目(トーンの書き換え、ページテンプレート、レイアウトのオーバーライドを含む)も、編集可能な項目として一覧にしてください。ユーザーは、存在を知らない項目の変更を依頼できません。機能 1 の主な提案に続く「その他のオプション」ブロックが標準パターンです。

任意の手順(例:音声フローの検出、未検証ドメインでの Brandfetch 検索)を自動実行しないでください。一覧表示、検出、選択のいずれを希望するか、先に尋ねてください。

プランモード

Claude Code がプランモードの場合、スキルによる書き込み(Management API に対する PATCH/PUT/DELETE/POST と、ローカルファイルへの書き込み(バックアップ JSON、Brandfetch キー))は、プランが承認されるまで保留されます。

許可される操作:

  • Management API に対する GET(現在のテーマ、ブランディング、カスタムテキスト、プロンプト、接続、テナント設定の読み込み)。これらは提案と診断に使用されます。
  • LLM のみを使用する作業:音声の分類、翻訳の生成、提案のレンダリング。
  • Capability 5 は変更せずに実行します。すでに読み取り専用です。

延期される操作:

  • すべての Management API への書き込み(PATCH/PUT/DELETE/POST は実行しません)。
  • ローカルファイルへの書き込み:Capability 4 のバックアップ JSON、Capability 1 の Brandfetch キーの保存。
  • auth0 test login(ブラウザーで認証フローを開始します。テナントの変更ではありませんが、副作用があるため、書き込みとともに延期します)。

対話形式での質問は引き続き行います。 Capability 1 の Brandfetch キーの入力、Capability 3 のソース/画面/ロケールの入力、Capability 4 の対象領域/バックアップの入力は、すべて引き続き行います。プランモードで延期されるのは実行であり、意図の確認ではありません。回答によって書き込みが発生する質問(例:「Brandfetch キーを貼り付けてください」)では、回答を受け取り、プランに「承認後に ${XDG_CONFIG_HOME:-$HOME/.config}/auth0-branding/brandfetch.key に保存する」と記載してください。

プランの内容。 次の項目を網羅した完全なプランを作成してください。

  • 対象テナント(auth0 tenants list から取得)と、アクティブテナントの確認。
  • スキルが実行する具体的な API 呼び出しをすべて順番に記載します。メソッド、パス、本文の概要を含めてください(PATCH /branding のような小さなオブジェクトはペイロード全体を、大きなオブジェクト(マージ済みのテーマオブジェクトやカスタムテキストの PUT など)はキー名と変更件数を記載します)。
  • 絶対パスを指定した、すべてのローカルファイルへの書き込み。
  • Capability 4 のスコープ事前確認の結果。承認前にスコープエラーを明らかにします。
  • 該当する場合は、適用後の auth0 test login の手順。

続いて ExitPlanMode を呼び出してください。

承認後。 通常の実行が再開されます。既存のすべての確認事項は引き続き適用されます。アクティブテナントの確認、本番環境への書き込み確認、WCAG コントラストの警告、テンプレートタグの検証、カスタムテキストの PUT 前のマージ、破壊的操作のスコープ確認が含まれます。

ブラウザーで確認する(適用後)

**テナントに書き込みを行う機能(Capability 1~4)を実行した後は、**ユーザーが結果をすぐに確認できるよう、ライブの Universal Login ページを開くことを提案してください。選択式ではなく、自由入力形式で質問します。

確認のため、ブラウザーでログインページを開きますか?(yes / no)

yes の場合:アクティブテナントで auth0 test login を実行します。CLI はデフォルトアプリを使って認証コードフローを開始し、ブラウザーを開きます。環境がヘッドレスの場合やブラウザーを開けない場合、CLI は認証 URL を標準出力に表示します。これを取得し、手動で開くようユーザーに渡してください。

no の場合:書き込んだ内容の要約で終了します。

注意:

  • これは Capability 1(テナントのブランディング)、Capability 2(特定の設定の変更)、Capability 3(ブランドの声の適用)、Capability 4(Auth0 のデフォルト設定へのロールバック)に適用されます。ロールバックの場合、ブラウザーページには Auth0 の組み込みデフォルト設定が表示されます。これが確認になります。
  • Capability 5(セットアップの確認)は読み取り専用です。この手順は省略してください。
  • テストに使用する優先クライアントがある場合、ユーザーから伝えられます。auth0 test login --client-id <id> は特定のアプリを対象にします。それ以外の場合はデフォルトを使用してください。

主要な概念

概念説明
テーマUniversal Login に適用されるビジュアル設定(色、フォント、枠線、ウィジェットのレイアウト、背景)です。Auth0 では現在、デフォルトのテーマのみがレンダリングされます。API を使用して追加のテーマを作成できますが、Universal Login では使用されません
ブランディング設定テナントレベルのロゴ、ファビコン、プライマリカラー、ページの背景色です
ページテンプレートログインウィジェットを囲む、Liquid 構文を使用したカスタム HTML です。カスタムドメインが必要です
テキストのカスタマイズUniversal Login ページで、プロンプト、画面、言語ごとに適用するテキストの上書き設定です
カスタムテキスト変数Custom Text API で定義される顧客独自のキー(var- が接頭辞)。テンプレートやパーシャルから camelCase 形式で参照されます
カスタムドメインページテンプレートに必要です。ドメインを Auth0 のログインページに紐付けます
Universal Login と Classicテナントでは、各フロー(ログイン/サインアップ、パスワードリセット、MFA)をいずれかのエクスペリエンスでレンダリングできます。テーマ、テンプレート、ノーコードエディターが適用されるのは、Universal Login で実行されるフローのみです

前提条件

これらは、テナントに書き込みを行うすべての機能に適用されます。「Check my setup」は読み取り専用で、必要な設定が整っているか最初に確認するために実行できます。

CLI のテナントコンテキスト(auth0 CLI を使用する場合)

Auth0 CLI が認証されるテナントは、一度に 1 つだけです。すべての auth0 ... コマンドは、CLI が現在ログインしているテナントに対して実行されます。

auth0 tenants list       # shows all tenants; the active one is marked with →
auth0 tenants use <name> # switch active tenant; prompts for browser login if not already authenticated

いずれかの機能で書き込み操作を行う前に、auth0 tenants list を実行し、アクティブなテナントをユーザーに提示して、続行する明示的な確認を得てください。 テナントが間違っている場合は、処理を中止してください。ユーザー自身で auth0 tenants use <name> を実行するよう案内してください(対象のテナントが一覧にない場合は auth0 login を実行します)。その後、スキルを再度呼び出してもらいます。ユーザーに代わってテナントを切り替えてはいけません。

非対話型またはマルチテナントの自動化では、CLI を使わず、呼び出しごとに明示的なドメインとベアラートークンを指定して、Management API を直接呼び出してください。references/examples.md を参照してください。

ブランディング対象のフローで Universal Login が有効になっていること

テーマとテンプレートが適用されるのは、実際に Universal Login で実行されるフローのみです。一部のフローが Classic となるハイブリッドモードでテナントを運用できます。どのフローに影響があるかを診断するには、機能 5(「Check my setup」)を実行してください。Classic への切り替えの仕組みについては、references/capability-check.md を参照してください。

カスタムドメイン(ページテンプレートを使用する場合のみ)

ページテンプレートを使用するには、テナントにカスタムドメインが必要です。ブランディング設定、テーマ、テキストのカスタマイズには必要ありません。ページテンプレートを使用するタスクでカスタムドメインが設定されていない場合は、auth0-custom-domains スキルを使用して設定してください。

機能 1:テナントをブランディングする

ウェブサイトの URL、インラインのブランド情報、または簡単な依頼をもとに、ブランディングを最初から最後まで行います。プライマリカラー、ロゴ、フォント、ページの背景を設定し、1 つの案を提示して、テーマを適用します。

references/capability-brand.md を参照してください。

機能 2:特定の設定を変更する

ユーザーの自然言語での意図に基づいて、手動でブランディングを更新します。スキルが表現を特定のフィールドに対応付け、変更を準備して一括で適用します。

references/capability-manual.md を参照してください。

機能 3:ブランドのトーンに合わせる

ユーザーが提供した情報源(ウェブサイト、サンプル文、またはトーンの説明)に合わせて、Universal Login のテキストを書き換えます。色、レイアウト、ロゴは変更しません。

references/capability-voice.md を参照してください。カテゴリ → プロンプト → 画面の対応表については、references/screens.md を参照してください。

機能 4:Auth0 のデフォルトに戻す

ブランディングの各要素を個別にクリアし、Auth0 のデフォルトに戻します。破壊的な操作のため、書き込みの前に必ず確認を求めます。

references/capability-rollback.md を参照してください。

機能 5:設定を確認する

読み取り専用の診断です。「テーマの変更は、対象のフローに実際に反映されるか?」という疑問に答えます。「テーマが表示されないのはなぜか?」を調べる際、最初に安全に実行できます。

references/capability-check.md を参照してください。

よくある間違い

間違い代わりに行うこと
POST /branding/themes でテーマを追加作成する(Universal Login でレンダリングされるのはデフォルトのテーマのみです。POST したテーマは存在しますが、適用されません)デフォルトのテーマを必ず更新してください。GET /branding/themes/default を実行してから、その themeId を指定して PATCH します
テーマに部分的な PATCH を送信する(PATCH では最上位のセクションをすべて指定する必要があります)テーマを GET して変更を適用し、オブジェクト全体を指定して PATCH します
テーマやページテンプレートの変更がログイン/パスワードリセット/MFA に反映されない(テナント全体の切り替え設定により、そのフローが Classic に強制されている)「Check my setup」を実行してください。問題のあるテナント設定を修正します。universal_login_experience: classic(ログイン/サインアップ)、change_password.enabled: true(リセット)、または guardian_mfa_page.enabled: true(MFA)
テンプレートに auth0:head または auth0:widget がない(両方とも必須です。ない場合、ページはレンダリングされません)必ず両方を含めてください。そうでなければ PUT を拒否します
マージせずにカスタムテキストに PUT を使用する(PUT はそのプロンプト/言語のすべてのテキストを置き換えます)まず現在のテキストを GET し、マージしてから、オブジェクト全体を PUT します

拡張版の一覧(テーマフィールドの要件、Brandfetch の利用規約、ホームページのみから抽出する場合の不足点、CSS クラス名、CLI のテナントコンテキスト)については、references/api.md を参照してください。

参考資料

スキル内(段階的開示):

  • references/capability-brand.md:「テナントをブランディングする」フロー。抽出パイプライン、ソースの優先順位、適用手順
  • references/capability-manual.md:「特定の設定を変更する」フロー。インテントのマッピング、各サーフェスへの書き込み方法、適用/ガードレール
  • references/capability-voice.md:「ブランドの声に合わせる」フロー。ソースプロンプト、カテゴリチェックリスト、オプトイン検出、ロケール処理、生成と適用
  • references/capability-rollback.md:「Auth0 のデフォルトにロールバックする」フロー。対象範囲の事前確認、サーフェスの選択、バックアップ、実行
  • references/capability-check.md:「セットアップを確認する」フロー。Classic 切り替え設定の背景、チェック項目、出力形式
  • references/screens.md:「ブランドの声に合わせる」のカテゴリ → プロンプト → 画面のマップ(開始点。Auth0 は時間の経過とともに新しい画面を追加します)
  • references/api.md:Management API エンドポイント、テーマ/ブランディングのスキーマ、CLI コマンド、エラーコード
  • references/examples.md:cURL のコードサンプルと、CI/CD デプロイおよびテナント移行のパターン
  • references/advanced.md:Liquid 構文を使ったページテンプレートの作成、テンプレート変数、テキストのカスタマイズの詳細

関連スキル:

  • auth0-custom-domains:カスタムドメインを設定します(ページテンプレートで必須)
  • auth0-organizations:B2B マルチテナント向けの組織固有のブランディング
  • auth0-actions:Auth0 Actions を使用したログインフロー内のカスタムロジック
  • acul-screen-generator:Universal Login の高度なカスタマイズ(ACUL)。テーマとテンプレートで実現できる範囲を超えた、完全にカスタムな画面を構築します

外部資料:

コメント