clerk/skills
22 skills332k installs1.5k starsGitHub
Install
npx skills add https://github.com/clerk/skillsSkills in this repo
1Clerk Nextjs PatternsClerk Skills collection provides patterns and guides for integrating Clerk authentication into various frameworks. The clerk-nextjs-patterns skill guides developers through Next.js-specific patterns including middleware setup, Server Actions with auth, caching strategies, and webhooks. Developers use this to add production-grade authentication to full-stack applications.30.7kinstalls2Clerk SetupA Clerk authentication setup skill that adds user sign-in, sign-up, and authentication to any web or mobile framework. Part of the Clerk Skills marketplace with 18+ specialized skills covering CLI operations, custom UI, framework patterns, organizations, billing, testing, and native mobile platforms.30.2kinstalls3Clerk Custom UiA Clerk Skills marketplace entry for building custom sign-in and sign-up forms and styling Clerk authentication UI. Provides patterns for creating branded authentication experiences across web frameworks with Clerk's component library and API.29kinstalls4Clerk Backend ApiThis skill provides comprehensive guidance for the Clerk backend REST API. It covers user operations, organization management, session handling, webhook configuration, and API authentication. Developers use it to build backend integrations with Clerk authentication and manage user lifecycle operations programmatically.27.9kinstalls5Clerk Webhooksclerk-webhooks is an official Clerk skill that outputs complete webhook route handlers with signature verification on every handler. It covers user, session, organization, billing, and payment events for event-driven features like database sync, notifications, and third-party integrations. A developer uses it to add Clerk-driven side effects instead of polling the Backend API. Handlers verify with verifyWebhook and require a CLERK_WEBHOOK_SIGNING_SECRET.27.7kinstalls6Clerk TestingE2E testing for Clerk apps Use with Playwright or Cypress for auth flow name clerk-testing description E2E testing for Clerk apps Use with Playwright or Cypress for auth flow tests allowed-tools WebFetch license MIT metadata author clerk version 1 2 0 compatibility Requires CLERK_TESTING_TOKEN from Clerk dashboard Testing Decision Tree Framework Documentation Overview https clerk com docs guides development testing overview Playwright https clerk com docs guides development testing playwright overview Cypress https clerk com docs guides development testing cypress overview Mental Model Test auth isolated session state Each test needs fresh auth context clerkSetup initializes test environment setupClerkTestingToken bypasses bot detection storageState persists auth between tests for speed Workflow 1 Identify test framework Playwright or Cypress 2 WebFetch the appropriate URL from decision tree above 3 Follow official setup instructions 4 Use pk_test_ and sk_test_ keys only Best Practices Use setupClerkTestingToken before navigating to auth pages Use test API keys pk_test_xxx sk_test_xxx Save auth state with storageState for faster tests Use page waitForSelector data-clerk-component.26.7kinstalls7Clerk Orgsclerk-orgs is an agent skill for adding Clerk Organizations to a B2B SaaS app: multi-tenant organizations, role-based access control, verified domains, and enterprise SSO. It walks through enabling Organizations, choosing membership-required vs membership-optional mode, org creation and switching, protecting routes with has({ role }) or has({ permission }), managing members and invitations, and programmatic org management via the Clerk CLI and Backend API. A developer uses it when building team workspaces, RBAC, or org-based routing on Clerk.26kinstalls8ClerkBuild authentication with Clerk supporting Next.js, React, Vue, Nuxt, Astro, Expo, and native iOS/Android. Use when adding sign-up, sign-in, or custom auth flows. Supports organizations, subscriptions, and billing.20.9kinstalls9Clerk CliThe clerk-cli skill drives the clerk binary as a pre-authenticated gateway to Clerk Backend and Platform APIs plus local project tooling for auth, linking, environment pulls, and instance configuration. Developers log in with clerk auth login, link projects via clerk link, pull keys with clerk env pull, discover endpoints through clerk api ls, and make authenticated API calls with clerk api and JSON bodies. The CLI auto-resolves credentials from the OS keychain and home-directory state, auto-detects HTTP methods from request bodies, validates JSON payloads, and supports --dry-run previews for safe mutations. Doctor checks catch common setup failures such as missing login, stale CLI versions, or unlinked projects before API work begins. In sandboxed agent mode the CLI warns when keychain access or localhost OAuth callbacks are unavailable and users should rerun on the host before trusting auth failures. Use when listing Clerk users, updating organizations, pulling config, or making ad-hoc Clerk API requests from an agent session.13.3kinstalls10Clerk React PatternsReact SPA auth patterns with @clerk/react for Vite/CRA - ClerkProvider --- name: clerk-react-patterns description: 'React SPA auth patterns with @clerk/react for Vite/CRA - ClerkProvider setup, useAuth/useUser/useClerk hooks, React Router protected routes, custom sign-in flows. Triggers on: Vite Clerk setup, React Router auth, useAuth hook, protected route, custom sign-in form React.' license: MIT allowed-tools: WebFetch metadata: author: clerk version: 1.0.0 --- # React SPA Patterns > This skill covers `@clerk/react` for Vite/CRA SPAs. For Next.js use `clerk-nextjs-patterns`. For TanStack Start use `clerk-tanstack-patterns`. | Task | Reference | |------|-----------| | useAuth / useUser / useClerk hooks | references/hooks.md | | Protected routes with React Router | references/protected-routes.md | | Custom sign-in / sign-up forms | references/custom-flows.md | | React Router v6/v7 integration | references/router-integration.md | ## References | Reference | Description | |-----------|-------------| | `references/hooks.md` | useAuth, isLoaded guard | | `references/protected-routes.md` | ProtectedRoute pattern | | `references/custom-flows.md` | useSignIn, useSignUp flows | | `referen.11.8kinstalls11Clerk BillingClerk Billing for subscription management - render Clerk's PricingTable --- name: clerk-billing description: Clerk Billing for subscription management - render Clerk's PricingTable and in-app checkout drawer, configure subscription plans, seat-limit plans for B2B, feature entitlements with has(), and billing webhooks. Use for SaaS monetization, plan gating, checkout flows, trials, invoicing, and subscription lifecycle management. allowed-tools: WebFetch license: MIT compatibility: Requires NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY, CLERK_SECRET_KEY, and CLERK_WEBHOOK_SIGNING_SECRET. Billing must be enabled in Clerk Dashboard → Billing. Development instances can use the shared Clerk development gateway; production instances require a Stripe account for payment processing. metadata: author: clerk version: 1.0.0 --- # Billing > **STOP, prerequisite.** Billing must be enabled before any `<PricingTable />`, `<CheckoutButton />`, `has({ plan })`, or `has({ feature })` usage works. Two paths: (1) [Dashboard → Billing → Settings](https://dashboard.clerk.com/last-active?path=billing/settings), or (2) `clerk enable billing` (see "Agent-first: Programmatic billing config" below). Enabling auto-creat.10kinstalls12Clerk React Router PatternsReact Router v7 patterns with Clerk - rootAuthLoader, getAuth in loaders, --- name: clerk-react-router-patterns description: 'React Router v7 patterns with Clerk - rootAuthLoader, getAuth in loaders, clerkMiddleware, protected routes, SSR user data, org switching. Triggers on: react-router auth, rootAuthLoader, getAuth loader, react-router protected route, loader authentication, SSR auth react-router.' license: MIT allowed-tools: WebFetch metadata: author: clerk version: 1.0.0 --- # React Router Patterns SDK: `@clerk/react-router` v3+. | Task | Reference | |------|-----------| | Auth in loaders and actions | references/loaders-actions.md | | Protected routes and redirects | references/protected-routes.md | | SSR user data and session | references/ssr-auth.md | ## Mental Model React Router v7 uses a middleware + loader pipeline. Clerk plugs into both layers: - **Middleware** (`clerkMiddleware()`) - runs on every request, attaches auth to context - **`rootAuthLoader`** - required in `root.tsx` to pass Clerk state to the client - **`getAuth(args)`** - called inside any loader/action to get the current user ``` Request → clerkMiddleware() → rootAuthLoader → page loader → com.9.5kinstalls13Clerk Tanstack PatternsTanStack React Start auth patterns with clerk tanstack-react-start name clerk-tanstack-patterns description TanStack React Start auth patterns with clerk tanstack-react-start createServerFn beforeLoad guards loaders Vinxi server Triggers on TanStack auth createServerFn clerk beforeLoad protection TanStack Start middleware license MIT allowed-tools WebFetch metadata author clerk version 1 0 0 TanStack React Start Patterns What Do You Need Task Reference Protect routes with beforeLoad references router-guards md Auth in createServerFn references server-functions md Pass auth to loaders references loaders md Configure Vinxi clerkMiddleware references vinxi-server md References Reference Description references router-guards md beforeLoad auth redirect references server-functions md createServerFn with auth references loaders md Auth context in loaders references vinxi-server md clerkMiddleware setup Setup npm install clerk tanstack-react-start env CLERK_PUBLISHABLE_KEY pk_ src start ts Vinxi entry typescript import clerkMiddleware from clerk tanstack-react-start server import createStart from tanstack react-start export const startInstance createStart return requestMiddleware clerkMid.9.3kinstalls14Clerk SwiftImplement Clerk authentication for native Swift and iOS apps using ClerkKit --- name: clerk-swift description: Implement Clerk authentication for native Swift and iOS apps using ClerkKit and ClerkKitUI source-guided patterns. Use for prebuilt AuthView or custom native flows. Do not use for Expo or React Native projects. license: MIT allowed-tools: WebFetch metadata: author: clerk version: 1.2.0 compatibility: Requires Xcode and ClerkKit Swift package --- # Clerk Swift (Native iOS) This skill implements Clerk in native Swift/iOS projects by reading installed package source and mirroring current ClerkKit/ClerkKitUI behavior. ## Activation Rules Activate this skill when either condition is true: - The user explicitly asks for Swift, SwiftUI, UIKit, or native iOS Clerk implementation. - The project appears to be native iOS/Swift (for example `.xcodeproj`, `.xcworkspace`, `Package.swift`, Swift targets). Do not activate this skill when either condition is true: - The project is Expo.9kinstalls15Clerk AndroidImplement Clerk authentication for native Android apps using Kotlin and --- name: clerk-android description: Implement Clerk authentication for native Android apps using Kotlin and Jetpack Compose with clerk-android source-guided patterns. Use for prebuilt AuthView/UserButton or custom API-driven auth flows. Do not use for Expo or React Native projects. license: MIT allowed-tools: WebFetch metadata: author: clerk version: 1.2.0 compatibility: Requires Android Studio and clerk-android Gradle dependency --- # Clerk Android (Native) This skill implements Clerk in native Android projects by following current `clerk-android` SDK and docs patterns. ## Activation Rules Activate this skill when either condition is true: - The user explicitly asks for Android, Kotlin, Jetpack Compose, or native mobile Clerk implementation on Android. - The project appears to be native Android (for example `build.gradle(.kts)` with Android plugins, `AndroidManifest.xml`, `app/src/main/java`, Compose UI files). Do not activate this skill when either condition is true: - The project is Expo.8.8kinstalls16Clerk Chrome Extension PatternsChrome Extension auth with @clerk/chrome-extension -- popup/sidepanel --- name: clerk-chrome-extension-patterns description: 'Chrome Extension auth with @clerk/chrome-extension -- popup/sidepanel setup, syncHost for OAuth/SAML via web app, createClerkClient for service workers and headless extensions, stable CRX ID. Triggers on: Chrome extension auth, Plasmo clerk, popup sign-in, syncHost, background service worker token, createClerkClient, headless extension.' license: MIT allowed-tools: WebFetch compatibility: Requires PLASMO_PUBLIC_CLERK_PUBLISHABLE_KEY (Plasmo prefix for public env vars) and CLERK_FRONTEND_API. metadata: author: clerk version: 2.0.0 references: - references/sync-host.md - references/create-clerk-client.md - references/content-scripts.md - references/headless-extension.md --- # Chrome Extension Patterns ## CRITICAL RULES 1. OAuth (Google, GitHub, etc.) and SAML are NOT supported in popups or side panels -- use `syncHost` to delegate auth to your web app 2. Email links (magic links) don't work in popups -- the popup closes when the user clicks outside, resetting sign-in state 3. Side panels don't auto-refresh auth state -- users must close and reopen the side pa.8.7kinstalls17Clerk Astro PatternsAstro patterns with Clerk middleware SSR pages island components name clerk-astro-patterns description Astro patterns with Clerk middleware SSR pages island components API routes static vs SSR rendering Triggers on astro clerk clerk astro middleware astro protected page clerk island component astro API route auth clerk astro SSR license MIT allowed-tools WebFetch metadata author clerk version 1 0 0 Astro Patterns SDK clerk astro v3 Task Reference Configure middleware references middleware md Protect SSR pages references ssr-pages md Use Clerk in island components references island-components md Auth in API routes references api-routes md Use Clerk with React in Astro references astro-react md Mental Model Astro has two rendering modes per page SSR and static prerender Clerk works differently in each SSR pages use Astro locals auth which is populated by the middleware Static pages export const prerender true Clerk middleware skips them use client-side hooks in islands Islands React Vue Svelte components use useAuth and other hooks from clerk astro react Request clerkMiddleware SSR page Astro locals auth Island client useAuth8.6kinstalls18Clerk Vue Patternsclerk-vue-patterns provides structured patterns for integrating Clerk authentication into Vue 3 applications using the @clerk/vue v2+ SDK. Developers use it when wiring up reactive auth state via composables such as useAuth, useUser, useClerk, and useOrganization inside component setup functions. Key workflows include initializing clerkPlugin in main.ts with a publishable key, protecting routes with Vue Router navigation guards, syncing auth state into a Pinia store, and rendering conditional UI based on isSignedIn and userId. The skill also covers organization switching via useOrganizationList and setActive, and documents common pitfalls like losing reactivity by incorrect destructuring or missing ClerkProvider context. It explicitly excludes Nuxt use cases, redirecting those to clerk-nuxt-patterns.8.4kinstalls19Clerk Nuxt Patternsclerk-nuxt-patterns provides reference patterns for integrating Clerk authentication into Nuxt 3 applications using the @clerk/nuxt module. Developers use it when wiring up route protection via clerkMiddleware, accessing auth state in Vue components through useAuth and useUser composables, or reading auth context in Nitro server API routes via event.context.auth. The skill covers SSR hydration safety, org-aware auth with orgId and orgRole, and environment variable configuration for both public and server-side keys. It addresses common pitfalls such as composables returning undefined on the server, hydration mismatches, and incorrect clerkClient import paths. A single nuxt.config.ts module registration auto-configures middleware, plugins, and component auto-imports.8.3kinstalls20Clerk ExpoThe clerk-expo skill implements Clerk authentication in Expo and React Native by inspecting installed @clerk/expo source and mirroring current hook and component behavior. Activate for Expo or React Native projects with app.json, metro.config.js, or @clerk/expo dependency; route away for native iOS Swift, native Android Kotlin, or web-only frameworks. Choose prebuilt AuthView and UserButton or custom hook-driven flows via references/prebuilt.md or references/custom.md without blending unless requested. Gates require confirmed flow type and real publishable key before edits, direct ClerkProvider publishableKey wiring, npx expo install @clerk/expo with config plugin registration, and for custom flows a /v1/environment?_is_native=true call to build an enabled-factor checklist. Prohibits useOAuth in favor of useSSO, requires tokenCache from @clerk/expo/token-cache, and notes native components need development builds not Expo Go. Source-driven templates read node_modules exports and dist types rather than hardcoded examples.7.2kinstalls21Audit Clerk SkillAudits the bundled clerk-cli skill against the Clerk CLI source and proposes or applies updates. A developer uses it after Clerk CLI commands, flags, or agent-mode behavior change to resync the skill.237installs22Clerk Custom Uiclerk-custom-ui is a Claude Code skill in the AI & Agent Building category. Custom authentication flows and component appearance - hooks (useSignIn,0installs