tanstack
用 TanStack 构建类型安全的 React 应用
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：tanstack。 它的用途是：用 TanStack 构建类型安全的 React 应用 完整的 Skill 内容见：https://321skill.com/skills/tanstack/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'我需要一个用户资料页面，使用 TanStack Router 的 file-based 路由，路由路径为 /user/:id，页面内用 Query 从 /api/user/:id 获取数据并显示 loading 和 error 状态'，它会自动生成 route tree 文件、loader 函数、useQuery 调用以及组件骨架代码，并确保所有类型从 API 响应自动推导。
介绍
TanStack Skill 是一套面向 React 开发者的集成工具链，将数据获取、路由管理、服务端渲染等核心能力封装为可复用的 AI 辅助单元。它基于 TanStack Query、Router 和 Start 三大库，帮你快速搭建类型安全、性能可靠的前端应用，同时减少重复编写样板代码的负担。
使用时，你只需在对话中描述需求，例如“创建一个带数据加载的用户列表页”或“为现有项目添加路由跳转和搜索参数传递”，Skill 会自动生成对应的 TypeScript 代码、配置加载器（Loader）和缓存策略，并确保每个组件都遵循 TanStack 的类型推断规范。你还可以要求它调整 query 的 staleTime 或处理乐观更新（Optimistic Update）。
适合日常使用 React 的前端开发者、全栈工程师，以及需要快速原型验证的智能体开发者。尤其适合那些已经熟悉 TanStack 生态系统但希望提升开发效率的团队，也适合刚接触 TypeScript 的开发者通过最佳实践来学习类型安全模式。
使用建议：先明确项目使用的 TanStack 版本（v4/v5），并在需求中附带关键类型定义，能帮助 Skill 生成更精准的代码。注意不要将它与 Redux 或 Apollo 等状态管理方案混用，否则可能产生类型冲突。
核心特点
相比其他 React 辅助 Skill，TanStack 深度绑定 Query 的缓存失效策略、Router 的 file-based 路由和 Start 的 SSR 流水线，能自动生成完整的类型安全数据流代码，而非仅提供通用组件模板。
注意事项
不适合非 React 技术栈、需要全局状态管理（如 Redux）或直接生成后端 API 逻辑的场景。
常见问题
如何用 TanStack Query 实现数据分页？
使用 useInfiniteQuery 和 getNextPageParam 参数，Skill 会自动生成页码参数和缓存键，你只需指定获取下一页数据的函数即可。
TanStack Router 的文件路由支持嵌套布局吗？
支持。在文件系统中创建 `_layout.tsx` 文件，子路由会自动继承布局组件，Skill 可帮你生成文件目录结构和对应的路由配置。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/tanstack/raw/index.md 读取 tanstack 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/tanstack/raw/index.md（查看排版版本）