Start core

Skill fusengine/agents/plugins/tanstack-start-expert/skills/start-core

Redefining development through cognitive automation and collaborative agent systems.

Install

npx -y skills add fusengine/agents --skill start-core

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

22 stars22 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

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.

SKILL.md

4.0 KB, 813 tokens by cl100k_base, as published. Nobody here has run it

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:

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.

Minimal Setup (glance)

// 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.

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 `<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

Scaffolding Shortcut

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

Forbidden

React Vite plugin placed before tanstackStart() (breaks generation).
Editing src/routeTree.gen.ts (generated).
Omitting <Scripts /> in __root.tsx (no hydration).
Enabling verbatimModuleSyntax (leaks server code into client bundle).
Next.js/Remix patterns (getServerSideProps, "use server").