SuperAPI AI 工具集

ssd-frontend-review

前端与建站

查看项目

更新于 10-15 21:35

技能介绍

用途:在提交 PR 或重构前审查 React/TypeScript 前端代码是否符合 SSD 标准,产出清晰违规报告,并可与 ssd-frontend-refactor 配合修复。审查阶段只读,禁止修改文件;所有违规需附文件路径和行号,按类别归组,无法确定时标为 Warning 而非 Error。

检查清单:1)TypeScript 类型:禁用 any、{} 作类型、as any,改用 unknown、Record<string, unknown>、类型守卫等。2)命名:组件 PascalCase 且最多 3 词;Props 类型为 [ComponentName]Props;页面组件以 Page 结尾;路由用 lower kebab-case;变量函数 camelCase;全局常量 CONSTANT_CASE;自定义 hook 文件以 .hook.tsx 结尾。3)组件结构:一组件一文件;用 <>...</>;禁止 React.createElement;事件处理用箭头函数;布尔 prop 不写 ={true};DOM prop 名不可作为 prop 名。4)列表 key:禁止用 index,使用唯一 id。5)环境变量:禁止直接用 import.meta.env,改用 window.CONST__ENV.VAR_NAME;环境变量须以 VITE_ 开头。6)表单:使用 Formik(useFormik 或 Formik);校验用 Yup 或 validate 函数。7)状态:Redux 用 createSlice;使用 redux/hook.ts 的 useAppSelector、useAppDispatch。8)API:组件内禁止直接 axios,使用 React Query 的 useQuery/useMutation;query key 用 queryKeys 对象。9)测试属性:Button、Label/Typography 需有 name,动态渲染需有 id。

用法:先确定审查范围(整个模块、PR 变更文件或全部 .tsx),逐文件按类别检查并记录行号,最后生成报告,分 Violations、Warnings、通过项与汇总。

限制:资料仅提供规范与审查流程,未说明运行环境、安装方式、依赖版本或适用范围;实际规则以项目 SSD 标准为准。