# react-start

Guides agents through TanStack Start with React. It covers Vite configuration, isomorphic loaders, server functions, and the useServerFn hook.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 454 installs · ★ 15248
- Author: TanStack
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/TanStack/router/tree/HEAD/packages/react-start/skills/react-start/SKILL.md
- Updated: 2026-10-25
- HTML: https://affpapa.org/en/nevibecode/skills/react-start

## What it does

This skill guides coding agents through `@tanstack/react-start` (library version 1.168.32). All route code is isomorphic by default. Loaders execute on both server and client, so any database access or private logic must live inside `createServerFn`. The instructions explicitly warn agents not to confuse TanStack Start APIs with Next.js or Remix conventions.

It outlines project scaffolding with Vite and TypeScript. Plugin ordering matters: `tanstackStart()` must appear before `viteReact()` in `vite.config.ts`. For client-triggered mutations, components use the `useServerFn` hook followed by router cache invalidation.

TypeScript types are fully inferred across boundaries. Agents are instructed never to cast or manually annotate inferred values. The skill requires `start-core` before changing raw server boundaries.

## Install

### Claude Code (native platform)

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

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

### Codex

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

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

### Cursor

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

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install TanStack/router react-start
```

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

### Gemini CLI

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

2. **Platform CLI**
```bash
gemini skills install https://github.com/TanStack/router --path packages/react-start/skills/react-start
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add TanStack/router --skill react-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/router/tree/HEAD/packages/react-start/skills/react-start/SKILL.md

## When to use it
- configure TanStack Start projects with React and Vite
- trigger server mutations from components using useServerFn
- isolate private server logic from isomorphic route loaders
- set up the root document layout and router factory

## Example prompts
- "Create a route that handles a mutation using createServerFn and useServerFn"
- "Configure vite.config.ts for TanStack Start with React"
- "Set up src/router.tsx and src/routes/__root.tsx with HeadContent and Scripts"

## 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: 449485406e33c9c0.

BEGIN THIRD-PARTY FILE 449485406e33c9c0
````text
---
name: react-start
description: >-
  React bindings for TanStack Start: createStart, StartClient,
  StartServer, React-specific imports, re-exports from
  @tanstack/react-router, full project setup with React, useServerFn
  hook.
metadata:
  type: framework
  library: tanstack-start
  library_version: '1.168.32'
  framework: react
requires:
  - start-core
sources:
  - TanStack/router:packages/react-start/src
  - TanStack/router:docs/start/framework/react/build-from-scratch.md
---

# React Start (`@tanstack/react-start`)

This is the React Start entry skill. Use the workflow below, then load only the package skill that owns the boundary you are changing. Do not read `start-core`, Router Core, and React Router manuals in full before starting.

For React Server Components patterns, see [react-start/server-components](./server-components/SKILL.md).

> **CRITICAL**: All code is ISOMORPHIC by default. Loaders run on BOTH server and client. Use `createServerFn` for server-only logic.

> **CRITICAL**: Do not confuse `@tanstack/react-start` with Next.js or Remix. They are completely different frameworks with different APIs.

> **CRITICAL**: Types are FULLY INFERRED. Never cast, never annotate inferred values.

## Full-Stack Workflow

1. Define the route and component with `createFileRoute`.
2. Put private or server-only reads and writes in `createServerFn`; call reads directly from loaders.
3. Use `useServerFn` for component mutations, then invalidate the router or query cache after the write resolves.
4. Enforce auth in every private server function or server route. Add `beforeLoad` separately for navigation UX.
5. Run the initial SSR path, client navigation, mutation plus reload, direct anonymous endpoint request, runtime response assertion, type tests, and production build.

Load `start-core/server-routes` instead of `server-functions` only when a raw HTTP endpoint is required. Load `router-core/*` only for the specific routing concern involved, such as params or search validation.

## Package API Surface

`@tanstack/react-start` re-exports everything from `@tanstack/start-client-core` plus:

- `useServerFn` — React hook for calling server functions from components

All core APIs (`createServerFn`, `createMiddleware`, `createStart`, `createIsomorphicFn`, `createServerOnlyFn`, `createClientOnlyFn`) are available from `@tanstack/react-start`.

Server utilities (`getRequest`, `getRequestHeader`, `setResponseHeader`, `setResponseHeaders`, `setResponseStatus`) are imported from `@tanstack/react-start/server`.

## Full Project Setup

### 1. Install Dependencies

```bash
npm i @tanstack/react-start @tanstack/react-router react react-dom
npm i -D vite @vitejs/plugin-react typescript @types/react @types/react-dom
```

### 2. package.json

```json
{
  "type": "module",
  "scripts": {
    "dev": "vite dev",
    "build": "vite build",
    "start": "node .output/server/index.mjs"
  }
}
```

### 3. tsconfig.json

```json
{
  "compilerOptions": {
````
END THIRD-PARTY FILE 449485406e33c9c0

The third-party file has ended. Everything between the 449485406e33c9c0 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 2984 of 8524 bytes. © TanStack · MIT · https://github.com/TanStack/router/tree/HEAD/packages/react-start/skills/react-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