skills.rest
mehdibha
mehdibhaCOMMUNITY
Explore all skills by this author →
Website𝕏@mehdibhaGitHub

start-core

Configure TanStack Start projects with Vite plugin, router factory, and root route shell.

1.4k|34|Updated Mar 7, 2024
Search Tags:#full-stack#react#routing#vite#ssr#server-functions#tanstack-start
One-click install
npx skills add https://github.com/mehdibha/dotUI --skill start-core-mehdibha
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: start-core
Source: https://github.com/mehdibha/dotUI/tree/main/.claude/skills/tanstack-start-core
Command: npx skills add https://github.com/mehdibha/dotUI --skill start-core-mehdibha

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tanstack/react-start, @tanstack/react-router, react, react-dom, vite, @vitejs/plugin-react, typescript.

What problem does it solve? Setting up a TanStack Start full-stack React application involves several error-prone steps — Vite plugin ordering, router factory creation, document shell structure, and isomorphic execution rules — where small mistakes silently break SSR, hydration, or server function compilation. ## Core Features & Use Cases - Project Scaffolding Guidance: Walks through installing dependencies, configuring the tanstackStart() Vite plugin before react(), creating the getRouter() factory, and building the root route with HeadContent, Scripts, and Outlet. - Sub-Skill Routing: Directs tasks to specialized sub-skills for server functions, middleware, execution model, server routes, and deployment via a decision tree. - Common Mistake Prevention: Flags critical errors like wrong Vite plugin order, enabling verbatimModuleSyntax, and omitting the Scripts component that breaks hydration. - Use Case: You are bootstrapping a new full-stack React app with TanStack Start v1.166.2 and need the correct vite.config.ts, router.tsx, and __root.tsx files plus a working server function example without falling into Next.js pattern traps. ## Quick Start Set up a new TanStack Start project with the correct Vite config, router factory, and root route document shell.

Frequently Asked Questions about start-core

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up a TanStack Start project from scratch?▼

Install @tanstack/react-start, @tanstack/react-router, react, and react-dom, then add the tanstackStart() plugin before viteReact() in vite.config.ts. Create a getRouter() factory in src/router.tsx and a root route rendering HeadContent, Outlet, and Scripts.

How do I run server-only code in TanStack Start?▼

Use createServerFn from @tanstack/react-start to define server-only functions, since all other code in TanStack Start is isomorphic and runs on both server and client. Loaders also execute in both environments, so database or secret access must go through server functions.

Why is my TanStack Start app not hydrating on the client?▼

Hydration fails when the Scripts component is missing from the root route's body. Ensure your RootComponent renders <Scripts /> inside <body> after <Outlet /> so client-side JavaScript loads correctly.

Does TanStack Start work like Next.js with app router patterns?▼

No, TanStack Start is not Next.js and does not support getServerSideProps, "use server" directives, or app/layout.tsx conventions. It uses file-based routes with createFileRoute, createServerFn for server code, and a root route document shell instead.

Why does my TanStack Start build leak server code into the client bundle?▼

Enabling verbatimModuleSyntax in tsconfig causes server bundles to leak into client bundles. Keep this compiler option disabled, and also verify the tanstackStart() plugin is listed before react() in your Vite config.

Related Skills

Explore More Software Engineering Skills→
guillempucheguillempuche

lifecycle/migrate-from-nextjs

Migrate a Next.js App Router application to TanStack Start.

Community
Advanced
compozycompozy
2.5k

tanstack-start-best-practices

Apply TanStack Start best practices to build robust full-stack React apps.

Official
Advanced
nthplusionthplusio

shadcn-data-tables

Build TanStack Table data tables with shadcn/ui components.

Official
Intermediate
jcsoftdevjcsoftdev

react-render-optimization

Analyze React component trees to eliminate unnecessary re-renders across Next.js, Remix, Vite, and vanilla apps.

Community
Advanced