Skip to main content
affpapa.org
RU EN
skill CX Codex

clerk — Claude Code skill: Clerk task router

Reads your Clerk question and routes it to the right sub-skill: setup, CLI, framework patterns, billing, webhooks.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add clerk/skills --skill clerk -a claude-code
Open on GitHub

What clerk does

The skill does not answer anything on its own. It picks one of the bundled Clerk skills based on what you asked: clerk-setup for wiring Clerk into a project, clerk-cli for CLI work, clerk-custom-ui for your own sign-in flows, dedicated pattern sets for Next.js, React, Vue, Nuxt, Astro, TanStack Start, Expo and Chrome Extensions, plus clerk-orgs, clerk-billing, clerk-webhooks, clerk-testing, clerk-swift, clerk-android and clerk-backend-api.

Before picking patterns it checks the SDK version in package.json. For @clerk/nextjs and @clerk/react that is v5–v6 (Core 2) versus v7+, for @clerk/expo and @clerk/react-router v1–v2 versus v3+, for @clerk/tanstack-react-start below v0.26.0 versus v0.26.0 and up. Unclear version or a new project means current wins. Every skill targets the current SDK, and Core 2 differences sit inline as callouts. The exception is clerk-custom-ui, which keeps separate core-2/ and core-3/ directories because the custom flow hooks differ completely between versions.

If you already know your task, skip the routing and call the skill directly. Native Android work on Kotlin and Jetpack Compose goes through clerk-android, which is not meant for Expo or React Native projects. For Swift on iOS and macOS you have to run clerk-setup first when Clerk is not configured yet.

What it helps with

  • add Clerk to a project on a specific framework
  • match patterns to the SDK version in package.json
  • build a custom sign-in flow with useSignIn and useSignUp
  • set up organizations, roles and permissions for a multi-tenant app
  • test webhooks locally and impersonate a user

Example prompts for the agent

  • add Clerk to my Next.js project and tell me which keys I need
  • I'm on @clerk/nextjs v5, show me the Core 2 patterns
  • set up billing with plans and gate a feature using has()

How to install clerk

1Skills CLI (Vercel)

npx skills add clerk/skills --skill clerk -a claude-code

2Manually: put the files in place

~/.claude/skills/clerk/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/clerk/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about clerk

How do I install clerk in Claude?

Run npx skills add clerk/skills --skill clerk -a claude-code. The skill file then lives at ~/.claude/skills/clerk/SKILL.md.

What does the clerk skill do?

It routes your request to one of the bundled Clerk skills: setup, CLI, framework patterns, billing, webhooks, testing or native platforms.

How does it decide which patterns to use?

It reads the Clerk SDK version from package.json. Core 2 and current versions need different patterns, and an unclear version or a new project defaults to current.

Source text

SKILL.md · MIT 
---
name: clerk
description: Clerk authentication router. Use when user asks about Clerk CLI operations,
  adding authentication, setting up Clerk, custom sign-in flows, Swift or native iOS
  auth, native Android auth, Next.js patterns, React patterns, Vue patterns, Nuxt
  patterns, Astro patterns, TanStack Start patterns, Expo patterns, React Router
  patterns, Chrome Extension patterns, organizations, billing, subscriptions, payments,
  pricing, plans, seat-based pricing, feature entitlements, syncing users, testing,
  impersonating a user, or testing webhooks locally.
  Automatically routes to the specific skill based on their task.
license: MIT
metadata:
  version: 2.0.0
---

# 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.

© clerk · MIT · clerk/skills

Similar skills

Everything for Security →
clerk-authentication Mindrally Rules for wiring Clerk into Next.js: middleware, hooks, protected server actions and API routes. Useful once your app already runs on Clerk. CX Codex +1 683installs clerk-nextjs-skills gocallum Walks your agent through Clerk auth in Next.js 16 App Router: proxy.ts, env vars, route protection and an MCP server. CX Codex +1 436installs stripe-integration-expert Alireza Rezvani A Claude Code skill for Stripe subscriptions, one-time payments, usage-based billing, and webhooks. Use it when adding billing or debugging event delivery. 612installs stripe Mindrally Integration rules for Stripe in TypeScript, React and Next.js: server-side payments, subscriptions, webhooks. Useful when your agent writes checkout code. CX Codex +1 704installs nextjs-authentication giuseppe-trisciuoglio A skill with ready authentication patterns for Next.js 15+ App Router on Auth.js 5: providers, route protection, sessions and roles. CX Codex +1 3,800installs better-auth giuseppe-trisciuoglio A skill with ready-made Better Auth patterns: NestJS backend, Drizzle ORM and PostgreSQL, social login, plus plugins like 2FA and passkey. CX Codex +1 3,600installs

From the same set19

clerk-webhooks Hands the agent a working pattern for Clerk webhook handlers: signature verification, event routing, and database sync for users, sessions, orgs and billing. CX Codex +1 52,800installs clerk-orgs This skill helps configure Clerk Organizations for team workspaces, including roles, invitations, and org-scoped access. Use it when building a B2B or multi-tenant app. CX Codex +1 50,700installs clerk-testing Walks an agent through Clerk sign-in tests in Playwright or Cypress, and keeps test keys out of the production config. CX Codex +1 46,300installs clerk-cli Teaches the agent to drive the clerk binary instead of hand-rolled curl: users, orgs, sessions, webhooks, deploy checks. CX Codex +1 33,800installs clerk-react-patterns Provides authentication patterns for React single-page apps using @clerk/react in Vite and CRA. It helps implement route guards, session hooks, and custom forms. CX Codex +1 19,700installs clerk-billing A skill for Clerk Billing: pricing tables, checkout, plan-based feature gating and subscription webhooks. CX Codex +1 16,900installs clerk-react-router-patterns Guides Clerk integration with React Router v7/v8, including loaders, protected routes, SSR auth, and organization switching. Useful when wiring auth into a router. CX Codex +1 15,500installs clerk-tanstack-patterns Walks your agent through Clerk auth in TanStack React Start: route guards, createServerFn, loaders and request middleware. CX Codex +1 15,500installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor