用途 本技能是一份面向现代 React 开发的前端开发规范指南，重点覆盖基于 Suspense 的数据获取、懒加载、文件组织与性能优化。适合在以下场景使用：创建新组件或页面、构建新功能、使用 TanStack Query 获取数据、使用 TanStack Router 设置路由、使用 MUI v7 为组件设置样式、性能优化、组织前端代码、遵循 TypeScript 最佳实践。
主要能力
- 组件模式：推荐使用 React.FC<Props> 进行类型约束，使用 React.lazy() 进行代码分割，用 SuspenseLoader 处理加载状态，采用具名 const 加默认导出的模式。重组件（如 DataGrid、图表、编辑器）应懒加载，懒加载组件须包裹在 Suspense 中。组件内部结构建议按 Props → Hooks → Handlers → Render → Export 排列。
- 数据获取：主要模式为 useSuspenseQuery，配合 Suspense 边界使用，采用缓存优先策略（先检查缓存再请求 API），可替代 isLoading 检查，并支持泛型以获得类型安全。API 服务层建议创建 features/{feature}/api/{feature}Api.ts，使用 apiClient（axios 实例），按功能集中定义方法，路由格式为 /form/route（而非 /api/form/route）。
- 文件组织：区分 features/（领域相关，如 posts、comments、auth）与 components/（真正可复用，如 SuspenseLoader、CustomAppBar）。功能目录下含 api/、components/、hooks/、helpers/、types/ 等子目录，并在该功能 index.ts 导出公共 API。
- 样式：少于 100 行使用内联 const styles: Record<string, SxProps<Theme>>，超过 100 行使用独立 .styles.ts 文件。主要方法为 MUI 组件的 sx prop，使用 SxProps<Theme> 保证类型安全，可通过 (theme) => theme.palette.primary.main 访问主题。MUI v7 Grid 使用 <Grid size={{ xs: 12, md: 6 }}> 语法。
- 路由：使用基于目录的 TanStack Router，在 routes/my-route/index.tsx 中通过 createFileRoute 定义，懒加载组件，面包屑数据放入 loader。
- 加载与错误状态：关键规则是不要使用提前返回（early return）加载动画，以避免累积布局偏移（CLS），应统一使用 <SuspenseLoader><Content /></SuspenseLoader> 包裹。错误处理使用 useMuiSnackbar 提供用户反馈，明确禁止 react-toastify，并在 TanStack Query 中使用 onError 回调。
- 性能：useMemo 用于昂贵计算（filter、sort、map），useCallback 用于传递给子组件的事件处理器，React.memo 用于昂贵组件，搜索防抖 300-500ms，并在 useEffect 中清理以避免内存泄漏。
- TypeScript：严格模式，不使用 any 类型；函数显式声明返回类型；类型导入使用 import type { User } from '~types/user'；组件 prop 接口带 JSDoc。
- 常见模式：涵盖 React Hook Form 配合 Zod 校验、DataGrid 包装器契约、Dialog 组件标准、用于获取当前用户的 useAuth hook，以及带缓存失效的 mutation 模式。
- 完整示例：提供使用全部模式的现代组件、完整功能结构、API 服务层、带懒加载的路由、Suspense + useSuspenseQuery、带校验的表单等可运行示例。
使用方式 本技能提供新建组件检查清单与新建功能检查清单，指导开发流程。导入别名通过 vite.config.ts 中定义（第 180-185 行）配置：@/ 指向 src/；~types 指向 src/types；~components 指向 src/components；~features 指向 src/features。文档还提供常见导入速查表、现代组件模板（可直接复制）、以及按需求导航到具体资源的指引（如创建组件看 component-patterns.md，获取数据看 data-fetching.md，组织文件看 file-organization.md，设置样式看 styling-guide.md，路由看 routing-guide.md，处理加载错误看 loading-and-error-states.md，优化性能看 performance.md，TypeScript 看 typescript-standards.md，表单/认证/DataGrid 看 common-patterns.md，完整示例看 complete-examples.md）。
适用场景 适用于 React/TypeScript 前端项目中的组件与页面创建、新功能构建、数据获取与路由搭建、MUI v7 样式设置、性能优化、代码组织以及 TypeScript 规范落实。相关技能包括 error-tracking（使用 Sentry 的错误跟踪，同样适用于前端）与 backend-dev-guidelines（前端所消费的后端 API 模式）。
限制 资料未提供本技能的具体安装命令、依赖版本要求、框架版本兼容范围、收费或授权方式、平台支持范围、实际使用效果评测等信息。以上内容均以资料所述规范与示例为准，未提及的功能、价格、平台或效果暂未提供。