Install and configure Clerk SDK/CLI authentication. Use when setting up a new Clerk integration, configuring API keys, or initializing Clerk in your project. Trigger with phrases like "install clerk", "setup clerk", "clerk auth", "configure clerk API key", "add clerk to project".
/plugin marketplace add jeremylongshore/claude-code-plugins-plus-skills/plugin install clerk-pack@claude-code-plugins-plusThis skill is limited to using the following tools:
Set up Clerk SDK and configure authentication credentials for your application.
# Next.js
npm install @clerk/nextjs
# React
npm install @clerk/clerk-react
# Express/Node.js
npm install @clerk/express
# Remix
npm install @clerk/remix
# Create .env.local file
cat >> .env.local << 'EOF'
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
CLERK_SECRET_KEY=sk_test_...
EOF
// app/layout.tsx
import { ClerkProvider } from '@clerk/nextjs'
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<ClerkProvider>
<html lang="en">
<body>{children}</body>
</html>
</ClerkProvider>
)
}
// middleware.ts
import { clerkMiddleware } from '@clerk/nextjs/server'
export default clerkMiddleware()
export const config = {
matcher: [
'/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
'/(api|trpc)(.*)',
],
}
import { auth } from '@clerk/nextjs/server'
export async function GET() {
const { userId } = await auth()
return Response.json({ authenticated: !!userId })
}
| Error | Cause | Solution |
|---|---|---|
| Invalid API Key | Incorrect or mismatched keys | Verify keys in Clerk dashboard match environment |
| ClerkProvider Missing | SDK used outside provider | Wrap app root with ClerkProvider |
| Middleware Not Running | Matcher misconfigured | Check matcher regex in middleware.ts |
| Module Not Found | Installation failed | Run npm install @clerk/nextjs again |
// app/layout.tsx
import { ClerkProvider, SignInButton, SignedIn, SignedOut, UserButton } from '@clerk/nextjs'
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<ClerkProvider>
<html lang="en">
<body>
<header>
<SignedOut>
<SignInButton />
</SignedOut>
<SignedIn>
<UserButton />
</SignedIn>
</header>
{children}
</body>
</html>
</ClerkProvider>
)
}
import { ClerkProvider } from '@clerk/clerk-react'
const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
function App() {
return (
<ClerkProvider publishableKey={PUBLISHABLE_KEY}>
<Router />
</ClerkProvider>
)
}
After successful auth, proceed to clerk-hello-world for your first authenticated request.