SuperAPI AI 工具集

busirocket-react

前端与建站

查看项目

更新于 10-15 17:30

技能介绍

用途:这是一套可复用的 React 组件、Hook 与状态管理规范,用于编写或重构 .tsx 组件、把 Hook 抽取到 hooks/<area>/useXxx.ts、将组件或 Hook 中的辅助函数下沉到 utils/、把内联类型迁移到 types/,以及实现模态框、进度指示器等全局 UI 状态和跨组件共享数据、避免属性层层透传。

主要能力与硬性要求:组件与 Hook 方面,每个 .tsx 文件只导出一个组件,每个 Hook 文件只导出一个 Hook,组件与 Hook 内不得放辅助函数和内联类型,需分别从 utils/ 和 types/ 导入,并谨慎处理服务端渲染边界,避免在大子树上使用 'use client'。状态方面,每个领域一个 store(如 uiStore、workspaceStore、statusLogStore),store 过大时拆分,使用选择器减少重渲染,例如 useStore((state) => state.specificValue),动作定义在 store 中而非组件内,模态框从 store 读取可见性状态而非通过 props 接收。

规则清单涵盖组件模式(每文件一组件、客户端与服务端组件、复杂组件的文件夹命名空间、性能优化、无障碍、组件测试)、Hook 最佳实践(每文件一 Hook、无辅助函数、无类型、稳定 API、副作用)以及 Zustand(使用时机、store 组织、模态框模式、避免属性透传)。

使用方式:按规则文件查阅详细说明与代码示例,例如 rules/react-one-component-per-file.md、rules/react-one-hook-per-file.md、rules/react-client-vs-server.md、zustand-store-organization.md、zustand-modal-pattern.md,每个文件包含原因说明、正确与错误示例及最佳实践。相关技能包括 busirocket-core-conventions、busirocket-typescript-standards、busirocket-nextjs。具体安装与调用方式资料未提供。