SuperAPI AI 工具集

mui-base

前端与建站

查看项目

更新于 10-16 03:46

技能介绍

用途:该技能提供一套面向无样式(headless/unstyled)React 组件库开发的风格指南,遵循 MUI Base UI 的模式,共包含 48 条规则,分为 5 个类别并按影响程度排序。适用于构建 headless 组件库、用基于上下文的组合方式创建复合组件、实现符合 ARIA 模式的无障碍 UI 基础组件、使用 render props 与 className 回调提升样式灵活性,以及编写同时支持受控与非受控模式的组件。

主要能力与规则分类:一、组件模式(CRITICAL,前缀 comp-),共 12 条,例如用具名函数配合 forwardRef、将 props 参数命名为 componentProps、使用 useRenderElement 进行 DOM 渲染、以 undefined 默认值创建 Context、上下文错误信息体现层级、用 useControlled Hook 支持双模式、记忆化状态对象与 Context Provider 值、非 DOM 根使用普通函数、Hook 命名空间导出、props 解构顺序、添加 use client 指令。二、命名约定(HIGH,前缀 name-),共 15 条,如组件按 ParentPart 命名、文件名与主导出匹配、目录用 kebab-case、部件目录用小写、Context 加后缀、Context Hook 命名为 useComponentContext、Props/State 接口命名、命名空间类型导出、事件类型命名、常量用 SCREAMING_SNAKE_CASE、data 属性小写、Hook 加 use 前缀、ref 变量加后缀、handler 命名约定。三、组织(HIGH,前缀 org-),共 8 条,如组件目录结构、双 barrel 导出、测试文件就近存放、Context 文件位置、data 属性文档文件、状态属性映射文件、CSS 变量文档文件、包级通配导出。四、错误处理(HIGH,前缀 err-),共 8 条,如仅开发环境警告、去重警告信息、信息前缀标准、Context 错误指引、prop 校验时机、可取消事件模式、事件原因常量、类型安全的事件原因。五、样式(MEDIUM,前缀 style-),共 5 条,如以命名空间方式导入 React、内部导入路径、prop 类型中显式 undefined、解构中的默认值、JSDoc 文档。

使用方式:在符合上述场景时参考这些指南,可阅读各参考文件获取详细说明与代码示例,包括章节定义、规则模板以及具体规则示例(如 comp-forward-ref-named、org-component-directory)。完整编译文档见 AGENTS.md。

限制:资料未提供安装命令、定价、平台支持或实际效果等信息,暂未提供。