mcpField
M
mui-base

mui-base

github.com/pproenca开发218331 次安装11 周前更新
代码仓库

关于 mui-base

mui-base 是面向 React 开发者的参考 Skill，适用于采用 MUI Base UI 模式构建无头组件库，按组件设计、命名、组织、错误处理和样式整理了 48 条规则。

主要功能

  1. 0148 条分级实现规则
  2. 02无头与无样式组件模式
  3. 03受控和非受控模式
  4. 04无障碍与 ARIA 指引
  5. 05命名和项目组织规则
  6. 06错误处理与样式规范

适用场景

  1. 01构建无头 React 组件库
  2. 02通过共享上下文组合组件
  3. 03实现无障碍 UI 基元
  4. 04检查组件结构与约定

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/pproenca/dot-skills --skill mui-base

安装后在 Claude Code 中输入/mui-base确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

AGENTS.md
metadata.json
README.md
assets/templates/
_template.md
references/
_sections.md
comp-context-error-message.md
comp-context-undefined-default.md
comp-context-value-memo.md
comp-forward-ref-named.md
comp-hook-namespace-exports.md
comp-plain-function-root.md
comp-props-destructure-order.md
comp-props-parameter-naming.md
comp-state-memoization.md
comp-use-client-directive.md
comp-use-controlled.md
comp-use-render-element.md
err-cancelable-events.md
err-context-error-guidance.md
err-deduplicated-warnings.md
err-dev-only-warnings.md
err-event-reason-constants.md
err-message-prefix.md
err-prop-validation-timing.md
err-typed-event-reasons.md
name-component-naming.md
name-constants.md
name-context-hook.md
name-context-suffix.md
name-data-attributes.md

详细介绍

MUI Headless UI 最佳实践

构建遵循 MUI Base UI 模式的无头 React 组件库的综合风格指南。包含 5 个类别、共 48 条规则，并按影响程度排序。

适用场景

在以下情况下参考这些指南：

  • 构建无头／无样式组件库
  • 使用基于上下文的组合方式创建复合组件
  • 使用 ARIA 模式实现无障碍 UI 基元
  • 使用 render props 和 className 回调提高样式灵活性
  • 编写同时支持受控和非受控模式的组件

按优先级划分的规则类别

优先级类别影响程度前缀
1组件模式CRITICALcomp-
2命名约定HIGHname-
3组织结构HIGHorg-
4错误处理HIGHerr-
5风格MEDIUMstyle-

快速参考

1. 组件模式（CRITICAL）
  • comp-forward-ref-named - 使用命名函数搭配 forwardRef
  • comp-props-parameter-naming - 将 Props 参数命名为 componentProps
  • comp-use-render-element - 使用 useRenderElement 渲染 DOM
  • comp-context-undefined-default - 创建默认值为 Undefined 的 Context
  • comp-context-error-message - 使用层级结构编写 Context 错误消息
  • comp-use-controlled - 使用 useControlled Hook 支持双模式
  • comp-state-memoization - 对状态对象进行记忆化
  • comp-context-value-memo - 对 Context Provider 的值进行记忆化
  • comp-plain-function-root - 对非 DOM 根节点使用普通函数
  • comp-hook-namespace-exports - 导出 Hook 命名空间
  • comp-props-destructure-order - Props 解构顺序
  • comp-use-client-directive - 添加 use client 指令
2. 命名约定（HIGH）
  • name-component-naming - 组件命名为 ParentPart
  • name-file-matches-export - 文件名与主要导出项一致
  • name-directory-kebab-case - 目录采用 kebab-case 命名
  • name-part-directory-lowercase - Part 目录采用小写命名
  • name-context-suffix - Context 命名使用后缀
  • name-context-hook - Context Hook 命名为 useComponentContext
  • name-props-interface - Props 接口命名为 ComponentProps
  • name-state-interface - State 接口命名为 ComponentState
  • name-namespace-type-exports - 命名空间类型导出
  • name-event-type - 事件类型命名约定
  • name-constants - 常量采用 SCREAMING_SNAKE_CASE 命名
  • name-data-attributes - Data 属性采用小写命名
  • name-hooks - Hook 命名使用 use 前缀
  • name-refs - Ref 变量命名使用后缀
  • name-handlers - Handler 命名约定
3. 组织结构（HIGH）
  • org-component-directory - 组件目录结构
  • org-dual-barrel-exports - 双 Barrel 导出模式
  • org-test-colocation - 测试文件与代码并置
  • org-context-placement - Context 文件放置位置
  • org-data-attributes-file - Data 属性文档文件
  • org-state-attributes-mapping - 状态属性映射文件
  • org-css-vars-file - CSS 变量文档文件
  • org-package-exports - 包级通配符导出
4. 错误处理（HIGH）
  • err-dev-only-warnings - 仅在开发环境中显示警告
  • err-deduplicated-warnings - 对警告消息去重
  • err-message-prefix - 消息前缀标准
  • err-context-error-guidance - Context 错误指导
  • err-prop-validation-timing - Prop 验证时机
  • err-cancelable-events - 可取消事件模式
  • err-event-reason-constants - 事件原因常量
  • err-typed-event-reasons - 类型安全的事件原因
5. 风格（MEDIUM）
  • style-react-import - 将 React 导入为命名空间
  • style-internal-imports - 内部导入路径
  • style-explicit-undefined - 在 Prop 类型中显式指定 Undefined
  • style-default-values - 在解构时设置默认值
  • style-jsdoc-documentation - JSDoc 文档

使用方法

请阅读各个参考文件，了解详细说明和代码示例：

来源

摘录自 MUI Base UI 代码库，日期为 2026-01-17。

完整编译文档

如需查看包含所有展开规则的完整指南：AGENTS.md

评论

支持 Markdown