SuperAPI AI 工具集

frontend-dev-guidelines

前端与建站

查看项目

更新于 10-15 21:51

技能介绍

用途:为现代 React 开发提供综合规范,强调基于 Suspense 的数据获取、懒加载、文件组织与性能优化。适用场景包括创建组件或页面、构建新功能、用 TanStack Query 获取数据、用 TanStack Router 配置路由、用 MUI v7 编写样式、性能优化、组织前端代码以及 TypeScript 最佳实践。

主要能力与规范:组件使用 React.FC<Props>;重型组件用 React.lazy(() => import()) 懒加载并包在 SuspenseLoader 中;数据获取首选 useSuspenseQuery,配合 Suspense 边界,不写 isLoading 提前返回,避免布局偏移;通知统一用 useMuiSnackbar,避免 react-toastify;文件组织区分 features/(领域相关)与 components/(可复用),feature 下设 api/、components/、hooks/、helpers/、types/ 子目录;样式少于 100 行内联、超过 100 行单独文件,MUI 用 sx 属性并配合 SxProps<Theme>,MUI v7 Grid 使用 size={{ xs: 12, md: 6 }} 语法;路由采用 TanStack Router 的目录式结构 routes/my-route/index.tsx,用 createFileRoute 并懒加载。

导入别名:@/ 指向 src/,~types 指向 src/types,~components 指向 src/components,~features 指向 src/features(定义于 vite.config.ts)。

限制与原则:避免过度工程,只做明确要求或明显必要的改动;编辑前先阅读相关文件,不臆测未检查的代码;TypeScript 严格模式、不用 any、显式返回类型。资料未提供安装命令、收费或平台信息,暂未提供。