Stats
Actions
Tags
'%20stop-opacity%3D'0.16'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'rgb(200%2C90%2C60)'%20stop-opacity%3D'0.03'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D'320'%20height%3D'200'%20fill%3D'url(%23g)'%2F%3E%3Ccircle%20cx%3D'250'%20cy%3D'56'%20r%3D'92'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.06'%2F%3E%3Ccircle%20cx%3D'64'%20cy%3D'172'%20r%3D'58'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.05'%2F%3E%3C%2Fsvg%3E)
From fuse-tanstack-start
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.
How this skill is triggered — by the user, by Claude, or both
Slash command
/fuse-tanstack-start:start-coreThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
TanStack Start is a full-stack React framework built on **TanStack Router + Vite**
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, noapp/layout.tsx. Routes live insrc/routes/; server-only code usescreateServerFn.CRITICAL — code is isomorphic by default. Loaders run on server AND client. See the
start-execution-modelskill before putting logic in a loader.CRITICAL — types are fully inferred. Never cast or annotate inferred values.
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.
Every Start app needs exactly two hand-written wiring files plus one generated:
src/router.tsx — a getRouter() factory returning createRouter({ routeTree }).src/routes/__root.tsx — the document shell (<html>, HeadContent,
Outlet, Scripts).src/routeTree.gen.ts — GENERATED by the plugin. Never edit.// 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()],
})
// 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.
| 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 <Scripts />, 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 |
Instead of building by hand, the CLI scaffolds a working project:
npx @tanstack/cli@latest create
# or clone an official example:
npx gitpick TanStack/router/tree/main/examples/react/start-basic start-basic
tanstackStart() (breaks generation).src/routeTree.gen.ts (generated).<Scripts /> in __root.tsx (no hydration).verbatimModuleSyntax (leaks server code into client bundle).getServerSideProps, "use server").npx claudepluginhub fusengine/agents --plugin fuse-tanstack-startGuides completion of development work by verifying tests, detecting environment, and presenting structured options for merge, PR, or cleanup.
Guides creation and editing of skills using test-driven development with pressure scenarios and subagents to verify agent compliance.
Dispatches multiple subagents concurrently for independent tasks without shared state. Use when facing 2+ unrelated failures or subsystems that can be investigated in parallel.