Tanstack Start Best Practices Agent Skill

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 | 6 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 logic
• sf-input-validation — Always validate server function inputs
• sf-method-selection — Choose appropriate HTTP method
• sf-error-handling — Handle errors in server functions
• sf-response-headers — Customize response headers when needed

Security (Prefix: sec-)

• sec-validate-inputs — Validate all user inputs with schemas
• sec-auth-middleware — Protect routes with auth middleware
• sec-sensitive-data — Keep secrets server-side only
• sec-csrf-protection — Implement CSRF protection for mutations

Middleware (Prefix: mw-)

• mw-request-middleware — Use request middleware for cross-cutting concerns
• mw-function-middleware — Use function middleware for server functions
• mw-context-flow — Properly pass context through middleware
• mw-composability — Compose middleware effectively

Authentication (Prefix: auth-)

• auth-session-management — Implement secure session handling
• auth-route-protection — Protect routes with beforeLoad
• auth-server-functions — Verify auth in server functions
• auth-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 SSR
• ssr-hydration-safety — Prevent hydration mismatches
• ssr-streaming — Implement streaming SSR for faster TTFB
• ssr-selective — Apply selective SSR when beneficial
• ssr-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 errors
• err-redirects — Use redirects appropriately
• err-not-found — Handle not-found scenarios

File Organization (Prefix: file-)

• file-separation — Separate server and client code
• file-functions-file — Use .functions.ts pattern
• file-shared-validation — Share validation schemas

Deployment (Prefix: deploy-)

• deploy-env-config — Configure environment variables
• deploy-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.