clerk-setup

SKILL.md

Framework-agnostic Clerk authentication setup following official quickstart guides.

Detects framework from package.json dependencies and fetches the corresponding Clerk quickstart documentation (supports Next.js, Remix, Astro, Nuxt, React Router, TanStack Start, React SPA, Vue, Express, Fastify, Expo, Chrome Extension, Android, iOS, and Vanilla JavaScript)

Handles environment variable setup, provider configuration, and middleware/proxy file creation with version-specific guidance for Core 2 SDK differences

Includes migration detection and planning for projects with existing auth providers (NextAuth, Supabase, Firebase, Auth0, Passport, custom JWT)

Applies shadcn/ui theming automatically if components.json is detected; supports both keyless auto-generation and manual dashboard API key retrieval

Documents critical pitfalls including async auth() calls, secret key exposure, middleware matchers, and ClerkProvider placement rules

Set up Clerk

Use the Clerk CLI to add authentication. In agent environments, supported frameworks default to accountless setup: npx -y clerk@latest init provisions a claimable application and writes temporary development keys without requiring a Clerk account.

Before you start

Show the user this checklist and wait for a yes:

Here's what I'll do to get you set up with Clerk.

1. Set up Clerk in this project, or scaffold a new app if this directory is empty.
2. Install Clerk's agent skills for the coding agents on this machine, if they aren't installed yet.
3. Start your app with Clerk installed.

Shall I proceed?

Existing authentication