skills.rest
jherr
jherrCOMMUNITY
Explore all skills by this author →
Website𝕏@jherrGitHub

tanstack-start-project-setup

Configure TanStack Start projects with router, Query integration, and Netlify deployment settings.

Updated Feb 23, 2026
Search Tags:#full-stack#react#tanstack start#project setup#tanstack query#router configuration#netlify deployment
One-click install
npx skills add https://github.com/jherr/kdh-templates --skill tanstack-start-project-setup-jherr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-start-project-setup
Source: https://github.com/jherr/kdh-templates/tree/main/starters/calculator/.claude/skills/tanstack-start-project-setup
Command: npx skills add https://github.com/jherr/kdh-templates --skill tanstack-start-project-setup-jherr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Setting up a new TanStack Start project involves many configuration decisions across app.config.ts, router setup, TypeScript, styling, and deployment targets. This Skill provides the correct configuration patterns and file structures so you avoid misconfiguration and get a working full-stack React project quickly. ## Core Features & Use Cases - Project Scaffolding: Create new projects with create-tanstack-start and understand the standard directory structure including routes, server functions, and generated route trees. - Router & Query Configuration: Set up the router with scroll restoration, preloading, error boundaries, and integrate TanStack Query with typed router context. - Deployment & Tooling Setup: Configure Netlify deployment via netlify.toml and server presets, TypeScript paths, Tailwind CSS, environment variables, and Drizzle database integration. - Use Case: You are starting a new full-stack React app and need to configure the router, add TanStack Query for data fetching, set up Tailwind, and deploy to Netlify. This Skill walks through each configuration file with working code. ## Quick Start Set up a new TanStack Start project with TanStack Query integration and Netlify deployment configuration.

Frequently Asked Questions about tanstack-start-project-setup

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

FAQPage Schema
How do I create a new TanStack Start project?▼

Run npx create-tanstack-start@latest my-app to scaffold a new project, optionally passing --template basic for a specific starter. The generated structure includes src/routes, server functions, app.config.ts, and an auto-generated routeTree.gen.ts file.

How to integrate TanStack Query with TanStack Router?▼

Create a QueryClient and pass it through the router context when calling createRouter. Then use createRootRouteWithContext in __root.tsx to access the queryClient and wrap your app in QueryClientProvider.

How do I deploy a TanStack Start app to Netlify?▼

Set the server preset to 'netlify' in app.config.ts and add a netlify.toml with build command 'npm run build', publish directory '.output/public', and functions directory '.output/server'. Set environment variables in the Netlify dashboard.

Why are my environment variables undefined in TanStack Start client code?▼

Client-side code can only access variables prefixed with VITE_ via import.meta.env. Server-side code in server functions uses process.env directly, so unprefixed variables like DATABASE_URL are only available on the server.

Can I use Tailwind CSS with TanStack Start?▼

Yes, install tailwindcss and @tailwindcss/vite, then add the tailwindcss plugin to the vite plugins array in app.config.ts. Import 'tailwindcss' in your stylesheet and link it in the root route's head configuration.

Related Skills

Explore More Software Engineering Skills→
agusmdevagusmdev
5

tanstack-shadcn-setup

Configure Tailwind CSS v4 and shadcn/ui for TanStack Start and Router projects.

Community
Advanced
JaylaelikeJaylaelike

supabase-nextjs

Configure Next.js App Router projects with Supabase authentication and Drizzle ORM.

Community
Intermediate
Lichens-InnovationLichens-Innovation

react-linter-setup

Configure a React/TypeScript ESLint stack with flat config and scripts.

Official
Advanced
p-o-ke-naep-o-ke-nae

nextjs-app-router-patterns

Design Next.js App Router architecture with server components and data fetching patterns.

Community
Advanced