tanstack-query
TanStack Query Skill
When to use
- Introducing a new query/mutation.
- Debugging cache invalidation, stale data, or SSR hydration.
Workflow checklist
- Design a stable query key (include stable identifiers; avoid objects unless serialized).
- Co-locate query logic with the owning domain.
- Ensure SSR/hydration correctness (use Router + Query SSR integration patterns).
- Set cache semantics intentionally (staleTime/gcTime) and invalidate on writes.
- Keep devtools disabled in production.
SSR troubleshooting
- Identify which data must be available at SSR time vs client-only.
- Ensure query keys and inputs match across SSR and client hydration.
- Confirm provider wiring and dehydration/rehydration flow stays intact.
Tooling
- Use TanStack MCP for Query APIs, SSR patterns, and cache guidance.
More from huynhsang2005/blog-tanstack
framer-motion
Create smooth, performant animations with framer-motion. Use when building page transitions, component animations, or gesture-based interactions.
18tanstack-form
Use TanStack Form for complex forms with Zod validation. Use when building non-trivial forms or admin editors.
10tanstack-table
Use TanStack Table for complex admin grids and data tables. Use when you need sorting/filtering/pagination/column defs beyond a simple list.
8tanstack-start
Build features in TanStack Start (server/client boundaries, server functions, SSR-friendly data loading). Use when creating routes, server functions, or anything involving SSR/hydration/caching.
7zustand
Use Zustand for client state in this repo. Use when you need shared client state, derived selectors, or cross-component UI coordination.
4shadcn-ui
Build UI with shadcn/ui primitives and Tailwind, using consistent variants and accessible patterns.
4