SuperAPI AI 工具集

solid-react

前端与建站

查看项目

更新于 10-28 08:31

技能介绍

Solid React 是一套面向 React 19 的组件架构与代码质量规范,以 SOLID 原则为核心。

用途:用于约束 React 项目的目录组织、文件拆分、类型定义和依赖方向,帮助团队在开发与评审中维持一致的架构标准。

主要能力:

  • 强制代码库分析:实现前先探索项目结构、阅读相关文件、识别命名与编码风格、理解数据流与依赖。
  • DRY 要求:编写新代码前用 Grep 搜索相似函数与逻辑,优先复用 shared 位置(modules/cores/lib/、modules/cores/components/、modules/cores/hooks/);被 2 个以上功能使用的代码直接放入 modules/cores/;重复 3 次以上的逻辑抽为共享 helper;新建文件后运行 npx jscpd ./src --threshold 3 检查重复。
  • 硬性规则:文件不超过 100 行(90 行时拆分),组件小于 50 行,Hook 小于 30 行,服务小于 40 行;接口不得写在组件文件中,必须置于 modules/[feature]/src/interfaces/;导出必须有 JSDoc。
  • SOLID 五原则各配独立参考文档:single-responsibility.md、open-closed.md、liskov-substitution.md、interface-segregation.md、dependency-inversion.md,另有 solid-principles.md 总览。
  • 代码模板:component.md(50 行)、hook.md(30 行)、service.md(40 行)、store.md(40 行)、interface.md、validator.md(30 行)、factory.md(40 行)、adapter.md(40 行)、error.md(30 行)、test.md。
  • 工作流建议:实现前按需调用 Codex 子代理(fuse-ai-pilot:explore-codebase、fuse-ai-pilot:research-expert、mcp__context7__query-docs),实现后运行 fuse-ai-pilot:sniper 验证。

使用方式:作为技能或规范文档引入开发流程,在编码、评审和生成代码时对照执行;具体安装与集成步骤暂未提供。

适用场景:React 19 项目的架构设计、代码质量治理、组件拆分、类型与接口组织、代码评审。

限制:禁止未查文档即编码、使用过期 API、文件超过 100 行、组件内写业务逻辑、类组件、缺失 JSDoc、any 类型、barrel exports、用 useEffect 取数、模块间直接引用(cores 除外)、未搜索即重复工具函数。