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 获取临时开发密钥
• 从其他身份验证提供方迁移
• 在 Xcode 中开发原生 iOS 和 macOS 应用，通过 iOS 设置提示词进行设置

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

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

自定义登录／注册 UI → 使用 clerk-custom-ui

• 使用 useSignIn / useSignUp Hooks 实现自定义身份验证流程
• 外观和样式（主题、颜色、布局）
• 用于条件渲染的 <Show> 组件

高级 Next.js 模式 → 使用 clerk-nextjs-patterns

• 服务端与客户端身份验证 API
• 中间件策略
• Server Actions、缓存
• API 路由保护

React 模式 → 使用 clerk-react-patterns

• Hooks（useAuth、useUser、useClerk）
• 受保护路由、身份验证守卫
• 路由器集成

React Router 模式 → 使用 clerk-react-router-patterns

• 使用身份验证实现 Loaders 和 Actions
• 路由保护
• SSR 身份验证

Vue 模式 → 使用 clerk-vue-patterns

• Composables（useAuth、useUser、useClerk）
• Vue Router 守卫
• Pinia 身份验证 Store 集成

Nuxt 模式 → 使用 clerk-nuxt-patterns

• 服务端中间件身份验证
• 使用 Composables 实现 SSR 身份验证
• 服务端 API 路由

Astro 模式 → 使用 clerk-astro-patterns

• SSR 身份验证页面
• 与 React 搭配使用的 Island 组件
• 中间件和 API 路由

TanStack Start 模式 → 使用 clerk-tanstack-patterns

• 使用身份验证实现服务端函数
• 通过 Loaders 保护路由
• 设置 Vite 插件和请求中间件

Expo / React Native 身份验证 → 使用 clerk-expo

• 预构建的原生组件（AuthView、UserButton）
• 自定义流程：电子邮件、密码、短信／电话 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 和 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 Extension 模式
• /clerk-orgs - 组织
• /clerk-billing - 账单和订阅
• /clerk-webhooks - Webhook
• /clerk-testing - 测试
• /clerk-swift - Swift / 原生 iOS 和 macOS UI
• /clerk-android - 原生 Android
• /clerk-backend-api - 后端 REST API

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