clerk

Clerk Skills Router

バージョンの検出

package.json を確認して、Clerk SDK のバージョンを特定します。使用するパターンはこれによって決まります。

パッケージ	Core 2（2027年1月までLTS）	現行
@clerk/nextjs	v5–v6	v7+
@clerk/react または @clerk/clerk-react	v5–v6	v7+
@clerk/expo または @clerk/clerk-expo	v1–v2	v3+
@clerk/react-router	v1–v2	v3+
@clerk/tanstack-react-start	< v0.26.0	v0.26.0+

バージョンが不明な場合やプロジェクトが新しい場合は、現行版をデフォルトとして使用してください。Core 2 のパッケージでは @clerk/clerk-react と @clerk/clerk-expo（clerk- の接頭辞付き）を使用し、現行のパッケージでは @clerk/react と @clerk/expo を使用します。

すべてのスキルは現行 SDK 向けに記述されています。Core 2 で異なる点は、> **Core 2 ONLY (skip if current SDK):** という注記とともにインラインで示されています。例外は clerk-custom-ui です。カスタムフローフックの API はバージョン間でまったく異なるため、core-2/ と core-3/ のディレクトリに分かれています。

---

タスク別

プロジェクトへの Clerk の追加 → clerk-setup を使用します

• フレームワークの検出とクイックスタート
• clerk init による環境の設定、API キー、一時的な開発用キー
• 他の認証プロバイダーからの移行
• iOS セットアッププロンプトを使用した、Xcode でのネイティブ iOS および macOS アプリ

CLI からの Clerk の操作 → clerk-cli を使用します

• 認証、リンク、doctor、環境の取得
• ユーザー、組織、セッション、アプリ、インスタンスの管理
• ユーザーのなりすまし（clerk impersonate）とローカルでの Webhook テスト（clerk webhooks listen）
• 機能の有効化（clerk enable orgs、clerk enable billing）
• clerk api を通じた Backend、Platform、Frontend API の呼び出し
• デプロイへの引き継ぎとデプロイ状況の確認

カスタムのサインイン／サインアップ UI → clerk-custom-ui を使用します

• useSignIn／useSignUp フックを使ったカスタム認証フロー
• 外観とスタイル（テーマ、色、レイアウト）
• 条件付きレンダリング用の <Show> コンポーネント

高度な Next.js パターン → clerk-nextjs-patterns を使用します

• サーバーとクライアントの認証 API
• ミドルウェアの戦略
• Server Actions、キャッシュ
• API ルートの保護

React パターン → clerk-react-patterns を使用します

• フック（useAuth、useUser、useClerk）
• 保護されたルート、認証ガード
• ルーターとの統合

React Router パターン → clerk-react-router-patterns を使用します

• 認証を使ったローダーとアクション
• ルートの保護
• SSR 認証

Vue パターン → clerk-vue-patterns を使用します

• コンポーザブル（useAuth、useUser、useClerk）
• Vue Router ガード
• Pinia 認証ストアとの統合

Nuxt パターン → clerk-nuxt-patterns を使用します

• サーバーミドルウェア認証
• コンポーザブルを使った SSR 認証
• サーバー API ルート

Astro パターン → clerk-astro-patterns を使用します

• SSR 認証ページ
• React を使ったアイランドコンポーネント
• ミドルウェアと API ルート

TanStack Start パターン → clerk-tanstack-patterns を使用します

• 認証を使ったサーバー関数
• ローダーによるルート保護
• Vite プラグインとリクエストミドルウェアの設定

Expo／React Native 認証 → clerk-expo を使用します

• 事前構築済みのネイティブコンポーネント（AuthView、UserButton）
• カスタムフロー：メール、パスワード、SMS／電話番号 OTP、MFA
• OAuth／SSO とネイティブ Google／Apple サインイン
• Expo Router の保護されたルート、トークンストレージ、プッシュ通知

Chrome Extension パターン → clerk-chrome-extension-patterns を使用します

• バックグラウンドスクリプトの認証
• ポップアップ認証フロー
• 同期ホストを使ったコンテンツスクリプト

B2B／組織 → clerk-orgs を使用します

• マルチテナントアプリ
• URL 内の組織スラッグ
• ロール、権限、RBAC
• メンバー管理

請求とサブスクリプション → clerk-billing を使用します

• <PricingTable /> コンポーネント
• has() によるプランと機能の制御
• 組織を使ったシートベースの B2B 請求
• サブスクリプションのライフサイクル Webhook
• 無料トライアル、請求書発行

Webhook → clerk-webhooks を使用します

• リアルタイムイベント
• データ同期
• 通知と連携

E2E テスト → clerk-testing を使用します

• Playwright／Cypress の設定
• 認証フローのテスト
• テストユーティリティ

Swift／ネイティブ iOS 認証 → clerk-swift を使用します

• ネイティブ iOS および macOS の Swift／SwiftUI プロジェクトでのサインイン UI
• ClerkKitUI の事前構築済みビューとカスタム ClerkKit フロー
• clerk-ios のソースに基づくパターン
• Clerk がまだ設定されていない場合は、まず clerk-setup で設定してください

Android／ネイティブモバイル認証 → clerk-android を使用します

• ネイティブ Android の Kotlin および Jetpack Compose プロジェクト
• clerk-android-api と clerk-android-ui の実装ガイダンス
• clerk-android のソースに基づくパターン
• Expo または React Native のプロジェクトには使用しないでください

バックエンド REST API → clerk-backend-api を使用します

• API タグとエンドポイントの参照
• エンドポイントのスキーマの確認
• スコープの適用を伴う API リクエストの実行

クイックナビゲーション

タスクが決まっている場合は、以下から直接アクセスできます。

• /clerk-setup - フレームワークのセットアップ
• /clerk-cli - CLI 操作と Clerk リソースの管理
• /clerk-custom-ui - カスタムフローと外観
• /clerk-nextjs-patterns - Next.js のパターン
• /clerk-react-patterns - React のパターン
• /clerk-react-router-patterns - React Router のパターン
• /clerk-vue-patterns - Vue のパターン
• /clerk-nuxt-patterns - Nuxt のパターン
• /clerk-astro-patterns - Astro のパターン
• /clerk-tanstack-patterns - TanStack Start のパターン
• /clerk-expo - Expo / React Native
• /clerk-chrome-extension-patterns - Chrome 拡張機能のパターン
• /clerk-orgs - 組織
• /clerk-billing - 請求とサブスクリプション
• /clerk-webhooks - Webhook
• /clerk-testing - テスト
• /clerk-swift - Swift / ネイティブ iOS および macOS UI
• /clerk-android - ネイティブ Android
• /clerk-backend-api - バックエンド REST API

または、必要なことを説明してください。適切な項目をおすすめします。