deckardger/tanstack-agent-skills
4 skills19.3k installs720 starsGitHub
Install
npx skills add https://github.com/deckardger/tanstack-agent-skillsSkills in this repo
1Tanstack Query Best Practicestanstack-query-best-practices is a sharp TanStack Query reference centered on garbage-collection time for inactive queries—the knob many solo builders confuse with staleTime. The skill explains that gcTime defaults to five minutes, controls how long unused cache entries linger, and must match how often users return to a screen and how heavy each payload is. It shows anti-patterns such as Infinity (unbounded memory), gcTime zero (no cache benefit), and blindly accepting defaults on dashboards users hit every session. Positive patterns stretch retention for frequently revisited stats and shorten it for large, rarely reopened report queries. Install it when wiring QueryClient in a React or TanStack-powered frontend, tuning defaults app-wide, or debugging “why did my data disappear after navigation.” Intermediate React query experience is assumed; you leave with concrete millisecond values and rationale you can drop into defaultOptions.queries or individual useQuery calls.6.9kinstalls2Tanstack Start Best PracticesTanStack Start Best Practices is an agent skill for solo and indie builders standardizing how TanStack React Start handles HTTP on the server. It focuses on when to use file-based server route handlers instead of createServerFn for integrations, Stripe-style webhooks, and public APIs that need normal status codes, headers, and non-JSON payloads. The documented anti-patterns include piping webhooks through server functions where raw body verification is awkward and publishing internal RPC as if it were a versioned REST surface. Following the good examples helps you add routes under routes/api with typed handlers, explicit caching, and selective response shapes while keeping server functions for in-app mutations and typed client calls. Intermediate familiarity with TanStack Router file routes and React Start server blocks is assumed; output is production-ready route modules aligned with framework conventions rather than one-off hacks.6.7kinstalls3Tanstack Router Best Practicestanstack-router-best-practices is an agent skill for solo builders on React apps using TanStack Router who need a maintainable route tree with dependency injection at the root instead of scattering global singleton imports through every route file. It explains why createRootRouteWithContext matters, how to declare a RouterContext interface for services like React Query clients and auth snapshots, and how to pass that context when calling createRouter so loaders and child routes receive the same typed dependencies. The skill uses concrete before-and-after examples: importing queryClient everywhere versus reading it from route context inside loaders. Priority is marked low in-source, but the pattern pays off early when you add tests, swap auth providers, or grow nested routes. Invoke it while scaffolding or refactoring file-based routes so agents do not cement globals that are painful to mock later.4.1kinstalls4Tanstack Integration Best PracticesTanStack Integration Best Practices is an agent skill for builders shipping React apps on TanStack Router plus TanStack Query. It tackles a common solo-builder footgun: two caches (router preload vs query client) serving the same entity with different freshness. The skill contrasts a bad example—loader calling `fetchPosts` while the component runs another `fetchPosts` query—with a good example that disables router stale preloading and centralizes fetching in Query. It points at SSR integration via `@tanstack/react-router-ssr-query` and sensible default query options. Use it when scaffolding a new file-route app, refactoring loaders to prefetch queries, or debugging “stale on navigation” bugs. It does not replace TanStack docs for auth, forms, or table virtualization—only the caching boundary between Router and Query.1.6kinstalls