用途:React Guard 用于校验 React 代码是否符合最佳实践,可独立用于任意 React 项目,不要求 Next.js。适用时机包括:编写或修改 React 组件(.tsx/.jsx)之后、提交 React 代码变更之前、审查 React PR 时。
主要能力:工作流分三个阶段。第一阶段加载全部技能:code-quality(通用质量原则)、react-senior-guide(hook、router 与横切原则)、react-patterns(React 19 模式、Server Components、Actions)、react-anti-patterns(按检测难度划分的 18 种反模式)、context-memoization-guide(记忆化决策框架)、vercel-react-best-practices(性能优化规则)。第二阶段对每个改动的 .tsx/.jsx 文件按严重级别检查。第三阶段按严重级别分组输出发现的问题,并附 file:line 引用。
检查项:BLOCKER 包括组件内定义组件、用 useEffect 处理派生状态(应在渲染时计算)、缺少 useEffect 清理(定时器、订阅、监听器)、条件调用 hook 或在提前 return 后调用 hook、直接修改 state(须创建新引用)、对可能为 0 的数字使用 &&。WARNING 包括子组件未用 memo() 却使用 useCallback、布尔值爆炸(多个布尔状态而非联合类型)、通过 useEffect 将 props 镜像到 state、缺少 loading/error/empty 状态、setTimeout/setInterval/async 中的过期闭包、上帝组件(超过 200 行且混合 fetch、逻辑与 UI)、不必要的记忆化(优化前先测量)。INFO 包括动态列表使用 key={index}、手动 fetch 而非 React Query(或 Server Components)、应使用 useReducer 的细粒度 useState。
使用方式:资料未提供具体安装命令或调用命令,仅说明通过 Skill 工具加载上述技能。
限制:资料未提供收费、价格、平台支持范围等信息;检查项与技能清单以资料为准,未提及的功能暂未提供。