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

react-start

Implements React bindings and project setup for TanStack Start applications.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Setting up a TanStack Start application with React requires correctly wiring many pieces—Vite plugins, router factories, root routes, server functions, and hydration scripts—and small mistakes like importing from the wrong package or missing the Scripts component silently break the app. ## Core Features & Use Cases - Full Project Setup: Step-by-step configuration of package.json, tsconfig, vite.config.ts, router factory, root route, and index route for a working React Start app. - Server Functions in React: Use createServerFn and the useServerFn hook to call server-only logic from React components with full type inference. - Common Mistake Prevention: Documents critical pitfalls such as importing createServerFn from @tanstack/react-router instead of @tanstack/react-start, using React hooks in loaders, and omitting the Scripts component. - Use Case: You are scaffolding a new full-stack React app with TanStack Start and need the correct vite plugin order, root document structure with HeadContent and Scripts, and a typed server function wired into a route loader. ## Quick Start Set up a new TanStack Start project with React including the vite config, router, root route, and a server function.

Frequently Asked Questions about react-start

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

FAQPage Schema
How do I set up a TanStack Start project with React?▼

Install @tanstack/react-start, @tanstack/react-router, react, and react-dom, then configure vite.config.ts with the tanstackStart plugin before viteReact. Create a router factory, a root route rendering HeadContent and Scripts, and file-based routes.

How do I call server functions from React components in TanStack Start?▼

Define the function with createServerFn from @tanstack/react-start, then call it in components using the useServerFn hook. This gives proper React integration for mutations like form submissions with full type inference.

What is the difference between @tanstack/react-start and @tanstack/react-router?▼

@tanstack/react-router is the SPA router providing routing APIs like createFileRoute and Link. @tanstack/react-start is the full-stack framework that adds server functions, middleware, and SSR, re-exporting router APIs plus server utilities.

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

Missing the Scripts component in the root route's body is the common cause. Without <Scripts />, client JavaScript never loads, so the app renders server HTML but never hydrates into an interactive React app.

Can I use React hooks inside loaders or beforeLoad in TanStack Start?▼

No, loaders and beforeLoad are not React components, so hooks like useAuth fail there. Instead, pass state through router context using createRootRouteWithContext and access it via useRouteContext in components.

Related Skills

Explore More Software Engineering Skills→
cill-i-amcill-i-am

react-start

Set up React projects with TanStack Start server functions and routing.

Community
Advanced
guillempucheguillempuche

start-core/deployment

Deploy TanStack Start applications to multiple hosting platforms with SSR and SEO configuration.

Community
Advanced
redpanda-dataredpanda-data
34

setup-tanstack-router

Generate TanStack Router route trees and enforce typed routing patterns in React applications.

Official
Intermediate
PatternsDevPatternsDev
235

react-2026

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

Official
Advanced