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.
- Installs
- 9.8K
- Last 24h
- +10
- Trending rank
- #8781
- Security
- Pass
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/deckardger/tanstack-agent-skills --skill tanstack-start-best-practices- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads tanstack-start-best-practices automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
Security audits
Independent scans of the skill's instructions and bundled files.
SKILL.md
The instructions your agent reads when the skill is triggered.
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.
FAQ
What does the tanstack-start-best-practices skill do?
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.
How do I install tanstack-start-best-practices?
Run npx skills add https://github.com/deckardger/tanstack-agent-skills --skill tanstack-start-best-practices in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/tanstack-start-best-practices/ (personal) or .claude/skills/tanstack-start-best-practices/ (project).
Which AI agents can use tanstack-start-best-practices?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is tanstack-start-best-practices safe to install?
Security partners have reviewed it: Gen Agent Trust Hub passed; Socket passed; Snyk passed; Runlayer passed; ZeroLeaks passed. As with any skill, read the SKILL.md and bundled scripts before installing.
Who maintains tanstack-start-best-practices?
It is published by deckardger in deckardger/tanstack-agent-skills. It has 9,817 recorded installs.
More from deckardger/tanstack-agent-skills
tanstack-query-best-practices
deckardger/tanstack-agent-skills
TanStack Query (React Query) best practices for data fetching, caching, mutations, and server state management. Activate when building data-driven React applications with server state.
tanstack-router-best-practices
deckardger/tanstack-agent-skills
TanStack Router best practices for type-safe routing, data loading, search params, and navigation. Activate when building React applications with complex routing needs.
tanstack-integration-best-practices
deckardger/tanstack-agent-skills
Best practices for integrating TanStack Query with TanStack Router and TanStack Start. Patterns for full-stack data flow, SSR, and caching coordination.
Popular code quality & workflow skills
grill-me
mattpocock/skills
A relentless interview to sharpen a plan or design.
improve-codebase-architecture
mattpocock/skills
Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.
handoff
mattpocock/skills
Compact the current conversation into a handoff document for another agent to pick up.
domain-modeling
mattpocock/skills
Build and sharpen a project's domain model. Use when discussing codebase terminology, writing or editing a GLOSSARY.md, or recording or editing an ADR.
codebase-design
mattpocock/skills
Shared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-navigable, or when another skill needs the deep-module vocabulary.
diagnosing-bugs
mattpocock/skills
Diagnosis loop for hard bugs and performance regressions. Use when the user says "diagnose"/"debug this", or reports something broken/throwing/failing/slow.