Adoption

Agent Skills are supported by leading AI development tools.

VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory

RajAryanIITBHU/clerk-tanstack-patterns

Name: clerk-tanstack-patterns
Author: RajAryanIITBHU

.agents/skills/clerk-tanstack-patterns/SKILL.md

npx skillsauth add RajAryanIITBHU/bny clerk-tanstack-patterns

Clean

TrivyContainer and dependency vulnerability scanner

Clean

SemgrepStatic code analysis for vulnerabilities

Clean

mcp-scan (Snyk)Model Context Protocol security validation

Skipped

Snyk (dep)Open source security scanning

Skipped

Socket.devSupply chain security analysis

Skipped

VirusTotalMulti-engine malware detection

Skipped

CrowdStrikeAdvanced threat intelligence

Skipped

OSV-ScannerOpen Source Vulnerability database check

Skipped

OWASP Dep-Check

TanStack React Start Patterns

What Do You Need?

| Task | Reference | |------|-----------| | Protect routes with beforeLoad | references/router-guards.md | | Auth in createServerFn | references/server-functions.md | | Pass auth to loaders | references/loaders.md | | Configure Vinxi + clerkMiddleware | references/vinxi-server.md |

References

| Reference | Description | |-----------|-------------| | references/router-guards.md | beforeLoad auth redirect | | references/server-functions.md | createServerFn with auth() | | references/loaders.md | Auth context in loaders | | references/vinxi-server.md | clerkMiddleware() setup |

Setup

npm install @clerk/tanstack-react-start

.env:

CLERK_PUBLISHABLE_KEY=pk_...
CLERK_SECRET_KEY=sk_...

src/start.ts (Vinxi entry):

import { clerkMiddleware } from '@clerk/tanstack-react-start/server'
import { createStart } from '@tanstack/react-start'

export const startInstance = createStart(() => {
  return {
    requestMiddleware: [clerkMiddleware()],
  }
})

src/routes/__root.tsx — wrap with <ClerkProvider>:

import { ClerkProvider } from '@clerk/tanstack-react-start'

function RootDocument({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <ClerkProvider>
          {children}
        </ClerkProvider>
      </body>
    </html>
  )
}

Mental Model

TanStack Start runs on Vinxi. Auth flows through two layers:

Server layer — createServerFn + auth() from @clerk/tanstack-react-start/server
Router layer — beforeLoad on route definitions, throws redirect for unauthenticated

Both layers are server-executed. Client hooks (useAuth, useUser) are React hooks for the browser side.

Minimal Pattern

import { createFileRoute, redirect } from '@tanstack/react-router'
import { createServerFn } from '@tanstack/react-start'
import { auth } from '@clerk/tanstack-react-start/server'

const authStateFn = createServerFn().handler(async () => {
  const { isAuthenticated, userId } = await auth()
  if (!isAuthenticated) {
    throw redirect({ to: '/sign-in' })
  }
  return { userId }
})

export const Route = createFileRoute('/dashboard')({
  beforeLoad: async () => await authStateFn(),
})

Common Pitfalls

| Symptom | Cause | Fix | |---------|-------|-----| | auth() returns empty | Missing clerkMiddleware in start.ts | Add to requestMiddleware array | | redirect not thrown | Using return instead of throw | throw redirect(...) in TanStack | | Wrong import for auth | Mixing client/server imports | Server: @clerk/tanstack-react-start/server | | Loader context missing userId | Not passing from beforeLoad | Return from beforeLoad, access via context | | ClerkProvider missing | Forgot root wrapping | Add to __root.tsx shell component |

Docs

TanStack React Start SDK

RajAryanIITBHU/clerk-tanstack-patterns

.agents/skills/clerk-tanstack-patterns/SKILL.md

TanStack React Start auth patterns with @clerk/tanstack-react-start - createServerFn, beforeLoad guards, loaders, Vinxi server. Triggers on: TanStack auth, createServerFn clerk, beforeLoad protection, TanStack Start middleware.

development

Updated Apr 17, 2026

$ install --global

skillsauth

npx skillsauth add RajAryanIITBHU/bny clerk-tanstack-patterns

Install this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.

Security Scan Results

3 of 9 scanners reported clean

Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.

Scanners Passed

Scanners in report

Clean

TrivyContainer and dependency vulnerability scanner

95%

Clean

SemgrepStatic code analysis for vulnerabilities

95%

Clean

mcp-scan (Snyk)Model Context Protocol security validation

95%

Skipped

Snyk (dep)Open source security scanning

50%

Skipped

Socket.devSupply chain security analysis

50%

Skipped

VirusTotalMulti-engine malware detection

50%

Skipped

CrowdStrikeAdvanced threat intelligence

50%

Skipped

OSV-ScannerOpen Source Vulnerability database check

50%

Skipped

OWASP Dep-Check

50%

Last scanned: Apr 17, 2026, 12:17 PM4.7s13 files scanned

SKILL.md

name:: clerk-tanstack-patterns
description:: TanStack React Start auth patterns with @clerk/tanstack-react-start
- createServerFn, beforeLoad guards, loaders, Vinxi server. Triggers on:: TanStack
license:: MIT
allowed-tools:: WebFetch
author:: clerk
version:: 1.0.0

TanStack React Start Patterns

What Do You Need?

References

Setup

npm install @clerk/tanstack-react-start

.env:

CLERK_PUBLISHABLE_KEY=pk_...
CLERK_SECRET_KEY=sk_...

src/start.ts (Vinxi entry):

import { clerkMiddleware } from '@clerk/tanstack-react-start/server'
import { createStart } from '@tanstack/react-start'

export const startInstance = createStart(() => {
  return {
    requestMiddleware: [clerkMiddleware()],
  }
})

src/routes/__root.tsx — wrap with <ClerkProvider>:

import { ClerkProvider } from '@clerk/tanstack-react-start'

function RootDocument({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <ClerkProvider>
          {children}
        </ClerkProvider>
      </body>
    </html>
  )
}

Mental Model

TanStack Start runs on Vinxi. Auth flows through two layers:

Server layer — createServerFn + auth() from @clerk/tanstack-react-start/server
Router layer — beforeLoad on route definitions, throws redirect for unauthenticated

Both layers are server-executed. Client hooks (useAuth, useUser) are React hooks for the browser side.

Minimal Pattern

import { createFileRoute, redirect } from '@tanstack/react-router'
import { createServerFn } from '@tanstack/react-start'
import { auth } from '@clerk/tanstack-react-start/server'

const authStateFn = createServerFn().handler(async () => {
  const { isAuthenticated, userId } = await auth()
  if (!isAuthenticated) {
    throw redirect({ to: '/sign-in' })
  }
  return { userId }
})

export const Route = createFileRoute('/dashboard')({
  beforeLoad: async () => await authStateFn(),
})

Common Pitfalls

Docs

TanStack React Start SDK

Related Skills

RajAryanIITBHU/clerk-astro-patterns

development

VerifiedTrustedCommunity

Astro patterns with Clerk — middleware, SSR pages, island components, API routes, static vs SSR rendering. Triggers on: astro clerk, clerk astro middleware, astro protected page, clerk island component, astro API route auth, clerk astro SSR.

SKILL.mdUpdated Apr 17, 2026

RajAryanIITBHU/clerk-astro-patterns

RajAryanIITBHU/clerk

tools

VerifiedTrustedCommunity

Clerk authentication router. Use when user asks about adding authentication, setting up Clerk, custom sign-in flows, Swift or native iOS auth, native Android auth, Next.js patterns, React patterns, Vue patterns, Nuxt patterns, Astro patterns, TanStack Start patterns, Expo patterns, React Router patterns, Chrome Extension patterns, organizations, syncing users, or testing. Automatically routes to the specific skill based on their task.

SKILL.mdUpdated Apr 17, 2026

RajAryanIITBHU/clerk-webhooks

development

VerifiedTrustedCommunity

Clerk webhooks for real-time events and data syncing. Always output complete, copy-paste-ready webhook handlers with verifyWebhook(req) verification. Listen for user creation, updates, deletion, and organization events. Build event-driven features like database sync, notifications, integrations.

SKILL.mdUpdated Apr 17, 2026

RajAryanIITBHU/clerk-webhooks

RajAryanIITBHU/clerk-vue-patterns

tools

VerifiedTrustedCommunity

Vue 3 patterns with Clerk — composables (useAuth, useUser, useClerk, useOrganization), Vue Router guards, Pinia auth store integration. Triggers on: vue clerk, useAuth vue, clerk composables, vue router clerk guard, pinia auth clerk. For Nuxt, use clerk-nuxt-patterns instead.

SKILL.mdUpdated Apr 17, 2026

RajAryanIITBHU/clerk-vue-patterns

Download

For Claude Desktop. Download once, then upload the file in the app — no terminal needed.

Need help? View full Cowork setup guide →

Install manually

Choose your platform

# Clone the repo
git clone https://github.com/RajAryanIITBHU/bny.git

# Copy into Claude Code skills folder (global)
cp -r bny/.agents/skills/clerk-tanstack-patterns ~/.claude/skills/

Claude Code Skills — official skills path docs.

Repository

RajAryanIITBHU/bny

Compatible with

Claude Code

OpenAI Codex CLI

ChatGPT

Adoption

RajAryanIITBHU/clerk-tanstack-patterns

$ install --global

Security Scan Results

SKILL.md

TanStack React Start Patterns

What Do You Need?

References

Setup

Mental Model

Minimal Pattern

Common Pitfalls

See Also

Docs

Related Skills

RajAryanIITBHU/clerk-astro-patterns

RajAryanIITBHU/clerk

RajAryanIITBHU/clerk-webhooks

RajAryanIITBHU/clerk-vue-patterns

RajAryanIITBHU/clerk-tanstack-patterns

$ install --global

Security Scan Results

SKILL.md

TanStack React Start Patterns

What Do You Need?

References

Setup

Mental Model

Minimal Pattern

Common Pitfalls

See Also

Docs

Related Skills

RajAryanIITBHU/clerk-astro-patterns

RajAryanIITBHU/clerk

RajAryanIITBHU/clerk-webhooks

RajAryanIITBHU/clerk-vue-patterns