tanstack-start_skill

Overview

This skill provides practical best practices for building full-stack React applications with TanStack Start, TanStack Query, and TanStack Router. It focuses on server functions, middleware, SSR, authentication, error handling, file organization, and deployment patterns to produce secure, maintainable, and production-ready apps.

How this skill works

The skill inspects common full-stack patterns and recommends concrete rules for server functions, middleware composition, SSR strategies, and authentication flows. It organizes guidance by priority (critical, high, medium, low) and maps each recommendation to actionable patterns, examples, and when to apply them.

When to use it

• When implementing server-side mutations and server functions for business logic.
• When adding authentication, session handling, or protecting routes and APIs.
• When configuring SSR, hydration, streaming, or prerender strategies.
• When applying middleware for logging, auth, or context propagation.
• When preparing code for production deployment and adapter selection.

Best practices

• Create server functions (sf-) for mutations and validate all inputs with schemas before processing.
• Keep secrets server-side, enforce CSRF protection for state-changing actions, and verify auth in server functions.
• Compose request and function middleware to pass context cleanly and centralize cross-cutting concerns.
• Use SSR selectively: load data on the server to avoid hydration mismatches and consider streaming for faster TTFB.
• Separate server and client code (use .functions.ts pattern) and share validation schemas to avoid duplication.
• Configure secure cookie settings, manage sessions carefully, and choose the right deployment adapter and env config.

Example use cases

• Implementing a create/update resource flow using createServerFn with input validation and explicit HTTP methods.
• Protecting admin routes with beforeLoad checks plus auth middleware that injects user context.
• Configuring SSR for a product listing: server-load data, enable selective SSR for dynamic sections, and prerender stable pages.
• Composing middleware to add logging, auth verification, and request-scoped DB connections.
• Preparing a production build by choosing the right adapter, adding environment function-based config, and securing cookies.