# tanstack-start

Guides agents through building full-stack React apps with TanStack Start, streaming SSR, and type-safe server functions.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 3900 installs · ★ 36
- Author: tanstack-skills
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/tanstack-skills/tanstack-skills/tree/HEAD/plugins/tanstack-start/skills/tanstack-start/SKILL.md
- Updated: 2026-01-31
- HTML: https://affpapa.org/en/nevibecode/skills/tanstack-start

## What it does

This skill supplies coding agents with architectural conventions and patterns for TanStack Start. The stack pairs TanStack Router with Vinxi (Vite plus Nitro) via `@tanstack/react-start`. It instructs the agent on proper file routing under `app/routes`, configuring `app.config.ts`, and maintaining `routeTree.gen.ts`.

It standardizes backend communication using `createServerFn` with Zod schema validation, context-driven auth chains via `createMiddleware`, and custom endpoints via `createAPIFileRoute`. Routing logic covers streaming SSR patterns that split instant data from deferred promises using `defer` and `Suspense`.

The framework is currently in Release Candidate status, and React Server Components support is still under active development. Keep in mind that server functions extract into separate bundles: they must return serializable data and cannot capture client variables in closures.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add tanstack-skills/tanstack-skills --skill tanstack-start -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/tanstack-start/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/tanstack-start/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add tanstack-skills/tanstack-skills --skill tanstack-start -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/tanstack-start/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add tanstack-skills/tanstack-skills --skill tanstack-start -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/tanstack-start/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install tanstack-skills/tanstack-skills tanstack-start
```

2. **Manually: put the files in place**
- File: `.github/skills/tanstack-start/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add tanstack-skills/tanstack-skills --skill tanstack-start -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/tanstack-skills/tanstack-skills --path plugins/tanstack-start/skills/tanstack-start
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/tanstack-start/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add tanstack-skills/tanstack-skills --skill tanstack-start -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/tanstack-skills/tanstack-skills/tree/HEAD/plugins/tanstack-start/skills/tanstack-start/SKILL.md

## When to use it
- set up streaming SSR with deferred data fetching using Suspense
- write type-safe RPC endpoints using createServerFn with Zod validation
- implement auth guard middleware with typed context passing
- configure Nitro deployment presets for Node.js, Vercel, or Cloudflare Pages

## Example prompts
- Create a POST server function with Zod validation for updating user profiles
- Write an auth middleware that redirects unauthenticated users to /login
- Set up a streaming route loader with defer for dashboard analytics

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 8e8bdd9634b211f4.

BEGIN THIRD-PARTY FILE 8e8bdd9634b211f4
````text
---
name: tanstack-start
description: Full-stack React framework powered by TanStack Router with SSR, streaming, server functions, and deployment to any hosting provider.
---

# TanStack Start Skills

## Overview

TanStack Start is a full-stack React framework built on TanStack Router, powered by Vite and Nitro (via Vinxi). It provides server-side rendering, streaming, server functions (RPC), middleware, API routes, and deploys to any platform via Nitro presets.

**Package:** `@tanstack/react-start`
**Router Plugin:** `@tanstack/router-plugin`
**Build Tool:** Vinxi (Vite + Nitro)
**Status:** RC (Release Candidate)
**RSC Support:** React Server Components support is in active development and will land as a non-breaking v1.x addition

## Installation & Project Setup

```bash
npx @tanstack/cli create my-app
# Or manually:
npm install @tanstack/react-start @tanstack/react-router react react-dom
npm install -D @tanstack/router-plugin typescript vite vite-tsconfig-paths
```

### Project Structure

```
my-app/
  app/
    routes/
      __root.tsx          # Root layout
      index.tsx           # / route
      posts.$postId.tsx   # /posts/:postId
      api/
        users.ts          # /api/users API route
    client.tsx            # Client entry
    router.tsx            # Router creation
    ssr.tsx               # SSR entry
    routeTree.gen.ts      # Auto-generated route tree
  app.config.ts           # TanStack Start config
  tsconfig.json
  package.json
```

### Configuration (`app.config.ts`)

```typescript
import { defineConfig } from '@tanstack/react-start/config'
import viteTsConfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  vite: {
    plugins: [
      viteTsConfigPaths({ projects: ['./tsconfig.json'] }),
    ],
  },
  server: {
    preset: 'node-server', // 'vercel' | 'netlify' | 'cloudflare-pages' | etc.
  },
  tsr: {
    appDirectory: './app',
    routesDirectory: './app/routes',
    generatedRouteTree: './app/routeTree.gen.ts',
  },
})
```

## Server Functions (`createServerFn`)

Server functions provide type-safe RPC calls between client and server.

### Basic Server Functions

```typescript
import { createServerFn } from '@tanstack/react-start'

// GET (data fetching, cacheable)
const getUsers = createServerFn()
  .handler(async () => {
    const users = await db.query.users.findMany()
    return users
  })

// POST (mutations, side effects)
const createUser = createServerFn({ method: 'POST' })
  .validator((data: { name: string; email: string }) => data)
  .handler(async ({ data }) => {
    const user = await db.insert(users).values(data).returning()
    return user
  })
```

### With Zod Validation
````
END THIRD-PARTY FILE 8e8bdd9634b211f4

The third-party file has ended. Everything between the 8e8bdd9634b211f4 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2678 of 6899 bytes. © tanstack-skills · MIT · https://github.com/tanstack-skills/tanstack-skills/tree/HEAD/plugins/tanstack-start/skills/tanstack-start/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md