SuperAPI AI 工具集

vibe-coding-review-react

前端与建站

查看项目

更新于 10-15 16:44

技能介绍

用途:对 React 与 Next.js 项目做生产级代码审查,共 65 条规则,分 8 个类别,由 vibe-coding-code-review 在检测到 React/Next.js 时调用。

入口校验:先检查 package.json 是否含 "react",未找到则停止并提示改用 vibe-coding-code-review;若检测到 Vue/Svelte/Angular 则停止,说明本技能仅适用于 React/Next.js。

按优先级顺序执行各类别,CRITICAL 问题立即报告:Cat 1 异步瀑布(CRITICAL)、Cat 2 包体积(CRITICAL)、Cat 3 服务端性能(HIGH)、Cat 4 客户端数据获取(MEDIUM-HIGH)、Cat 5 重渲染优化(MEDIUM)、Cat 6 渲染性能(MEDIUM)、Cat 7 JavaScript 性能(LOW-MEDIUM)、Cat 8 组合模式(MEDIUM)。要求按顺序跳转到对应 ## Cat N 段落,完成当前类别前不提前阅读后续类别。

主要检查点举例:异步瀑布关注 useEffect 内依赖前次结果的 fetch、可并行却串行的 await、应由 Server Component 承担的数据获取;包体积关注整库导入、缺少 dynamic 动态导入、使用 moment.js、整图标库导入、用 <img> 而非 next/image、页面级组件加 "use client";服务端性能关注重复 DB 调用缺 cache()、缺少 revalidate 策略、N+1 查询、缺少 generateStaticParams、缺少 Suspense 与流式渲染;客户端数据获取关注裸 useEffect+fetch、缺 loading/error 状态、无请求去重、依赖缺失、轮询未清理;重渲染关注对象/数组字面量作 props、内联函数 props、context 全量重渲染、昂贵纯组件缺 React.memo、对廉价操作滥用 useMemo/useCallback;渲染性能关注长列表未虚拟化、用数组索引作 key、每次渲染做昂贵计算;JavaScript 性能关注 .filter().map() 链、热路径 JSON.parse(JSON.stringify(...))、循环内编译正则、搜索输入未防抖;组合模式关注布尔 props 泛滥、组件 props 过多、缺少复合组件模式、prop drilling 超过两层。

React 19 相关检查:使用 forwardRef()、useFormState 未包在 <form action={serverAction}>、条件调用 use()、createContext 未用 <Context> 直接包裹等视为失败;use(promise)、useOptimistic、useFormStatus 为通过模式。

输出格式:REACT CODE REVIEW 标题,含文件路径、框架(React / Next.js App Router / Next.js Pages Router)、CRITICAL/HIGH/MEDIUM/LOW 计数,以及 CRITICAL、HIGH、MEDIUM、LOW 发现列表(含文件:行号、描述、修复方式、影响)和 PASSED 通过项列表。

限制:资料未提供安装命令、收费方式、平台支持与效果数据,暂未提供。