tanstack
使用 TanStack 全家桶构建类型安全的 React 应用。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：tanstack。 它的用途是：使用 TanStack 全家桶构建类型安全的 React 应用。 完整的 Skill 内容见：https://321skill.com/skills/tanstack-x-4/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘帮我在TanStack Router中设置一个带类型参数的用户详情页路由，并集成TanStack Query来获取用户数据。’，它会生成基于文件的路由结构，定义类型化的路由参数，并创建一个使用useQuery钩子、具有完整TypeScript类型的数据获取组件。
介绍
TanStack 提供了一套现代化的 React 开发工具链，旨在解决构建复杂、类型安全且高性能的 Web 应用时遇到的常见痛点。它通过 TanStack Query 处理数据获取、缓存和状态管理，通过 TanStack Router 实现基于文件的路由和类型安全的导航，并通过 TanStack Start 提供服务器端渲染（SSR）和全栈能力，将前端与后端无缝集成。
开发者可以通过安装相应的 npm 包（如 @tanstack/react-query, @tanstack/router, @tanstack/start）来使用这些工具。它们通常与 TypeScript 深度集成，提供出色的类型推断和开发体验，例如在路由中自动推断参数类型，在数据查询中保证请求和响应数据的类型安全。
这套工具非常适合需要构建企业级、数据密集型 React 应用的前端和全栈开发者。无论是需要强大数据同步能力的后台管理系统，还是对 SEO 和首屏性能有要求的营销网站，TanStack 都能提供相应的解决方案。对于追求代码质量和开发效率的团队来说，它是一个强有力的选择。
使用建议是，如果你正在启动一个全新的 React 项目，并且对类型安全和开发体验有较高要求，可以优先考虑 TanStack 生态。对于已有项目，可以逐步引入 TanStack Query 来替换原有的数据获取逻辑。需要注意的是，其学习曲线相对传统方案（如 React Router + 自定义状态管理）会更陡峭一些，但长期来看在维护性和开发效率上的回报是值得的。
核心特点
TanStack 的核心优势在于其工具链之间深度集成的类型安全。不同于单独使用 React Query 或 React Router，TanStack 生态（尤其是 Router 和 Start）提供了从路由参数、数据加载器到 API 端点的端到端类型推断，极大减少了运行时错误，提升了开发体验和代码可靠性。
注意事项
对于小型、简单的项目或对 TypeScript 依赖不强的团队，引入完整的 TanStack 生态可能显得过于重型，增加了学习成本和项目复杂度。
常见问题
TanStack Query 和 React Query 是什么关系？
TanStack Query 就是 React Query 的最新官方名称，属于 TanStack 工具生态的一部分，功能完全一致。
TanStack Router 比 React Router 好吗？
TanStack Router 主打基于文件的路由和极致的类型安全，与 TanStack 其他工具集成更好；React Router 更成熟、社区更大，选择取决于项目对类型安全和现代开发体验的需求程度。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/tanstack-x-4/raw/index.md 读取 tanstack 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/tanstack-x-4/raw/index.md（查看排版版本）