tanstack-start-best-practices
Original:🇺🇸 English
Not Translated
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.
1installs
Sourcefellipeutaka/kanpeki
Added on
NPX Install
npx skill4agent add fellipeutaka/kanpeki tanstack-start-best-practicesSKILL.md Content
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-- — Use createServerFn for server-side logic
sf-create-server-fn - — Always validate server function inputs
sf-input-validation - — Choose appropriate HTTP method
sf-method-selection - — Handle errors in server functions
sf-error-handling - — Customize response headers when needed
sf-response-headers
Security (Prefix: sec-
)
sec-- — Validate all user inputs with schemas
sec-validate-inputs - — Protect routes with auth middleware
sec-auth-middleware - — Keep secrets server-side only
sec-sensitive-data - — Implement CSRF protection for mutations
sec-csrf-protection
Middleware (Prefix: mw-
)
mw-- — Use request middleware for cross-cutting concerns
mw-request-middleware - — Use function middleware for server functions
mw-function-middleware - — Properly pass context through middleware
mw-context-flow - — Compose middleware effectively
mw-composability
Authentication (Prefix: auth-
)
auth-- — Implement secure session handling
auth-session-management - — Protect routes with beforeLoad
auth-route-protection - — Verify auth in server functions
auth-server-functions - — Configure secure cookie settings
auth-cookie-security
API Routes (Prefix: api-
)
api-- — Create API routes for external consumers
api-routes
SSR (Prefix: ssr-
)
ssr-- — Load data appropriately for SSR
ssr-data-loading - — Prevent hydration mismatches
ssr-hydration-safety - — Implement streaming SSR for faster TTFB
ssr-streaming - — Apply selective SSR when beneficial
ssr-selective - — Configure static prerendering and ISR
ssr-prerender
Environment (Prefix: env-
)
env-- — Use environment functions for configuration
env-functions
Error Handling (Prefix: err-
)
err-- — Handle server function errors
err-server-errors - — Use redirects appropriately
err-redirects - — Handle not-found scenarios
err-not-found
File Organization (Prefix: file-
)
file-- — Separate server and client code
file-separation - — Use .functions.ts pattern
file-functions-file - — Share validation schemas
file-shared-validation
Deployment (Prefix: deploy-
)
deploy-- — Configure environment variables
deploy-env-config - — Choose appropriate deployment adapter
deploy-adapters
How to Use
Each rule file in the directory contains:
rules/- 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 directory for detailed guidance and code examples.
rules/