Clerk
> Drop-in authentication and user management — sign-in, sign-up, orgs, RBAC, webhooks.
Best use case
Clerk is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
> Drop-in authentication and user management — sign-in, sign-up, orgs, RBAC, webhooks.
Teams using Clerk should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/clerk/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How Clerk Compares
| Feature / Agent | Clerk | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
> Drop-in authentication and user management — sign-in, sign-up, orgs, RBAC, webhooks.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Clerk
> Drop-in authentication and user management — sign-in, sign-up, orgs, RBAC, webhooks.
## When to Use
- Adding auth to Next.js (App Router or Pages), React, or Remix apps
- Need pre-built sign-in/sign-up UI with social, email, MFA support
- Managing organizations, roles, and permissions (RBAC)
- Syncing user data to your DB via webhooks
## Core Patterns
### Provider Setup (Next.js App Router)
```typescript
// app/layout.tsx
import { ClerkProvider } from "@clerk/nextjs";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<ClerkProvider>
<html><body>{children}</body></html>
</ClerkProvider>
);
}
```
### Middleware (Protect Routes)
```typescript
// middleware.ts
import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server";
const isPublic = createRouteMatcher(["/", "/sign-in(.*)", "/sign-up(.*)", "/api/webhooks(.*)"]);
export default clerkMiddleware(async (auth, req) => {
if (!isPublic(req)) await auth.protect();
});
export const config = { matcher: ["/((?!_next|.*\\.).*)"] };
```
### Client Hooks
```typescript
import { useUser, useAuth, useOrganization } from "@clerk/nextjs";
const { user, isLoaded } = useUser(); // Full user object
const { userId, getToken } = useAuth(); // Auth state + JWT access
const { organization, membership } = useOrganization(); // Active org + role
```
### Server-Side Auth
```typescript
import { auth, currentUser } from "@clerk/nextjs/server";
// Route handler or Server Component
const { userId, orgId, orgRole } = await auth();
const user = await currentUser(); // Full User object
if (!userId) redirect("/sign-in");
```
### Webhook (Sync Users to DB)
```typescript
// app/api/webhooks/clerk/route.ts
import { Webhook } from "svix";
import { WebhookEvent } from "@clerk/nextjs/server";
export async function POST(req: Request) {
const payload = await req.text();
const headers = Object.fromEntries(req.headers);
const wh = new Webhook(process.env.CLERK_WEBHOOK_SECRET!);
const event = wh.verify(payload, headers) as WebhookEvent;
if (event.type === "user.created") await db.users.create(event.data);
if (event.type === "user.updated") await db.users.update(event.data);
return Response.json({ received: true });
}
```
## Key Features
- **Components**: `<SignIn />`, `<SignUp />`, `<UserButton />`, `<OrganizationSwitcher />`
- **RBAC**: `auth.protect({ role: "org:admin" })` or `auth.protect({ permission: "org:posts:create" })`
- **JWT Templates**: Dashboard > JWT Templates — add custom claims (`metadata`, `orgRole`)
- **Custom Claims**: `const token = await getToken({ template: "supabase" })` for third-party JWTs
- **Organizations**: Create orgs, invite members, assign roles — all via components or JS SDK
- **Metadata**: `user.publicMetadata` (server-set), `user.unsafeMetadata` (client-set)
- **Multi-session**: `useSessionList()` for apps supporting multiple active sessions
- **Env vars**: `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY`, `CLERK_SECRET_KEY`, `CLERK_WEBHOOK_SECRET`Related Skills
ultrathink
UltraThink Workflow OS — 4-layer skill mesh with persistent memory and privacy hooks for complex engineering tasks. Routes prompts through intent detection to activate the right domain skills automatically.
ultrathink_review
Multi-pass code review powered by UltraThink's quality gate — checks correctness, security (OWASP), performance, readability, and project conventions in a single structured pass.
ultrathink_memory
Persistent memory system for UltraThink — search, save, and recall project context, decisions, and patterns across sessions using Postgres-backed fuzzy search with synonym expansion.
ui-design
Comprehensive UI design system: 230+ font pairings, 48 themes, 65 design systems, 23 design languages, 30 UX laws, 14 color systems, Swiss grid, Gestalt principles, Pencil.dev workflow. Inherits ui-ux-pro-max (99 UX rules) + impeccable-frontend-design (anti-AI-slop). Triggers on any design, UI, layout, typography, color, theme, or styling task.
Zod
> TypeScript-first schema validation with static type inference.
webinar-registration-page
Build a webinar or live event registration page as a self-contained HTML file with countdown timer, speaker bio, agenda, and registration form. Triggers on: "build a webinar registration page", "create a webinar sign-up page", "event registration landing page", "live training registration page", "workshop sign-up page", "create a webinar page", "build an event page", "free webinar landing page", "live demo registration page", "online event page", "create a registration page for my webinar", "build a training event page".
webhooks
Webhook design patterns — delivery, retry with exponential backoff, HMAC signature verification, payload validation, idempotency keys
web-workers
Offload heavy computation from the main thread using Web Workers, SharedWorkers, and Comlink — structured messaging, transferable objects, and off-main-thread architecture patterns
web-vitals
Core Web Vitals monitoring (LCP, FID, CLS, INP, TTFB), measurement with web-vitals library, reporting to analytics, and optimization strategies for Next.js
web-components
Native Web Components, custom elements API, Shadow DOM, HTML templates, slots, lifecycle callbacks, and framework-agnostic design patterns
wasm
WebAssembly integration — Rust to WASM with wasm-pack/wasm-bindgen, WASI, browser usage, server-side WASM, and performance considerations
vue
Vue 3 Composition API, Nuxt patterns, reactivity system, component architecture, and production development practices