메뉴
Core overview for TanStack Start: tanstackStart() Vite plugin, getRouter() factory, root route document shell (HeadContent, Scripts, Outlet), client/server entry points, routeTree.gen.ts, tsconfig configuration. Entry point for all Start skills.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Install TanStack Devtools, pick framework adapter (React/Vue/Solid/Preact), register plugins via plugins prop, configure shell (position, hotkeys, theme, hideUntilHover, requireUrlFlag, eventBusConfig). TanStackDevtools component, defaultOpen, localStorage persistence.
Configure @tanstack/devtools-vite for source inspection (data-tsd-source, inspectHotkey, ignore patterns), console piping (client-to-server, server-to-client, levels), enhanced logging, server event bus (port, host, HTTPS), production stripping (removeDevtoolsOnBuild), editor integration (launch-editor, custom editor.open). Must be FIRST plugin in Vite config. Vite ^6 || ^7 only.
React bindings for TanStack Start: createStart, StartClient, StartServer, React-specific imports, re-exports from @tanstack/react-router, full project setup with React, useServerFn hook.
Framework-agnostic core concepts for TanStack Router: route trees, createRouter, createRoute, createRootRoute, createRootRouteWithContext, addChildren, Register type declaration, route matching, route sorting, file naming conventions. Entry point for all router skills.
TanStack Router bundler plugin for route generation and automatic code splitting. Supports Vite, Webpack, Rspack, and esbuild. Configures autoCodeSplitting, routesDirectory, target framework, and code split groupings.
validateSearch, search param validation with Zod/Valibot/ArkType adapters, fallback(), search middlewares (retainSearchParams, stripSearchParams), custom serialization (parseSearch, stringifySearch), search param inheritance, loaderDeps for cache keys, reading and writing search params.
| name | start-core |
| description | Core overview for TanStack Start: tanstackStart() Vite plugin, getRouter() factory, root route document shell (HeadContent, Scripts, Outlet), client/server entry points, routeTree.gen.ts, tsconfig configuration. Entry point for all Start skills. |
| type | core |
| library | tanstack-start |
| library_version | 1.166.2 |
| sources | ["TanStack/router:docs/start/framework/react/build-from-scratch.md","TanStack/router:docs/start/framework/react/quick-start.md","TanStack/router:docs/start/framework/react/guide/routing.md"] |
TanStack Start is a full-stack React framework built on TanStack Router and Vite. It adds SSR, streaming, server functions (type-safe RPCs), middleware, server routes, and universal deployment.
CRITICAL: All code in TanStack Start is ISOMORPHIC by default — it runs in BOTH server and client environments. Loaders run on both server AND client. To run code exclusively on the server, use
createServerFn. This is the #1 AI agent mistake. CRITICAL: TanStack Start is NOT Next.js. Do not generategetServerSideProps,"use server"directives,app/layout.tsx, or any Next.js/Remix patterns. UsecreateServerFnfor server-only code. CRITICAL: Types are FULLY INFERRED. Never cast, never annotate inferred values.
| Task | Sub-Skill |
|---|---|
| Type-safe RPCs, data fetching, mutations | start-core/server-functions/SKILL.md |
| Request/function middleware, context, auth | start-core/middleware/SKILL.md |
| Isomorphic execution, environment boundaries | start-core/execution-model/SKILL.md |
| REST API endpoints alongside app routes | start-core/server-routes/SKILL.md |
| Hosting, SSR modes, prerendering, SEO | start-core/deployment/SKILL.md |
Need to run code exclusively on the server (DB, secrets)?
→ start-core/server-functions
Need auth checks, logging, or shared logic across server functions?
→ start-core/middleware
Need to understand where code runs (server vs client)?
→ start-core/execution-model
Need a REST API endpoint (GET/POST/PUT/DELETE)?
→ start-core/server-routes
Need to deploy, configure SSR, or prerender?
→ start-core/deployment
npm i @tanstack/react-start @tanstack/react-router react react-dom
npm i -D vite @vitejs/plugin-react typescript
// vite.config.ts
import { defineConfig } from 'vite'
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import viteReact from '@vitejs/plugin-react'
export default defineConfig({
plugins: [
// MUST come before react()
tanstackStart(),
viteReact(),
],
})
// src/router.tsx
import { createRouter } from '@tanstack/react-router'
import { routeTree } from './routeTree.gen'
export function getRouter() {
const router = createRouter({
routeTree,
scrollRestoration: true,
})
return router
}
// src/routes/__root.tsx
import type { ReactNode } from 'react'
import {
Outlet,
createRootRoute,
HeadContent,
Scripts,
} from '@tanstack/react-router'
export const Route = createRootRoute({
head: () => ({
meta: [
{ charSet: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ title: 'My App' },
],
}),
component: RootComponent,
})
function RootComponent() {
return (
<html>
<head>
<HeadContent />
</head>
<body>
<Outlet />
<Scripts />
</body>
</html>
)
}
// src/routes/index.tsx
import { createFileRoute } from '@tanstack/react-router'
import { createServerFn } from '@tanstack/react-start'
const getGreeting = createServerFn({ method: 'GET' }).handler(async () => {
return { message: 'Hello from the server!' }
})
export const Route = createFileRoute('/')({
loader: () => getGreeting(),
component: HomePage,
})
function HomePage() {
const data = Route.useLoaderData()
return <h1>{data.message}</h1>
}
// WRONG — route generation and server function compilation fail
plugins: [react(), tanstackStart()]
// CORRECT — Start plugin must come first
plugins: [tanstackStart(), react()]
verbatimModuleSyntax causes server bundles to leak into client bundles. Keep it disabled.
The <Scripts /> component must be rendered in the <body> of the root route. Without it, client-side JavaScript does not load and hydration fails.
// WRONG — no Scripts
function RootComponent() {
return (
<html>
<head>
<HeadContent />
</head>
<body>
<Outlet />
</body>
</html>
)
}
// CORRECT — Scripts in body
function RootComponent() {
return (
<html>
<head>
<HeadContent />
</head>
<body>
<Outlet />
<Scripts />
</body>
</html>
)
}
This skill targets @tanstack/react-start v1.166.2 and @tanstack/start-client-core v1.166.2.