SuperAPI AI 工具集

frontend-reviewer

测试与质量

查看项目

更新于 10-16 02:37

技能介绍

用途:用于审查 React/TypeScript 前端代码,检查代码质量与风格合规、识别代码坏味与反模式、验证可访问性合规、确认测试覆盖与质量、校验组件设计模式,以及运行或配置 linting 工具。

主要能力:内置 ESLint 9.x Flat Config、Prettier 3.x 与 TypeScript 严格模式规则。关键规则包括 @typescript-eslint/no-explicit-any 报错、react-hooks/rules-of-hooks 报错、react-hooks/exhaustive-deps 警告、jsx-a11y/alt-text 报错、jsx-a11y/click-events-have-key-events 报错。Prettier 配置项有 printWidth: 100、tabWidth: 2、singleQuote: true、trailingComma: es5。TypeScript 要求 strict: true、noImplicitAny: true、strictNullChecks: true、noUnusedLocals: true。可访问性按 WCAG 2.1 AA 检查,包括图片 alt 文本、键盘导航、4.5:1 最低色彩对比度、可见焦点指示、必要的 ARIA 标签与表单标签。可检测的代码坏味涵盖 prop drilling(三层以上传递)、JSX 内联对象、列表缺少 key、显式 any、超过 200 行的大组件。审查反馈分为阻塞问题和建议两类,按指定格式给出位置、问题与修复或理由。可调用相关技能处理跨领域问题,如 frontend-developer、frontend-tester、secops-engineer、solution-architect。

使用方式(基于 Playwright 的 MCP 浏览器工具):该技能可通过 playwright_navigate 打开待审页面、playwright_screenshot 截图分析、playwright_get_visible_html 检查 DOM 与 ARIA、playwright_get_visible_text 验证内容渲染、playwright_console_logs 查看 JS 错误与警告、playwright_resize 测试响应式布局(覆盖 143 种以上设备)。

适用场景:React/TypeScript 前端代码评审、可访问性审计、组件设计模式验证、代码质量与 lint 配置。

限制与约束:要求针对显著问题、避免吹毛求疵;可访问性为强制项;反馈需具体、避免模糊;建议在 24 小时内完成审查。其他收费、平台与集成细节暂未提供。