SuperAPI AI 工具集

react-component-diagnosis

前端与建站

查看项目

更新于 10-15 22:15

技能介绍

用途:对单个 React 组件做架构健康检查,输出结构化诊断报告,帮助评估其设计质量。

主要能力:围绕 7 个维度逐项打分(1-5 分)并给出证据:消费方 API(调用方认知负担、必填 props 数量、默认值覆盖、类型自解释性、错误提示、命名一致性)、数据流(转换层级、单向性、副作用隔离、状态放置)、可测试性(纯函数比例、依赖可替换性、测试存在与粒度、边界覆盖)、可扩展性(扩展模式、组合优于继承、插件点、改动影响面、过度设计)、性能(渲染效率、计算位置、异步处理、内存清理、包体积;动画或高频更新组件需做逐帧分析)、心智模型(文件即职责、命名一致、目录结构、依赖方向、意外行为)、边界与契约(入口校验、第三方封装、类型边界、类型断言、校验一致性、错误边界、触点数量)。

使用方式:先定位组件并读取全部源文件(含子目录),用一句话概括职责,逐维度回答核心问题并打分、找代码证据,再交叉复查补漏,最后套用模板输出:记分卡、逐维度分析、亮点、建议(按 P0/P1/P2 分级,含问题、影响、建议方向与工作量)、可选架构图。评分须基于具体代码位置(filename:line),同一问题只在最相关维度扣分,避免重复计分。

适用场景:用户指向单个组件目录或 .tsx 文件、询问其设计质量时使用。

限制:仅针对单个 React 组件;若目标是工具文件、服务、hook 库或通用模块,或涉及多模块、跨文件架构、整仓重构、仅收紧类型、通用代码异味、单个命名等,应改用其他技能。资料未提供安装命令、收费与平台信息。