React (TanStack Router + Query)
一个基于React，集成TanStack Router和Query的现代化前端开发脚手架。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：React (TanStack Router + Query)。 它的用途是：一个基于React，集成TanStack Router和Query的现代化前端开发脚手架。 详细介绍见：https://321skill.com/skills/react-tanstack-router-query/ 请根据该页面的说明完成安装。
使用示例
“我需要启动一个新的React管理后台项目，要求路由类型安全，并且能优雅地处理API数据缓存。”，它会引导你使用这个Skill创建项目，并解释项目内预置的路由文件结构和如何使用TanStack Query钩子来获取数据。接着你可以直接开始编写业务组件，如用户列表页，并轻松实现数据加载、缓存和更新。
介绍
这个Skill旨在解决开发者从零开始配置现代React应用时，在路由管理和数据获取方面面临的繁琐和重复工作。它提供了一个预配置好的项目模板，集成了TanStack Router（用于类型安全的路由）和TanStack Query（用于高效的数据同步与缓存）。
使用方式非常简单，开发者可以通过提供的安装命令快速创建一个新的项目。创建后，项目已经包含了路由结构、数据查询钩子、状态管理等基础架构，开发者可以立即开始编写业务组件，而无需关心底层配置。
它非常适合有一定React基础，希望快速启动新项目，并希望采用业界领先的状态管理和路由解决方案的前端开发者和全栈开发者。对于追求开发效率和代码质量的中小型项目团队或个人开发者尤其有帮助。
建议在开始新项目时使用此Skill，以获得最佳体验。请注意，它预设了特定的技术栈（React + TanStack系列），如果你的项目需要其他路由或状态管理库（如React Router、Redux），则需要进行较大改造。
核心特点
核心区别在于它并非一个孤立的工具，而是将TanStack Router的类型安全路由与TanStack Query的服务器状态管理深度整合，提供了一个开箱即用、最佳实践导向的完整项目骨架，避免了开发者手动集成这两大流行库时可能遇到的配置冲突和版本兼容性问题。
注意事项
不适合需要高度定制化技术栈（如使用Vue、Svelte或其他状态管理方案）或已有大型遗留代码库需要迁移的项目。
常见问题
这个Skill和直接用Create React App有什么区别？
它基于更现代的构建工具（如Vite），并预集成了类型安全的路由（TanStack Router）和强大的数据获取/缓存库（TanStack Query），而CRA只是一个基础的React启动模板。
我能用这个Skill开发后端吗？
不能，这是一个纯粹的前端开发脚手架，专注于React应用的UI、路由和数据流管理，不包含后端服务代码。