Installs into .claude/skills of the current project.
Are you the author of Tanstack Start?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/dlupiak-tanstack-start)
---
name: tanstack-start
description: TanStack Start, Router, Query, and Server Functions patterns and best practices for this project.
user-invocable: true
---
# TanStack Start Patterns
## Server Functions
- Define with `createServerFn` from `@tanstack/react-start`
- Use `.validator()` for input validation (e.g. with zod)
- Use `.handler()` for the implementation
- Server functions run on the server only — safe for DB access and secrets
## Router
- File-based routing in `src/routes/`
- Use `createFileRoute` for route definitions
- Use `loader` for server-side data fetching (runs on server)
- Use `beforeLoad` for auth guards and redirects
- Route context flows from `__root.tsx` to child routes
## Query
- Use `queryOptions` to define reusable query configs
- Use `useSuspenseQuery` in components for data fetching
- Invalidate queries after mutations with `queryClient.invalidateQueries()`
- TanStack Query handles caching, deduplication, and background refetching
## Key Conventions
- Path alias: `@/` → `apps/web/src/`
- Route files: `src/routes/<path>.tsx`
- Layouts: `src/routes/_<layout>.tsx` (pathless layout routes)
- API routes: `src/routes/api/<name>.ts`
