Skillshub clerk-setup

Add Clerk authentication to any project by following the official quickstart guides.

install

source · Clone the upstream repo

git clone https://github.com/ComeOnOliver/skillshub

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/ComeOnOliver/skillshub "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/Harmeet10000/skills/clerk-setup" ~/.claude/skills/comeonoliver-skillshub-clerk-setup && rm -rf "$T"

manifest: skills/Harmeet10000/skills/clerk-setup/SKILL.md

source content

Adding Clerk

This skill sets up Clerk for authentication by following the official quickstart documentation.

Quick Reference

Step	Action
1. Detect framework	Check `package.json` dependencies
2. Fetch quickstart	Use WebFetch on the appropriate docs URL
3. Follow instructions	Execute the steps from the official guide
4. Get API keys	From dashboard.clerk.com

Framework Detection

Check

package.json

to identify the framework:

Dependency	Framework	Quickstart URL
`next`	Next.js	`https://clerk.com/docs/nextjs/getting-started/quickstart`
`@remix-run/react`	Remix	`https://clerk.com/docs/remix/getting-started/quickstart`
`astro`	Astro	`https://clerk.com/docs/astro/getting-started/quickstart`
`nuxt`	Nuxt	`https://clerk.com/docs/nuxt/getting-started/quickstart`
`react-router`	React Router	`https://clerk.com/docs/react-router/getting-started/quickstart`
`@tanstack/react-start`	TanStack Start	`https://clerk.com/docs/tanstack-react-start/getting-started/quickstart`
`react` (no framework)	React SPA	`https://clerk.com/docs/react/getting-started/quickstart`
`vue`	Vue	`https://clerk.com/docs/vue/getting-started/quickstart`
`express`	Express	`https://clerk.com/docs/expressjs/getting-started/quickstart`
`fastify`	Fastify	`https://clerk.com/docs/fastify/getting-started/quickstart`
`expo`	Expo	`https://clerk.com/docs/expo/getting-started/quickstart`

For other platforms:

Chrome Extension:

https://clerk.com/docs/chrome-extension/getting-started/quickstart

Android:

https://clerk.com/docs/android/getting-started/quickstart

iOS:

https://clerk.com/docs/ios/getting-started/quickstart

Vanilla JavaScript:

https://clerk.com/docs/js-frontend/getting-started/quickstart

Decision Tree

User Request: "Add Clerk" / "Add authentication"
    │
    ├─ Read package.json
    │
    ├─ Existing auth detected?
    │   │
    │   ├─ YES → Audit current auth → Create migration plan
    │   │        → See "Migrating from Another Auth Provider"
    │   │
    │   └─ NO → Fresh install
    │
    ├─ Identify framework from dependencies
    │
    ├─ WebFetch the appropriate quickstart URL
    │
    └─ Follow the official instructions step-by-step

Setup Process

1. Detect the Framework

Read the project's

package.json

and match dependencies to the table above.

2. Fetch the Quickstart Guide

Use WebFetch to retrieve the official quickstart for the detected framework:

WebFetch: https://clerk.com/docs/{framework}/getting-started/quickstart
Prompt: "Extract the complete setup instructions including all code snippets, file paths, and configuration steps."

3. Follow the Instructions

Execute each step from the quickstart guide:

Install the required packages
Set up environment variables
Add the provider/middleware
Create sign-in/sign-up routes if needed
Test the integration

4. Get API Keys

Two paths for development API keys:

Keyless (Automatic)

On first SDK initialization, Clerk auto-generates dev keys and shows "Claim your application" popover
No manual key setup required—keys are created and injected automatically
Simplest path for new projects

Manual (Dashboard)

Get keys from dashboard.clerk.com if Keyless doesn't trigger
Publishable Key: Starts with
```
pk_test_
```
or
```
pk_live_
```
Secret Key: Starts with
```
sk_test_
```
or
```
sk_live_
```

Set as environment variables:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY

and

CLERK_SECRET_KEY

Migrating from Another Auth Provider

If the project already has authentication, create a migration plan before replacing it.

Detect Existing Auth