clerk

作者: clerk

智慧路由器,根據您的框架和使用情境,將驗證任務導向專門的 Clerk 技能。路由至八項專業技能,涵蓋設定、自訂 UI、Next.js 模式、組織、Webhook、測試、原生 iOS/Android 及後端 API。從 package.json 偵測 Clerk SDK 版本(Core 2 LTS 與目前版本),以套用正確的模式和 API。涵蓋網頁框架(Next.js、React、Expo、React Router、TanStack Start)及原生平台(Swift/iOS、Kotlin/Android)...

npx skills add https://github.com/clerk/skills --skill clerk

Clerk Skills Router

Version Detection

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

PackageCore 2 (LTS until Jan 2027)Current
@clerk/nextjsv5–v6v7+
@clerk/react or @clerk/clerk-reactv5–v6v7+
@clerk/expo or @clerk/clerk-expov1–v2v3+
@clerk/react-routerv1–v2v3+
@clerk/tanstack-react-start< v0.26.0v0.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, Keyless flow
  • Migration from other auth providers

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
  • Vinxi server integration

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

  • Native iOS Swift and SwiftUI projects
  • ClerkKit and ClerkKitUI implementation guidance
  • Source-driven patterns from clerk-ios

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
  • /clerk-android - Native Android
  • /clerk-backend-api - Backend REST API

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

來自 clerk 的更多技能

clerk-monorepo
clerk
在clerk/javascript SDK monorepo中高效工作。適用於設定儲存庫、建置/測試/執行套件、決定使用哪個@clerk/*…
official
mosaic
clerk
Work on Mosaic UI: styling a component with slot recipes (`defineSlotRecipe` / `useRecipe` / slots / variants), or building a flow — authoring a state machine…
official
mosaic-machine
clerk
編寫與使用 Mosaic 狀態機。當使用者正在使用 createMachine 撰寫狀態機、建模多步驟流程、將機器連接至 React 等情境時使用。
official
clerk-android
clerk
Implement Clerk authentication for native Android apps using Kotlin and Jetpack Compose with clerk-android source-guided patterns. Use for prebuilt…
official
clerk-astro-patterns
clerk
使用 Clerk 的 Astro 模式 — 中介軟體、SSR 頁面、島嶼元件、API 路由、靜態 vs SSR 渲染。觸發條件:astro clerk、clerk astro middleware、…
official
clerk-backend-api
clerk
Clerk 後端 REST API 探索工具與執行工具。瀏覽標籤、檢查端點配置結構,並執行已驗證的要求。適用於列出使用者、管理…
official
clerk-chrome-extension-patterns
clerk
使用 @clerk/chrome-extension 進行 Chrome 擴充功能驗證 -- popup/sidepanel 設定、透過 Web 應用程式使用 syncHost 進行 OAuth/SAML、為 service workers 使用 createClerkClient 以及…
official
clerk-cli
clerk
Operate the Clerk CLI (`clerk` binary) for authentication, user/org/session management, impersonation, local webhook testing, deploy verification, instance…
official