clerk

Clerk Skills Router

Version Detection

Check package.json to determine the Clerk SDK version. This determines which patterns to use:

Package	Core 2 (LTS until Jan 2027)	Current
@clerk/nextjs	v5–v6	v7+
@clerk/react or @clerk/clerk-react	v5–v6	v7+
@clerk/expo or @clerk/clerk-expo	v1–v2	v3+
@clerk/react-router	v1–v2	v3+
@clerk/tanstack-react-start	< v0.26.0	v0.26.0+

Default to current if the version is unclear or the project is new. Core 2 packages use @clerk/clerk-react and @clerk/clerk-expo (with clerk- prefix); current packages use @clerk/react and @clerk/expo.

All skills are written for the current SDK. When something differs in Core 2, it's noted inline with > **Core 2 ONLY (skip if current SDK):** callouts. The exception is clerk-custom-ui, which has separate core-2/ and core-3/ directories for custom flow hooks since those APIs are entirely different between versions.

---

By Task

Adding Clerk to your project → Use clerk-setup

• Framework detection and quickstart
• Environment setup, API keys, temporary dev keys via clerk init
• Migration from other auth providers
• Native iOS and macOS apps in Xcode, through the iOS setup prompt

Operating Clerk from the CLI → Use clerk-cli

• Auth, linking, doctor, and environment pulls
• User, org, session, app, and instance management
• Impersonating a user (clerk impersonate) and local webhook testing (clerk webhooks listen)
• Feature toggles (clerk enable orgs, clerk enable billing)
• Backend, Platform, and Frontend API calls through clerk api
• Deploy handoff and deploy status verification

Custom sign-in/sign-up UI → Use clerk-custom-ui

• Custom authentication flows with useSignIn / useSignUp hooks
• Appearance and styling (themes, colors, layout)
• <Show> component for conditional rendering

Advanced Next.js patterns → Use clerk-nextjs-patterns

• Server vs Client auth APIs
• Middleware strategies
• Server Actions, caching
• API route protection

React patterns → Use clerk-react-patterns

• Hooks (useAuth, useUser, useClerk)
• Protected routes, auth guards
• Router integration

React Router patterns → Use clerk-react-router-patterns

• Loaders & actions with auth
• Route protection
• SSR auth

Vue patterns → Use clerk-vue-patterns

• Composables (useAuth, useUser, useClerk)
• Vue Router guards
• Pinia auth store integration

Nuxt patterns → Use clerk-nuxt-patterns

• Server middleware auth
• SSR auth with composables
• Server API routes

Astro patterns → Use clerk-astro-patterns

• SSR auth pages
• Island components with React
• Middleware & API routes

TanStack Start patterns → Use clerk-tanstack-patterns

• Server functions with auth
• Route protection via loaders
• Vite plugin and request middleware setup

Expo / React Native auth → Use clerk-expo

• Prebuilt native components (AuthView, UserButton)
• Custom flows: email, password, SMS/phone OTP, MFA
• OAuth/SSO and native Google/Apple sign-in
• Expo Router protected routes, token storage, push notifications

Chrome Extension patterns → Use clerk-chrome-extension-patterns

• Background scripts auth
• Popup auth flows
• Content scripts with sync host

B2B / Organizations → Use clerk-orgs

• Multi-tenant apps
• Organization slugs in URLs
• Roles, permissions, RBAC
• Member management

Billing & Subscriptions → Use clerk-billing

• <PricingTable /> component
• Plan and feature gating with has()
• Seat-based B2B billing with organizations
• Subscription lifecycle webhooks
• Free trials, invoicing

Webhooks → Use clerk-webhooks

• Real-time events
• Data syncing
• Notifications & integrations

E2E Testing → Use clerk-testing

• Playwright/Cypress setup
• Auth flow testing
• Test utilities

Swift / native iOS auth → Use clerk-swift

• Sign-in UI in native iOS and macOS Swift and SwiftUI projects
• ClerkKitUI prebuilt views and custom ClerkKit flows
• Source-driven patterns from clerk-ios
• If Clerk isn't set up yet, set it up first through clerk-setup

Android / native mobile auth → Use clerk-android

• Native Android Kotlin and Jetpack Compose projects
• clerk-android-api and clerk-android-ui implementation guidance
• Source-driven patterns from clerk-android
• Do not use for Expo or React Native projects

Backend REST API → Use clerk-backend-api

• Browse API tags and endpoints
• Inspect endpoint schemas
• Execute API requests with scope enforcement

Quick Navigation

If you know your task, you can directly access:

• /clerk-setup - Framework setup
• /clerk-cli - CLI operations and Clerk resource management
• /clerk-custom-ui - Custom flows & appearance
• /clerk-nextjs-patterns - Next.js patterns
• /clerk-react-patterns - React patterns
• /clerk-react-router-patterns - React Router patterns
• /clerk-vue-patterns - Vue patterns
• /clerk-nuxt-patterns - Nuxt patterns
• /clerk-astro-patterns - Astro patterns
• /clerk-tanstack-patterns - TanStack Start patterns
• /clerk-expo - Expo / React Native
• /clerk-chrome-extension-patterns - Chrome Extension patterns
• /clerk-orgs - Organizations
• /clerk-billing - Billing & subscriptions
• /clerk-webhooks - Webhooks
• /clerk-testing - Testing
• /clerk-swift - Swift/native iOS and macOS UI
• /clerk-android - Native Android
• /clerk-backend-api - Backend REST API

Or describe what you need and I'll recommend the right one.