clerk-setup

Detect the framework from package.json and apply the matching Clerk quickstart.

Updated Apr 28, 2026
One-click install
npx skills add https://github.com/weng-lab/APIConsole --skill clerk-setup-weng-lab
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: clerk-setup
Source: https://github.com/weng-lab/APIConsole/tree/main/.agents/skills/clerk-setup
Command: npx skills add https://github.com/weng-lab/APIConsole --skill clerk-setup-weng-lab

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Add Clerk authentication to a project by following official quickstart guides.

Core Features & Use Cases

  • Framework detection via package.json
  • Fetch and apply the official quickstart for the detected framework
  • Configure Clerk provider and proxy/middleware
  • Set up API keys via dashboard or keyless dev mode

Quick Start

Follow the official Clerk quickstart for your framework to install the correct SDK, wrap your app with ClerkProvider (and create proxy.ts/middleware.ts where required), and set up environment keys.

Frequently Asked Questions about clerk-setup

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add Clerk authentication to my Next.js or Express project?

Add Clerk authentication by automatically detecting your framework from package.json and applying the matching official quickstart. It installs the correct Clerk SDK, configures the provider and middleware, and sets up your environment variables for immediate auth integration.

Can I use Clerk auth with Astro, Nuxt, or Remix?

Yes, Clerk auth supports Astro, Nuxt, Remix, React Router, TanStack Start, Vue, Fastify, and Expo. The tool detects your specific framework from package.json and fetches the corresponding official Clerk quickstart guide to ensure correct SDK installation and configuration.

Do I need to manually configure Clerk middleware and proxy files?

No, you do not need to manually configure Clerk middleware and proxy files. The setup process fetches your framework's official quickstart and provides specific instructions for wrapping your app with ClerkProvider and creating the necessary proxy.ts or middleware.ts files.

What's the best way to set up Clerk API keys during local development?

Set up Clerk API keys by provisioning them via the Clerk dashboard or by using keyless development mode. The setup guides you through configuring the required environment variables in your project so that authentication functions correctly across different environments.

Does this Clerk setup process support React SPA and Vue frameworks?

Yes, this Clerk setup process supports React SPA and Vue frameworks. It detects the framework from your package.json and applies the matching official quickstart to install the appropriate Clerk package and configure the necessary authentication provider.

Why does framework detection matter when adding Clerk authentication?

Framework detection matters because Clerk authentication requires framework-specific SDKs and middleware configurations. By reading package.json to identify your framework, the setup ensures you follow the correct official quickstart and avoid manual configuration errors.