SuperAPI AI 工具集

solid-react

编程与开发

查看项目

更新于 10-16 01:59

技能介绍

用途

solid-react 是一个用于在 React 架构中应用 SOLID 原则的技能,属于跨领域的代码质量技能,而非某个 React API 的功能技能。它帮助开发者在编写与重构 React 代码时遵循单一职责、开闭、里氏替换、接口隔离与依赖倒置五项原则,并通过文件拆分、hook 分离、接口目录与 JSDoc 等约定约束代码组织方式。资料明确指出,React API 本身的内容应参考 react-19、react-state、react-forms、react-tanstack-router 等技能。

主要能力

按 SOLID 每个字母提供独立参考指南:

  • single-responsibility:一个函数只有一个变更原因,在 FUSE_SOLID_MAX_LINES 限制内按职责拆分,包含组件组合模式与拆分策略。
  • open-closed:通过组合而非修改来扩展,包含插件架构、render props 与 slots、策略模式。
  • liskov-substitution:契约合规与行为子类型,包含接口契约、可替换实现与测试合规。
  • interface-segregation:多个聚焦接口优于一个臃肿接口,包含基于角色的接口、props 拆分与 Context 拆分。
  • dependency-inversion:依赖抽象而非实现,包含构造注入、工厂模式与通过 Context 做依赖注入。 概览与速查见 references/solid-principles.md。

提供 10 个可直接复制的代码模板,位于 references/templates/:component.md(React 函数组件)、hook.md(带 TanStack Query 的自定义 hook)、service.md(带依赖注入的 service)、store.md(带持久化的 Zustand store,最多 40 行,owner rule)、interface.md(TypeScript 接口)、validator.md(Zod 校验 schema)、factory.md(工厂模式)、adapter.md(适配器模式)、error.md(自定义错误类)、test.md(Vitest + Testing Library)。每个模板都不超过 FUSE_SOLID_MAX_LINES。

使用方式

技能规定了强制流程:

  1. 代码库分析(强制):实现前先探索项目结构理解架构,读取相关既有文件以沿用既定模式,识别命名约定、编码风格与模式,理解数据流与依赖。
  2. DRY 复用或创建共享(强制):写任何新代码前先用 grep 检索相似函数名、模式或逻辑;检查共享位置 modules/cores/lib/、modules/cores/components/、modules/cores/hooks/;若存在相似代码则扩展/复用而非重复;若代码会被 2 个以上功能使用,则直接在 modules/cores/ 中创建;将重复 3 次以上的逻辑提取为共享 helper;创建新文件后运行 npx jscpd ./src --threshold 3。
  3. 智能体工作流(强制):实现前并行启动 3 个 agent,每个一个 Agent 调用并带名称——fuse-ai-pilot:explore-codebase(分析项目结构与既有模式)、fuse-ai-pilot:research-expert(核验技术栈最新文档)、mcp__context7__query-docs(检查集成兼容性);实现后运行 fuse-ai-pilot:sniper 做校验。

绝对规则(强制)

  1. 源文件大小上限:源文件不得超过 FUSE_SOLID_MAX_LINES,hook 的上限是唯一权威;凝聚力下降时按职责拆分(组件用组合、hook、service)。
  2. 模块化架构:完整结构见 references/architecture-patterns.md,包含功能模块与 cores 目录。
  3. 必须写 JSDoc:示例为 export async function getUserById(id: string): Promise<User | null>,注释包含描述、@param 与 @returns。
  4. 接口分离:接口放在 modules/[feature]/src/interfaces/(如 user.interface.ts、post.interface.ts、api.interface.ts),绝不把接口放在组件文件中。

适用场景

适合在 React 项目中做架构规范化、拆分过大组件与 hook、统一依赖注入与接口组织、建立组件/hook/service/store 模板体系,以及需要以代码质量规则约束多人协作的开发场景。

限制与禁止项

资料列出以下禁止做法:未先研究文档就写代码(必须始终研究);使用过时 API 而未核对当年文档;源文件超过 FUSE_SOLID_MAX_LINES;在组件文件中放接口;在组件中写业务逻辑;类组件;导出缺少 JSDoc;any 类型;barrel exports(index.ts 再导出);用 useEffect 做数据获取(应使用 TanStack Query 或 Router loaders);模块导入另一个模块(cores 除外);未先 grep 检索就重复实现既有工具/helper;复制粘贴逻辑块而不提取共享函数。响应准则还要求:先研究(写任何代码前搜索 Context7 + Exa)、展示完整可运行代码而非片段、解释为何选择该模式、始终建议测试用例、处理错误并使用 error boundaries、全 TypeScript 类型化、为复杂函数写 JSDoc。

暂未提供的信息

资料未提供 FUSE_SOLID_MAX_LINES 的具体数值、安装命令、收费与价格信息、支持平台与运行时版本要求,也未提供官方文档站点或仓库地址。