tanstack
构建类型安全的React全栈应用，涵盖数据、路由与SSR。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：tanstack。 它的用途是：构建类型安全的React全栈应用，涵盖数据、路由与SSR。 完整的 Skill 内容见：https://321skill.com/skills/tanstack-x-2/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘我正在用TanStack开发一个博客网站，如何为文章列表页设置数据预取和缓存？’，它会指导你使用TanStack Query的`useQuery`钩子定义数据获取函数，并配置`staleTime`和`cacheTime`来优化缓存策略。或者问：‘如何用TanStack Router创建一个类型安全的动态路由，比如`/post/:id`？’，它会解释如何创建`routes/posts/$postId.tsx`文件，并在组件内通过类型安全的`useParams`获取`postId`参数。
介绍
TanStack 提供了一套完整的、类型安全的React应用开发工具链，旨在解决现代Web开发中数据管理、路由和服务器端渲染的复杂性问题。它通过 TanStack Query 处理数据获取、缓存和状态同步，通过 TanStack Router 实现基于文件的路由和类型安全的参数管理，并通过 TanStack Start 简化服务器端渲染和全栈部署。
这套工具通过深度集成的TypeScript支持，为开发者提供了从后端数据到前端组件的端到端类型安全。开发者可以像使用普通React Hook一样使用Query进行数据操作，Router会自动生成类型定义，而Start则提供了开箱即用的SSR和部署配置，极大简化了全栈应用的搭建过程。
它非常适合需要构建高性能、可维护且类型安全的全栈React应用的前端、全栈开发者和团队。无论是开发复杂的后台管理系统、数据密集型的仪表盘，还是对SEO和首屏加载速度有要求的营销网站，都能从中受益。
使用建议是，对于新项目，可以从一开始就引入这套工具链以获得最佳的类型安全收益。对于现有项目，可以按模块逐步迁移，例如先引入Query管理数据层。需要注意的是，其文件路由等约定式模式需要一定的学习成本，但长期来看能显著提升开发效率和代码质量。
核心特点
与同类React工具库相比，TanStack的核心区别在于其深度集成的端到端类型安全，从API数据到路由参数再到组件Props，TypeScript类型贯穿整个应用层；同时，它将数据管理、路由和SSR三大核心关注点整合为一个理念一致、API设计统一的完整解决方案，而非松散的独立库集合。
注意事项
不适合仅需简单静态页面或对TypeScript和约定式文件结构有抵触的快速原型项目。
常见问题
TanStack Query 和 React Query 是什么关系？
TanStack Query 是 React Query 的官方新名称，属于 TanStack 工具生态的一部分，功能完全一致。
TanStack Router 和 React Router 相比有什么优势？
TanStack Router 提供基于文件的路由、自动生成类型安全的路径和参数，并与 TanStack 生态其他工具（如 Query）深度集成，类型安全是其核心优势。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/tanstack-x-2/raw/index.md 读取 tanstack 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/tanstack-x-2/raw/index.md（查看排版版本）