---
name: start-core
version: 1.0.0
description: >-
TanStack Start setup and project anatomy — tanstackStart() Vite (and Rsbuild)
plugin, getRouter() factory, root route document shell (HeadContent, Outlet,
Scripts), routeTree.gen.ts, tsconfig, src/ layout. Use when: scaffolding a
Start project from scratch, wiring the build tool, understanding where files
go, debugging setup (blank page, hydration, no client JS). Do NOT use for:
server-only vs isomorphic boundaries (use start-execution-model), SOLID/code
organization (use solid-tanstack-start), plain React SPA without Start.
user-invocable: true
references: references/project-setup.md, references/project-anatomy.md, references/common-mistakes.md, references/templates/minimal-project.md
---
# TanStack Start Core
TanStack Start is a full-stack React framework built on **TanStack Router + Vite**
(Rsbuild also supported). It adds SSR, streaming, server functions (type-safe
RPCs), middleware, and universal deployment. This skill targets
`@tanstack/react-start` **v1.166.2**.
> **CRITICAL — Start is NOT Next.js.** No `getServerSideProps`, no `"use server"`
> directives, no `app/layout.tsx`. Routes live in `src/routes/`; server-only code
> uses `createServerFn`.
>
> **CRITICAL — code is isomorphic by default.** Loaders run on server AND client.
> See the `start-execution-model` skill before putting logic in a loader.
>
> **CRITICAL — types are fully inferred.** Never cast or annotate inferred values.
## Agent Workflow (MANDATORY)
Before implementing, verify current APIs against Context7
(`/websites/tanstack_start_framework_react`) + Exa, then explore the target
codebase. After changes, run `fuse-ai-pilot:sniper`.
---
## The Two Required Files
Every Start app needs exactly two hand-written wiring files plus one generated:
1. **`src/router.tsx`** — a `getRouter()` factory returning `createRouter({ routeTree })`.
2. **`src/routes/__root.tsx`** — the document shell (``, `HeadContent`,
`Outlet`, `Scripts`).
3. **`src/routeTree.gen.ts`** — GENERATED by the plugin. Never edit.
---
## Minimal Setup (glance)
```ts
// vite.config.ts — Start plugin MUST come before React's
import { defineConfig } from 'vite'
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import viteReact from '@vitejs/plugin-react'
export default defineConfig({
server: { port: 3000 },
plugins: [tanstackStart(), viteReact()],
})
```
```tsx
// src/router.tsx
import { createRouter } from '@tanstack/react-router'
import { routeTree } from './routeTree.gen'
export function getRouter() {
return createRouter({ routeTree, scrollRestoration: true })
}
```
Full walkthrough → `references/project-setup.md`. Full file tree and each file's
role → `references/project-anatomy.md`. Complete copy-paste project →
`references/templates/minimal-project.md`.
---
## Reference Guide
| Topic | Reference | Load when |
|-------|-----------|-----------|
| Install, Vite + Rsbuild config, package.json, tsconfig | `references/project-setup.md` | scaffolding, wiring the build tool |
| `src/` layout, `getRouter`, `__root.tsx`, generated tree | `references/project-anatomy.md` | understanding where files go |
| Plugin order, missing ``, `verbatimModuleSyntax` | `references/common-mistakes.md` | blank page, hydration fails, no client JS |
| Full minimal project (every file) | `references/templates/minimal-project.md` | starting a new app |
---
## Scaffolding Shortcut
Instead of building by hand, the CLI scaffolds a working project:
```bash
npx @tanstack/cli@latest create
# or clone an official example:
npx gitpick TanStack/router/tree/main/examples/react/start-basic start-basic
```
---
## Forbidden
- React Vite plugin placed before `tanstackStart()` (breaks generation).
- Editing `src/routeTree.gen.ts` (generated).
- Omitting `` in `__root.tsx` (no hydration).
- Enabling `verbatimModuleSyntax` (leaks server code into client bundle).
- Next.js/Remix patterns (`getServerSideProps`, `"use server"`).