Agent skill
tanstack-start-best-practices
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.
Install this agent skill to your Project
npx add-skill https://github.com/delorenj/skills/tree/main/tanstack-start-best-practices
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 | 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 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.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
delorenj/skills
openclaw-upgrade
Upgrade OpenClaw installations to the latest version. Handles global npm installs, local development setups, release channels (stable/beta/dev), configuration preservation, and platform-specific requirements. Use when updating OpenClaw, switching release channels, or troubleshooting update issues.
delorenj/skills
vercel-composition-patterns
React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.
delorenj/skills
security-monitor
Real-time security monitoring for Clawdbot. Detects intrusions, unusual API calls, credential usage patterns, and alerts on breaches.
delorenj/skills
event-driven-architecture
Kafka, RabbitMQ, SQS/SNS, event sourcing, CQRS, saga patterns, dead letter queues, and idempotency. Use when designing asynchronous systems, implementing message-driven workflows, or building event streaming pipelines.
delorenj/skills
shadcn-ui
Expert guidance for integrating and building applications with shadcn/ui components, including component discovery, installation, customization, and best practices.
delorenj/skills
just-fucking-cancel
Find and cancel unwanted subscriptions by analyzing bank transactions. Detects recurring charges, calculates annual waste, and helps you cancel with direct URLs and browser automation. Use when: 'cancel subscriptions', 'audit subscriptions', 'find recurring charges', 'what am I paying for', 'save money', 'subscription cleanup', 'stop wasting money'. Supports CSV import (Apple Card, Chase, Amex, Citi, Bank of America, Capital One, Mint, Copilot) OR Plaid API for automatic transaction pull. Outputs interactive HTML audit with one-click cancel workflow. Pairs with Plaid integration for real-time transaction access without CSV exports.
Didn't find tool you were looking for?