tanstack-start-best-practices
deckardger/tanstack-agent-skills
TanStack Start best practices for full-stack React: server functions, middleware, SSR, auth, and deployment.
What is tanstack-start-best-practices?
Comprehensive guidelines for building full-stack React applications with TanStack Start. Covers server functions, middleware, authentication, SSR, error handling, and deployment patterns. Use when architecting or implementing TanStack Start applications.
- Defines best practices for server functions and data mutations
- Provides security guidelines for input validation, auth middleware, and CSRF protection
- Establishes middleware patterns for request/response handling and context flow
- Covers authentication and session management implementation
- Guides SSR configuration, hydration safety, and streaming patterns
- Organizes error handling across client/server boundaries
How to install tanstack-start-best-practices
npx skills add https://github.com/deckardger/tanstack-agent-skills --skill tanstack-start-best-practicesHow to use tanstack-start-best-practices
- 1.Review the rule categories by priority (Critical, High, Medium, Low)
- 2.Consult specific rule files in the rules/ directory for your use case
- 3.Apply server function rules when creating data mutations
- 4.Implement security rules for input validation and auth middleware
- 5.Configure middleware for cross-cutting concerns like logging
- 6.Set up authentication with session management and route protection
- 7.Apply SSR rules when server-rendering content
- 8.Follow file organization patterns for maintainable code structure
Use cases
- Setting up secure server functions for data mutations in full-stack apps
- Implementing authentication middleware and route protection
- Configuring SSR with proper data loading and hydration
- Organizing code with .functions.ts pattern for server/client separation
- Deploying TanStack Start applications to various platforms
- Full-stack React developers
- Backend engineers building APIs with TanStack Start
- Teams implementing authentication and security patterns
- Developers deploying to production environments
tanstack-start-best-practices FAQ
Use createServerFn for server-side logic that needs to be called from the client, such as data mutations, database operations, or sensitive computations that shouldn't run in the browser.
Use the beforeLoad hook with auth middleware to verify user sessions before rendering routes, and verify auth again in server functions for additional security.
The .functions.ts naming convention separates server-only code from client code, making it clear which functions run on the server and improving code organization.
Ensure server and client render the same content by using consistent data loading, avoiding browser-only APIs in initial render, and properly managing state during hydration.
Use environment functions to manage configuration like database URLs, API keys, and feature flags, keeping secrets server-side and only exposing necessary values to the client.
Full instructions (SKILL.md)
Source of truth, from deckardger/tanstack-agent-skills.
name: tanstack-start-best-practices description: TanStack Start best practices for full-stack React applications. Server functions, middleware, SSR, authentication, and deployment patterns. Activate when building full-stack apps with TanStack Start.
TanStack Start Best Practices
Comprehensive guidelines for implementing TanStack Start patterns in full-stack React applications. These rules cover server functions, middleware, SSR, authentication, and deployment.
When to Apply
- Creating server functions for data mutations
- Setting up middleware for auth/logging
- Configuring SSR and hydration
- Implementing authentication flows
- Handling errors across client/server boundary
- Organizing full-stack code
- Deploying to various platforms
Rule Categories by Priority
| Priority | Category | Rules | Impact |
|---|---|---|---|
| CRITICAL | Server Functions | 5 rules | Core data mutation patterns |
| CRITICAL | Security | 4 rules | Prevents vulnerabilities |
| HIGH | Middleware | 4 rules | Request/response handling |
| HIGH | Authentication | 4 rules | Secure user sessions |
| MEDIUM | API Routes | 1 rule | External endpoint patterns |
| MEDIUM | SSR | 5 rules | Server rendering patterns |
| MEDIUM | Error Handling | 3 rules | Graceful failure handling |
| MEDIUM | Environment | 1 rule | Configuration management |
| LOW | File Organization | 3 rules | Maintainable code structure |
| LOW | Deployment | 2 rules | Production readiness |
Quick Reference
Server Functions (Prefix: sf-)
sf-create-server-fn— Use createServerFn for server-side logicsf-input-validation— Always validate server function inputssf-method-selection— Choose appropriate HTTP methodsf-error-handling— Handle errors in server functionssf-response-headers— Customize response headers when needed
Security (Prefix: sec-)
sec-validate-inputs— Validate all user inputs with schemassec-auth-middleware— Protect routes with auth middlewaresec-sensitive-data— Keep secrets server-side onlysec-csrf-protection— Implement CSRF protection for mutations
Middleware (Prefix: mw-)
mw-request-middleware— Use request middleware for cross-cutting concernsmw-function-middleware— Use function middleware for server functionsmw-context-flow— Properly pass context through middlewaremw-composability— Compose middleware effectively
Authentication (Prefix: auth-)
auth-session-management— Implement secure session handlingauth-route-protection— Protect routes with beforeLoadauth-server-functions— Verify auth in server functionsauth-cookie-security— Configure secure cookie settings
API Routes (Prefix: api-)
api-routes— Create API routes for external consumers
SSR (Prefix: ssr-)
ssr-data-loading— Load data appropriately for SSRssr-hydration-safety— Prevent hydration mismatchesssr-streaming— Implement streaming SSR for faster TTFBssr-selective— Apply selective SSR when beneficialssr-prerender— Configure static prerendering and ISR
Environment (Prefix: env-)
env-functions— Use environment functions for configuration
Error Handling (Prefix: err-)
err-server-errors— Handle server function errorserr-redirects— Use redirects appropriatelyerr-not-found— Handle not-found scenarios
File Organization (Prefix: file-)
file-separation— Separate server and client codefile-functions-file— Use .functions.ts patternfile-shared-validation— Share validation schemas
Deployment (Prefix: deploy-)
deploy-env-config— Configure environment variablesdeploy-adapters— Choose appropriate deployment adapter
How to Use
Each rule file in the rules/ directory contains:
- Explanation — Why this pattern matters
- Bad Example — Anti-pattern to avoid
- Good Example — Recommended implementation
- Context — When to apply or skip this rule
Full Reference
See individual rule files in rules/ directory for detailed guidance and code examples.
Related skills
More from deckardger/tanstack-agent-skills and the wider catalog.
tanstack-integration-best-practices
Best practices for coordinating TanStack Query, Router, and Start in full-stack applications.
tanstack-query-best-practices
TanStack Query best practices for optimized data fetching, caching, and server state management in React.
tanstack-router-best-practices
Type-safe routing patterns and best practices for TanStack Router in React applications.
mies
Ruthless reduction and exacting craft for user-facing interfaces, applying Mies van der Rohe restraint and anti-generic design discipline.
wonda-cli
Terminal toolkit for generating media and automating social research across LinkedIn, Reddit, and X/Twitter.
astro-framework
Astro framework specialist for fast, content-driven websites with islands architecture and hybrid rendering.