clerk

Clerk 技能路由器

版本检测

检查 package.json，确定 Clerk SDK 版本。这将决定要使用哪些模式：

Package	Core 2（支持至 2027 年 1 月）	当前版本
@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，它针对自定义流程钩子分别设有 core-2/ 和 core-3/ 目录，因为这两个版本的相关 API 完全不同。

---

按任务分类

将 Clerk 添加到项目中 → 使用 clerk-setup

• 框架检测和快速入门
• 环境设置、API 密钥，以及通过 clerk init 获取临时开发密钥
• 从其他身份验证提供商迁移

通过 CLI 操作 Clerk → 使用 clerk-cli

• 身份验证、关联、doctor 和拉取环境配置
• 用户、组织、会话、应用和实例管理
• 模拟用户（clerk impersonate）和本地 Webhook 测试（clerk webhooks listen）
• 功能开关（clerk enable orgs、clerk enable billing）
• 通过 clerk api 调用 Backend、Platform 和 Frontend API
• 移交部署并验证部署状态

自定义登录／注册界面 → 使用 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 扩展模式 → 使用 clerk-chrome-extension-patterns

• 后台脚本身份验证
• 弹出窗口身份验证流程
• 使用同步主机的内容脚本

B2B／组织 → 使用 clerk-orgs

• 多租户应用
• URL 中的组织 slug
• 角色、权限、RBAC
• 成员管理

账单与订阅 → 使用 clerk-billing

• <PricingTable /> 组件
• 使用 has() 管理套餐和功能访问权限
• 基于席位的 B2B 组织账单
• 订阅生命周期 Webhook
• 免费试用、开票

Webhook → 使用 clerk-webhooks

• 实时事件
• 数据同步
• 通知和集成

端到端测试 → 使用 clerk-testing

• Playwright/Cypress 设置
• 身份验证流程测试
• 测试工具

Swift／原生 iOS 身份验证 → 使用 clerk-swift

• 原生 iOS Swift 和 SwiftUI 项目
• ClerkKit 和 ClerkKitUI 实现指南
• 源码驱动的 clerk-ios 模式

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
• /clerk-android - 原生 Android
• /clerk-backend-api - 后端 REST API

或者描述你的需求，我会为你推荐合适的选项。