Execute qualquer Skill no Manus
com um clique

Execute qualquer Skill no Manus com um clique

clerk-tanstack-patterns

Estrelas1

Forks0

Atualizado24 de junho de 2026 às 18:09

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.

Instalação

Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.

Executar no Manus

Fonte

gannonh

gannonh/kata-code

Abrir repositório GitHub Ver repositórios do creator

Download

Executar no Manus

Explorador de arquivos

13 arquivos

SKILL.md

readonly

name	clerk-tanstack-patterns
description	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.
license	MIT
allowed-tools	WebFetch
metadata	{"author":"clerk","version":"1.0.0"}

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

Mais deste repositório

mesmo repositório

upstream-assess

gannonh/kata-code

Assess and selectively port changes from the upstream T3 Code fork (pingdotgg/t3code) into Kata Code. Use whenever the user wants to review what upstream has done, assess the diff, decide what to bring in, triage upstream commits, plan a vendor-pull, run an upstream scan, or figure out which upstream changes are worth porting. Covers scanning upstream since the last baseline, grouping commits by effort and risk, recommending Port/Skip/Watch per change, and re-implementing chosen changes as fork-original commits with Kata branding applied from the start.

2026-06-241

clerk-cli

gannonh/kata-code

Operate the Clerk CLI (`clerk` binary) for authentication, user/org/session management, deploy verification, instance config, env keys, and any Clerk Backend or Platform API call. Use when the user mentions Clerk management tasks, "list clerk users", "create a clerk user", "update organization", "pull clerk config", "clerk env pull", "clerk doctor", "clerk deploy", "clerk deploy status", "clerk api", or any ad-hoc Clerk API request. Prefer the CLI over raw HTTP: it handles auth, key resolution, app/instance targeting, and formatting automatically.

2026-06-241

cloudflare

gannonh/kata-code

Comprehensive Cloudflare platform skill covering Workers, Pages, storage (KV, D1, R2), AI (Workers AI, Vectorize, Agents SDK), feature flags (Flagship), networking (Tunnel, Spectrum), security (WAF, DDoS), and infrastructure-as-code (Terraform, Pulumi). Use for any Cloudflare development task. Biases towards retrieval from Cloudflare docs over pre-trained knowledge.

2026-06-241

name	clerk-tanstack-patterns
description	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.
license	MIT
allowed-tools	WebFetch
metadata	{"author":"clerk","version":"1.0.0"}

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

clerk-tanstack-patterns

TanStack React Start Patterns

What Do You Need?

References

Setup

Mental Model

Minimal Pattern

Common Pitfalls

See Also

Docs

TanStack React Start Patterns

What Do You Need?

References

Setup

Mental Model

Minimal Pattern

Common Pitfalls

See Also

Docs