skills.rest
Angael
AngaelCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

start-core

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

Updated Dec 21, 2025
Search Tags:#full-stack#react#server functions#tanstack start#routing#vite#ssr
One-click install
npx skills add https://github.com/Angael/veles --skill start-core-angael
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: start-core
Source: https://github.com/Angael/veles/tree/main/.agents/skills/start-core
Command: npx skills add https://github.com/Angael/veles --skill start-core-angael

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Setting up a TanStack Start application involves several error-prone steps—plugin ordering in Vite, router factory creation, root route document shell, and entry points—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. - Isomorphic Execution Guardrails: Explains that all code runs on both server and client by default, and that createServerFn is required for server-only logic—preventing the most common AI agent mistakes. - Sub-Skill Routing: Directs to specialized skills for server functions, middleware, auth, server routes, execution model, and deployment via a decision tree. - 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 without hydration failures. ## Quick Start Ask the AI to scaffold a new TanStack Start project with the Vite plugin, router factory, and root route document shell configured correctly.

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 tanstackStart() 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 functions, since all other code 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 hydration failing?▼

Hydration fails when the Scripts component is missing from the root route's body, preventing client-side JavaScript from loading. Ensure the root component renders HeadContent in head and both Outlet and Scripts in body.

Does Vite plugin order matter for TanStack Start?▼

Yes, tanstackStart() must come before viteReact() in the plugins array. Reversing the order breaks route generation and server function compilation.

Is TanStack Start the same as Next.js?▼

No, TanStack Start does not use getServerSideProps, "use server" directives, or app/layout.tsx conventions. It uses file-based routes with createFileRoute and createServerFn for type-safe server RPCs instead.

Related Skills

Explore More Software Engineering Skills→
baoduo158baoduo158
1

web-artifacts-builder

Create claude.ai HTML artifacts with React, TypeScript, Vite, and Tailwind CSS.

Community
Advanced
compozycompozy
2.5k

tanstack-start-best-practices

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

Official
Advanced
personamanagmentlayerpersonamanagmentlayer
41

nginx-expert

Configure Nginx for reverse proxy, load balancing, SSL/TLS, and caching.

Official
Advanced
PatternsDevPatternsDev
235

react-2026

Guide React 2026 stack choices for frameworks, tooling, routing, and state management.

Official
Advanced