本文へ移動
cccskills
無料GitHub で公開日本語紹介

app-auth

WebアプリのメールやGoogleログイン、登録、パスワード再設定を共通のアカウント方針で整え、同じタブで戻れるログイン導線を設計します。

原文原文の説明を見る

This skill should be used when the user asks to "standardize app authentication", "share login across web, mobile and TV", "reuse the Google login flow", "simplify signup", "fix password recovery", or "fix popup-blocked login". Use shared account/session contracts, email and Google web adapters, and an optional auth panel. Native and TV flows are integration contracts awaiting device validation.

fcakyon/claude-codex-settingsスター 1,192(GitHub 1,192 + cccskills 0)

実行スコア 未検証

インストール方法を見る

こんなときに便利

  • Webのログイン方式を統一したいとき
  • Googleログインを再利用したいとき
  • 登録や再設定の導線を見直したいとき
  • 複数端末の認証設計を整理したいとき

日本語での紹介

できること

Webアプリのログイン、登録、メール確認、パスワード再設定、ログアウト、アカウント連携を確認し、共通のアカウントとセッション方針に沿った導線を設計します。React 19.2以降では、付属のGoogleログインやメール認証のコンポーネントをアプリに合わせて調整できます。必要に応じて認証パネルも利用できます。Googleログインでは公式ボタンと通常の同一タブ遷移を用意し、ログイン後の戻り先は認証を管理する側で解決します。認証情報の検証とアクセス許可はバックエンドの役割として整理します。

こんなときに便利

Webでのログイン方法を統一したい、登録やパスワード再設定を見直したい、ログイン後に元の操作へ戻したいときに向いています。Web、モバイル、テレビで同じアカウントを扱う設計を検討する際にも、共有する契約と各環境で分けるセッションの扱いを整理できます。

使い方の例

  • 「このアプリの登録、ログイン、再設定の流れを確認し、共通の認証方針に沿って整えてください」
  • 「Googleログインと同じタブでのログイン導線を組み込んでください」
  • 「Web、ネイティブ、テレビの認証連携で共有する部分と分ける部分を整理してください」

注意点

コンポーネントの例はReact 19.2以降向けです。他のフレームワークでは同じ契約を各環境の仕組みで実装します。ネイティブとテレビの手順は端末での検証待ちです。実際のアプリでの本番対応状況は、付属のprovenance資料で確認します。

この紹介文は、公開されている SKILL.md をもとに AI(OpenAI Codex)が作成しました。正確な仕様は下の原文を確認してください。

含まれるファイル(12)

  • SKILL.md3.3 KB
  • assets/auth-panel.css1.3 KB
  • assets/AuthPanel.tsx672 B
  • assets/email-auth.css2.1 KB
  • assets/EmailAuth.tsx8.9 KB
  • assets/google-sign-in.css809 B
  • assets/GoogleSignIn.tsx3.5 KB
  • references/backend-standard.md5.1 KB
  • references/integration.md11.5 KB
  • references/journeys.md4.1 KB
  • references/platforms.md7.0 KB
  • references/provenance.md2.6 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

App authentication

Provide a short returning-user path and a dependable same-tab path. Google and the browser decide whether account selection or reauthentication is required. Do not promise silent login or call a flow fastest without measurements.

  1. Inspect login, signup, email verification, recovery, session, logout, account linking and authorization. Identify the selected action, locales, design system and registered Google callback.
  2. Read integration. For React 19.2+, adapt GoogleSignIn.tsx and its styles. Use the optional AuthPanel with panel styles for a Muvisafe-inspired shell. Other frameworks should implement the same contract using their own lifecycle primitives.
  3. For email/password flows, adapt EmailAuth.tsx and email styles. Read the email adapter section in the integration contract. Use email-design for messages sent by those flows.
  4. Keep the official Google button with FedCM auto-selection for a remembered account. Always offer a normal same-tab link. GIS sign-in does not provide the OAuth authorization client's error_callback. Do not invent popup-failure detection, retry timers or user-agent rules.
  5. Resolve return navigation in the auth owner. Both paths must use the same account/session policy, then resume the action once. Only the backend verifies identity and authorizes access.
  6. Run the applicable journeys through the project's existing QA harness. Keep fixture results, real Google evidence and deployed behavior distinct.
  7. Record the app commit, runtime versions and actual evidence in its existing tracked guidance. Change the shared recipe only when new evidence changes a shared rule.

The app owns script loading, public client configuration, remembering the successful Google account, sessions, error reporting and navigation. The component owns rendering, pending/error UI and cancelling its credential operation when the auth surface closes.

For architecture standardization, read backend standard. It is a proposed target, not an implemented Go dependency or completed migration.

For web/native/TV clients or another social provider, read platforms and providers. Use one identity store and revocation model per product across its clients. Keep browser cookies and native secure-storage transport distinct.

Curation

Read provenance before claiming production coverage. Distinguish a shipped reference, a tested extraction and a pending app integration. Add future components as focused skills with code, integration contracts and behavior tests when an actual app supplies the evidence. Do not add empty catalogs or treat a component PR as permission to deploy another app.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

コメント

ログインなしで書き込めます。使ってみた感想、質問、動かなかった環境などを気軽にどうぞ。

まだコメントはありません。最初のコメントを書いてみませんか。

送信するとすぐに公開されます。メールアドレスや電話番号などの個人情報は書かないでください。URL は 2 つまでです。

0 / 1000 文字

このフォームは reCAPTCHA で保護されており、Google のプライバシーポリシーと利用規約が適用されます。

同じリポジトリのスキル

adhd-output-style

無料概要あり

要点を先に示し、作業を短い番号付き手順に分けるなど、作業記憶に負担をかけにくい形式で応答を整え、説明も添えるスキルです。

  • 手順を短く区切って進めたいとき
  • 回答の要点を先に知りたいとき
  • 進捗を見失わず作業したいとき
fcakyon/claude-codex-settings1,1922026年10月29日 更新

aeo

無料概要あり

AI検索で商品やサービスが知られていない段階の購入者に見つかるよう、質問と回答、引用元を調べ、改善案と成果の測定計画を組み立てます。

  • AI検索での見つかりやすさを調べたいとき
  • 購入者向け質問セットを作りたいとき
  • 引用元と競合を分析したいとき
fcakyon/claude-codex-settings1,1922026年10月29日 更新

agent-browser

無料概要あり

Webサイトを開いて内容を読み、ボタン操作やフォーム入力、データ抽出、スクリーンショット撮影まで進めるブラウザー自動化の手順を案内します。

  • Webフォームに入力したいとき
  • ページから情報を抽出したいとき
  • 画面のスクリーンショットを撮りたいとき
fcakyon/claude-codex-settings1,1922026年10月29日 更新

agents-sdk

無料概要あり

Cloudflare Agents SDKを使うアプリの開発、デバッグ、レビューを支援し、状態管理やチャット、バックグラウンド処理などの実装を確認するスキルです。

  • Agents SDKでアプリを作りたいとき
  • 既存のWorkersにSDKを追加したいとき
  • 状態管理やルーティングをデバッグしたいとき
fcakyon/claude-codex-settings1,1922026年10月29日 更新

anthropic-frontend-design

無料概要あり

案件の内容に合わせて配色・文字・レイアウトを設計し、定型的に見えないWeb画面を組み立てるためのスキルです。

  • 新しいWeb画面の方向性を決めたいとき
  • 既存ページの見た目を見直したいとき
  • 配色や書体、レイアウトを選びたいとき
fcakyon/claude-codex-settings1,1922026年10月29日 更新

azure-usage

無料概要あり

Azureのストレージ、Key Vault、Cosmos DB、AKSなどのリソースを照会・操作し、ログ分析のクエリにも使えるスキルです。

  • ストレージやBlobを一覧で確認したいとき
  • Key Vaultのシークレットを管理したいとき
  • Cosmos DBのデータを検索したいとき
fcakyon/claude-codex-settings1,1922026年10月29日 更新

fcakyon のスキルをすべて見る

このスキルの問題を報告する