tanstack-start-best-practices

Name: tanstack-start-best-practices
Author: deckardger

Best practices for full-stack React development with TanStack Start, covering server functions, middleware, SSR, and authentication. Organizes 31 rules across 10 categories (server functions, security, middleware, authentication, SSR, error handling, and more) with priority levels to guide implementation order Covers critical patterns for server-side logic, input validation, secure session management, and client-server boundary handling Includes middleware composition, selective SSR configuration, streaming for performance, and environment-based configuration management Each rule provides explanation, anti-patterns, recommended implementations, and contextual guidance for when to apply or skip

INSTALLATION

npx skills add https://github.com/deckardger/tanstack-agent-skills --skill tanstack-start-best-practices

Run in your project or agent environment. Adjust flags if your CLI version differs.

SKILL.md

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

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.