tanstack-start
Full-stack React framework built on TanStack Router. Type-safe routing, server functions, SSR/streaming, middleware, and multi-platform deployment. Use when building full-stack React apps with SSR, server functions, middleware, or authentication. Use for createServerFn, createMiddleware, beforeLoad, API routes, Cloudflare Workers, Vercel, Netlify deployment.
- Installs
- 142
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/oakoss/agent-skills --skill tanstack-start- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads tanstack-start automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
TanStack Start
Full-stack React framework built on TanStack Router. Type-safe server functions via RPC, SSR/streaming, middleware composition, and deployment to Cloudflare Workers, Vercel, Netlify, AWS Lambda, and more.
RC: TanStack Start is currently in Release Candidate status. APIs may still change before the stable 1.0 release.
Package: @tanstack/react-start
Quick Reference
| Pattern | Usage |
|---|---|
createServerFn() | GET (default) — idempotent, cacheable data fetching |
createServerFn({ method: 'POST' }) | Mutations that change data |
.inputValidator(zodSchema) | Input validation before handler |
.handler(async ({ data }) => {}) | Server-side logic with typed input data |
getRequest() | Access full incoming Request inside handler/middleware |
getRequestHeader(name) | Read a single request header by name |
setResponseHeaders(headers) | Set outgoing response headers (caching, cookies) |
useServerFn(fn) | Wrap server function for component use with pending state |
createMiddleware().server(fn) | Request middleware for cross-cutting concerns |
.middleware([dep]) | Compose middleware with dependencies |
next({ context: {} }) | Pass data downstream through middleware chain |
createMiddleware({ type: 'function' }) | Function-level middleware with input validation |
requestMiddleware in createStart() | Global middleware for all requests (SSR, fns, routes) |
functionMiddleware in createStart() | Global middleware for server functions only |
createIsomorphicFn() | Different implementations per environment |
createServerOnlyFn() | Server-only utility — crashes if called from client |
createClientOnlyFn() | Client-only utility — crashes if called from server |
useSession() | Cookie-based session with encryption and secure settings |
session.update() | Update session data |
session.clear() | Clear session (logout) |
beforeLoad | Auth check before route loads |
_authenticated.tsx | Pathless layout route for grouped protection |
throw redirect({ to: '/login' }) | Redirect with return URL |
await ensureQueryData() | Block SSR on critical data |
prefetchQuery() | Start fetch, don't block SSR |
<Suspense> boundaries | Define streaming chunks |
head: ({ loaderData }) => ({}) | Meta tags, Open Graph, favicons |
head.scripts + JSON-LD | Structured data for LLMO (schema.org) |
llms.txt server route | AI system guidance file |
headers: () => ({...}) | ISR / cache-control on route definition |
server: { handlers: { GET, POST } } | API routes on createFileRoute |
ssr: false | Disable SSR for specific routes (SPA mode) |
Execution Boundaries
| Function | Runs On | Client Can Call? | Use For |
|---|---|---|---|
createServerFn() | Server | Yes (RPC stub) | Data fetching, mutations |
createServerOnlyFn() | Server | No (throws) | Secrets, DB connections |
createClientOnlyFn() | Client | N/A | localStorage, DOM APIs |
createIsomorphicFn() | Both | N/A | Per-environment implementations |
Deployment (Vite Plugins)
| Platform | Plugin | Runtime |
|---|---|---|
| Cloudflare | @cloudflare/vite-plugin | Workers |
| Netlify | @netlify/vite-plugin-tanstack-start | Node |
| Vercel | nitro/vite (preset: 'vercel') | Node |
| Node.js/Docker | nitro/vite (preset: 'node-server') | Node |
| AWS Lambda | nitro/vite (preset: 'aws-lambda') | Node |
| Bun | nitro/vite (preset: 'bun') | Bun |
| Static | nitro/vite (preset: 'static') | None |
Common Mistakes
| Mistake | Fix |
|---|---|
No .inputValidator() on server functions | Always validate with Zod schemas |
Raw fetch instead of createServerFn | Loses type safety, serialization, and code splitting |
| Mixing server/client code without boundaries | Use createServerOnlyFn / createClientOnlyFn |
| Checking auth in every handler | Use middleware composition or beforeLoad |
| Awaiting all data in loader | Only await critical data, prefetch the rest |
Date.now() in render | Pass timestamp from loader (hydration mismatch) |
Missing nodejs_compat flag | Required in wrangler.toml for Cloudflare |
| GET for mutations | Use POST for create/update/delete |
| Cookies not forwarded to external APIs | Use getRequestHeader() or createIsomorphicFn |
process.env in loader (runs on both) | Wrap in createServerFn — loaders run client-side too |
| Unvalidated server env vars | Validate with Zod in .server.ts files |
| Storing auth tokens in localStorage | Use HTTP-only cookies via useSession |
| Exposing raw DB errors to client | Catch and return user-friendly messages, log details |
| No structured data for content pages | Add JSON-LD via head.scripts for AI discoverability |
Delegation
Use this skill for TanStack Start server functions, middleware, SSR/streaming, route protection, API routes, and deployment configuration. Delegate to tanstack-router for file-based routing, search params, and data loading patterns. Delegate to tanstack-query for cache management, optimistic updates, and query patterns.
If the
tanstack-formskill is available, delegate form state management, validation, and field patterns to it. If thelocal-firstskill is available, delegate local-first architecture decisions and sync engine selection to it. If theelectricsqlskill is available, delegate ElectricSQL shapes, auth configuration, and write patterns to it. If thetanstack-dbskill is available, delegate reactive collections, live queries, and optimistic mutation patterns to it.
References
- Server Functions — createServerFn, useServerFn, validation, auth, request context, response headers, file uploads, streaming, TanStack Query integration
- Middleware — composition, function-level middleware, route-level middleware, global middleware, logging, rate limiting
- SSR and Streaming — Suspense, prerendering, ISR, cache-control, hybrid strategies, hydration safety
- Route Protection — beforeLoad, pathless layouts, session security, login/logout, header forwarding, Better Auth
- API Routes — server handlers, REST patterns, route-level middleware, webhooks, health check, server functions vs server routes
- Deployment — Vite plugins, adapter comparison, Cloudflare D1/KV/R2 bindings, Docker, prerendering
- SEO and Head Management — head property, meta tags, Open Graph, Twitter Cards, favicons, SEO helper
- LLM Optimization (LLMO) — JSON-LD structured data, schema.org, llms.txt, machine-readable endpoints, AI citation patterns
- Error Handling — discriminated unions, custom error classes, status codes, result types vs try-catch
- File Organization — entry points, plugin config, execution boundaries, env validation, .server.ts convention
- Known Issues — 10 documented issues with workarounds
- Query Integration — Router+Query setup, SSR integration, setupRouterSsrQueryIntegration, DevTools
- Integration Flows — form submission with cache update, infinite scroll, paginated tables, auth-protected routes, error handling
- Local-First Integration — shape proxy server functions, mixing server-based and local-first data, ElectricSQL deployment
- Electric Middleware — auth middleware for shape proxies, global middleware config, sendContext, function-level validation
FAQ
What does the tanstack-start skill do?
Full-stack React framework built on TanStack Router. Type-safe routing, server functions, SSR/streaming, middleware, and multi-platform deployment. Use when building full-stack React apps with SSR, server functions, middleware, or authentication. Use for createServerFn, createMiddleware, beforeLoad, API routes, Cloudflare Workers, Vercel, Netlify deployment.
How do I install tanstack-start?
Run npx skills add https://github.com/oakoss/agent-skills --skill tanstack-start in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/tanstack-start/ (personal) or .claude/skills/tanstack-start/ (project).
Which AI agents can use tanstack-start?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is tanstack-start safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains tanstack-start?
It is published by oakoss in oakoss/agent-skills. It has 142 recorded installs.
More from oakoss/agent-skills
ui-ux-polish
oakoss/agent-skills
Iterative UI/UX polishing workflow for web applications. Use when improving visual polish, refining desktop and mobile UX separately, running iterative enhancement cycles, applying design patterns like glassmorphism or bento grids, or auditing accessibility and WCAG compliance. Use for Stripe-level visual quality, responsive optimization, and design system alignment.
playwright
oakoss/agent-skills
Open the skill to read its SKILL.md instructions.
coolify
oakoss/agent-skills
Coolify self-hosted PaaS for deploying applications, databases, and services via REST API and Git integration. Covers API authentication, deployment triggers, build packs (Nixpacks, Dockerfile, Compose), CI/CD with GitHub Actions webhooks, environment management, and Traefik proxy configuration. Use when deploying apps to Coolify, triggering deployments via API, configuring build packs, setting up GitHub Actions CI/CD pipelines, managing environment variables, or troubleshooting deployment failures.
application-security
oakoss/agent-skills
Application security covering threat modeling (STRIDE), OWASP Top 10 (2025), OWASP API Security Top 10 (2023), secure coding review, authentication/authorization patterns, input validation, encryption, security headers, supply chain security, compliance (GDPR/HIPAA/SOC2/PCI-DSS), and security monitoring. Use when reviewing code for vulnerabilities, implementing auth patterns, securing APIs, configuring security headers, hardening supply chain, preventing injection attacks, or preparing for compliance audits.
find-skills
oakoss/agent-skills
Discovers and installs agent skills from the open ecosystem. Enriches search results with descriptions fetched from skills.sh. Use when a user asks "how do I do X", "find a skill for X", "is there a skill that can...", or wants to extend agent capabilities. Use for skill discovery, skill search, skill install, finding tools.
drizzle-orm
oakoss/agent-skills
Drizzle ORM for type-safe SQL with PostgreSQL, MySQL, and SQLite. Use when defining schemas, writing queries, managing relations, running migrations, or using drizzle-kit. Use for drizzle, orm, schema, query, migration, pgTable, relations, drizzle-kit, drizzle-zod.
Popular devops & cloud skills
microsoft-foundry
microsoft/azure-skills
Build, deploy, evaluate, optimize, fine-tune, and manage Microsoft Foundry agents, models, and resources end to end. USE FOR: foundry, azd ai agent, azd provision/deploy, hosted agent scaffold/develop/run/deploy/troubleshoot, prompt agent create, managed harness agent create, GitHub Copilot harness agent, create agent, update agent, add tool to agent, invoke agent, agent insights, evaluate agent, batch eval, continuous eval, continuous monitoring, agent CI/CD, optimize prompt, improve prompt, optimize agent instructions, Agent Optimizer scaffold, dataset curation from traces, deploy model, model fine-tuning (SFT/DPO/RFT), Foundry project, RBAC, role assignment, permissions, quota, capacity, region, deployment failure, AI Services, create Foundry resource, knowledge index, customize deployment, onboard, availability, training-data, grader, distillation, large file upload. DO NOT USE FOR: Azure Functions, App Service, general Azure deploy (use azure-deploy), general Azure prep (use azure
azure-diagnostics
microsoft/azure-skills
Debug Azure production issues on Azure using AppLens, Azure Monitor, resource health, and safe triage. WHEN: debug production issues, troubleshoot app service, app service high CPU, app service deployment failure, troubleshoot container apps, container app 503 or target port mismatch, troubleshoot functions, function telemetry missing or stopped after a config/connection-string change, troubleshoot AKS, VM RDP, Linux SSH, VM black screen, can't connect to VM, reset VM password, NSG or firewall blocking, kubectl cannot connect, kube-system/CoreDNS failures, pod pending, crashloop, node not ready, upgrade failures, analyze logs, KQL, insights, image pull failures, cold start issues, health probe failures, resource health, root cause of errors, troubleshoot event hubs, troubleshoot service bus, messaging SDK error, AMQP connection failure, message lock lost, lock renewal during long-running processing, service bus dead letter.
azure-prepare
microsoft/azure-skills
Prepare azd-based Azure projects for deployment: generates azure.yaml, infrastructure (Bicep/Terraform), and Dockerfiles for the Azure Developer CLI (azd) workflow. USE ONLY when the user explicitly wants to use azd as the deployment tool, or the project already has an azure.yaml file. DO NOT USE FOR: non-azd deployments, Python App Service code-only deploys (use python-appservice-deploy), or cross-cloud migration (use azure-cloud-migrate). WHEN: prepare app for azd, create azure.yaml, set up azd infrastructure, modernize app for Azure with azd, deploy with azd, function app, timer trigger, service bus trigger, event-driven function, managed identity, generate Bicep, generate Terraform, create and deploy to Azure.
azure-ai
microsoft/azure-skills
Use for Azure AI: Search, Speech, OpenAI, Document Intelligence. Helps with search, vector/hybrid search, speech-to-text, text-to-speech, transcription, OCR. WHEN: AI Search, query search, vector search, hybrid search, semantic search, speech-to-text, text-to-speech, transcribe, OCR, convert text to speech.
azure-deploy
microsoft/azure-skills
Execute Azure deployments for ALREADY-PREPARED applications that have existing .azure/deployment-plan.md and infrastructure files. DO NOT use this skill when the user asks to CREATE a new application — use azure-prepare instead. This skill runs azd up, azd deploy, terraform apply, and az deployment commands with built-in error recovery. Requires .azure/deployment-plan.md from azure-prepare and validated status from azure-validate. WHEN: "run azd up", "run azd deploy", "execute deployment", "push to production", "push to cloud", "go live", "ship it", "bicep deploy", "terraform apply", "publish to Azure", "launch on Azure". DO NOT USE WHEN: "create and deploy", "build and deploy", "create a new app", "set up infrastructure", "create and deploy to Azure using Terraform" — use azure-prepare for these.
azure-validate
microsoft/azure-skills
Pre-deployment validation for Azure readiness. Run deep checks on configuration, infrastructure (Bicep or Terraform), RBAC role assignments, managed identity permissions, and prerequisites before deploying. WHEN: validate my app, check deployment readiness, run preflight checks, verify configuration, check if ready to deploy, validate azure.yaml, validate Bicep, test before deploying, troubleshoot deployment errors, validate Azure Functions, validate function app, validate serverless deployment, verify RBAC roles, check role assignments, review managed identity permissions, what-if analysis, validate Container Apps deployment.