Frontend Engineer 是一份现代 React 开发综合指南，重点关注基于 Suspense 的数据获取、懒加载、合理的文件组织以及性能优化。
适用场景
创建新组件或页面；构建新功能；使用 TanStack Query 获取数据；使用 TanStack Router 配置路由；为组件添加样式；性能优化；组织前端代码；遵循 TypeScript 最佳实践。
快速开始
新组件检查清单：使用带 TypeScript 的 React.FC<Props> 模式；重型组件懒加载：React.lazy(() => import())；用 <SuspenseLoader> 包裹以处理加载状态；使用 useSuspenseQuery 获取数据；导入别名：@/、~types、~components、~features；样式：少于 100 行内联，超过 100 行独立文件；传递给子组件的事件处理器使用 useCallback；默认导出放在底部；不要用提前返回配合加载 spinner；使用通知系统提供用户反馈。
新功能检查清单：创建 features/{feature-name}/ 目录；创建子目录 api/、components/、hooks/、helpers/、types/；创建 API 服务文件 api/{feature}Api.ts；在 types/ 中设置 TypeScript 类型；在 routes/{feature-name}/index.tsx 中创建路由；懒加载功能组件；使用 Suspense 边界；从功能的 index.ts 导出公共 API。
核心原则
重型内容一律懒加载：路由、DataGrid、图表、编辑器。用 Suspense 处理加载：使用 SuspenseLoader，而非提前返回。useSuspenseQuery：新代码的主要数据获取模式。功能按目录组织：api/、components/、hooks/、helpers/ 子目录。样式按规模决定：少于 100 行内联，超过 100 行独立文件。导入别名：使用 @/、~types、~components、~features。禁止提前返回：防止布局偏移。TypeScript 优先：严格模式，不使用 any 类型。
实施流程
实现前端代码时：检查是否存在既有工作流模式（spec-first、TDD 等）并遵循；提交前确保代码通过 CI 检查（类型、测试、lint）；将相关改动与测试放在原子提交中。
参考文档
详细指南见：references/component-patterns.md（现代 React 组件模式）、references/data-fetching.md（基于 Suspense 的数据获取）、references/file-organization.md（基于功能的组织方式）、references/styling-guide.md（样式模式与最佳实践）、references/routing-guide.md（TanStack Router 模式）、references/performance.md（性能优化）、references/typescript-standards.md（TypeScript 最佳实践）。