tanstack
构建类型安全的React应用，集成数据管理、路由和SSR。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：tanstack。 它的用途是：构建类型安全的React应用，集成数据管理、路由和SSR。 完整的 Skill 内容见：https://321skill.com/skills/tanstack-x-3/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘帮我用 TanStack Query 和 Router 搭建一个博客应用的原型，需要展示文章列表和详情页，并实现类型安全。’，它会指导你初始化项目结构，定义路由文件，并编写带有自动缓存和数据预加载的文章数据获取逻辑。
介绍
TanStack 是一个现代化的 React 应用开发套件，旨在帮助开发者构建类型安全、高性能的 Web 应用程序。它通过整合多个核心库，解决了 React 生态中数据获取、状态管理、路由和服务器端渲染等复杂问题，让开发者能够专注于业务逻辑而非底层实现。
该套件主要包含三个核心部分：TanStack Query（原名 React Query）负责数据获取、缓存和状态同步；TanStack Router 提供基于文件的路由、搜索参数管理和数据加载器；TanStack Start 则专注于服务器端渲染（SSR）和边缘部署，以提升应用性能和 SEO。开发者可以组合使用这些工具，或根据项目需求单独引入。
它特别适合需要处理大量异步数据、追求卓越用户体验和严格类型安全的前端或全栈开发者。无论是构建复杂的企业级仪表盘、电商网站，还是需要 SEO 优化的内容型应用，TanStack 都能提供强大的支持。
使用建议是，对于新项目，可以从 TanStack Start 模板快速搭建，以获得最佳实践集成。对于现有项目，可以先从引入 TanStack Query 来优化数据层开始。需要注意的是，其生态系统仍在快速发展，部分 API 可能发生变化，建议关注官方文档以获取最新信息。
核心特点
TanStack 的核心优势在于其深度集成的类型安全性和现代化的开发者体验。与单独使用 React 生态中的零散库不同，TanStack 套件内的各个工具（Query, Router, Start）在设计之初就考虑了协同工作，提供了无缝的类型推断和一致的 API 设计，显著减少了类型定义和配置的重复工作。
注意事项
对于小型、静态或无需复杂状态管理和服务器端渲染的简单项目，引入 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-3/raw/index.md 读取 tanstack 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/tanstack-x-3/raw/index.md（查看排版版本）