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

awfixers-stuff/clerk-tanstack-patterns

Name: clerk-tanstack-patterns
Author: awfixers-stuff

skills/clerk-tanstack-patterns/SKILL.md

npx skillsauth add awfixers-stuff/opencode-config 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

awfixers-stuff/clerk-tanstack-patterns

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 23, 2026

$ install --global

skillsauth

npx skillsauth add awfixers-stuff/opencode-config 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 23, 2026, 5:15 PM191.9s12 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

awfixers-stuff/zmx

development

VerifiedTrustedCommunity

Use when starting dev servers, watchers, tilt, or any process expected to outlive the conversation. Provides zmx session management patterns for long-lived processes.

SKILL.mdUpdated Apr 27, 2026

awfixers-stuff/zig-testing

development

VerifiedTrustedCommunity

Zig testing skill for writing and running tests. Use when using zig build test, writing comptime tests, using test filters, working with test allocators to detect leaks, or using Zig's built-in fuzz testing (0.14+). Activates on queries about Zig tests, zig test, zig build test, comptime testing, test allocators, Zig fuzz testing, or detecting memory leaks in Zig tests.

SKILL.mdUpdated Apr 27, 2026

awfixers-stuff/zig-testing

awfixers-stuff/zig-debugging

development

VerifiedTrustedCommunity

Zig debugging skill. Use when debugging Zig programs with GDB or LLDB, interpreting Zig runtime panics, using std.debug.print for tracing, configuring debug builds, or debugging Zig programs in VS Code. Activates on queries about debugging Zig, Zig panics, zig gdb, zig lldb, std.debug.print, Zig stack traces, or Zig error return traces.

SKILL.mdUpdated Apr 27, 2026

awfixers-stuff/zig-debugging

awfixers-stuff/zig-cross

tools

VerifiedTrustedCommunity

Zig cross-compilation skill. Use when cross-compiling Zig programs to different targets, using Zig's built-in cross-compilation for embedded, WASM, Windows, ARM, or using zig cc to cross-compile C code without a system cross-toolchain. Activates on queries about Zig cross-compilation, zig target triples, zig cc cross-compile, Zig embedded targets, or Zig WASM.

SKILL.mdUpdated Apr 27, 2026

awfixers-stuff/zig-cross

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/awfixers-stuff/opencode-config.git

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

Claude Code Skills — official skills path docs.

Repository

awfixers-stuff/opencode-config

Compatible with

Claude Code

OpenAI Codex CLI

ChatGPT

Adoption

awfixers-stuff/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

awfixers-stuff/zmx

awfixers-stuff/zig-testing

awfixers-stuff/zig-debugging

awfixers-stuff/zig-cross

awfixers-stuff/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

awfixers-stuff/zmx

awfixers-stuff/zig-testing

awfixers-stuff/zig-debugging

awfixers-stuff/zig-cross