tanstack-router
TanStack Router Skill
When to use
- Adding or modifying any file in
src/routes/*. - Working with route params, search params, route loaders, redirects.
Workflow checklist
- Keep the route module focused: UI + data wiring only.
- Validate params/search params with Zod at the boundary.
- Prefer route-level data loading over ad-hoc fetching in components.
- Do not edit the generated route tree:
src/routeTree.gen.ts. - If navigation changes, ensure links and loaders stay consistent.
Tooling
- Use TanStack MCP for Router APIs, loaders, and route config patterns.
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.
10frontend-ui-ux
Designer-turned-developer workflow for crafting cohesive UI/UX with strong visual polish and interaction quality.
9tanstack-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.
4