用途
Base UI React 是一个用于在 React 应用中实现、重构、审查或解释 @base-ui/react 的技能。当工作涉及 Base UI 组件或工具时使用。资料显示其对应 Base UI v1.4.1，发布于 2026 年 4 月 20 日。
主要能力
该技能围绕一个分类工作流组织任务，涵盖以下类型：
- adopt：将 Base UI 添加到某个界面或功能。
- choose：为某个 UX 需求挑选合适的原语。
- compose：将 Base UI 的各个部分封装为应用级组件。
- style：将文档示例移植到项目的样式栈中。
- forms：接线 Field、Fieldset、Form、校验或表单库。
- motion：添加过渡或基于 Motion 的动画。
- migrate：根据发布说明或更新文档调整代码。
- review：检查 Base UI 代码的无障碍、状态或回归问题。
使用方式
技能按需加载参考文档，避免一次性载入全部内容：
- 始终从
references/index.md开始。 - 选择组件或学习不熟悉的组件时，加载
references/component-catalog.md。 - 需要设置、无障碍、样式、表单和 TypeScript 指导时，加载
references/integration-playbook.md。 - 需要常见结构、受控状态、分离触发器、事件细节和工具行为时，加载
references/patterns-and-apis.md。 - 目标项目使用 Tailwind CSS v3 时，加载
references/tailwind-v3-compat.md。 - 已安装版本可能落后于文档或涉及迁移时，加载
references/releases.md。
编辑前需检查本地约束：查看 package.json 中已安装的 @base-ui/react 版本；复制示例前检查样式栈；若存在 Tailwind，先确定项目使用 v3 还是 v4；对于弹层密集的布局，确保应用根节点创建隔离的层叠上下文；若有 CSP 或 RTL 需求，先加载相关工具指导再编码。
构建顺序上，先选语义再考虑外观；从文档化的部件结构出发，再叠加样式与组合；除非外部编排需要受控状态，否则优先使用非受控默认值；表单控件优先用 Field 包裹，而不是手工重建标签、描述和错误；优先使用 render、mergeProps 和 useRender，而非临时包装模式；优先使用文档化的 data 属性和 CSS 变量，而非脆弱的 DOM 选择器。
实现后需验证行为：检查每个触发器和表单控件的可访问名称；检查弹层的焦点进入、焦点返回、键盘导航和关闭行为；检查复合表单控件的隐藏输入提交和校验气泡；Tailwind v3 移植需按渲染行为验证，而非仅比较类名；若行为与文档不符，先对照已安装包版本，再判断是否为库缺陷。
默认约定
- 优先使用可组合的 Base UI 部件，而非不透明的应用专用抽象。
- 进入和退出优先使用 CSS 过渡而非 CSS 动画。
- 除非需要手势、吸附点或 sheet 行为，否则优先 Dialog 而非 Drawer。
- 大型可筛选数据集优先 Combobox 而非 Select。
- 允许自由输入时优先 Autocomplete 而非 Combobox。
- 弹层内容本身对交互重要时优先 Popover 而非 Tooltip。
限制与护栏
- 不要将 Tooltip 用作唯一的可访问标签或关键信息的唯一位置。
- 不要将官方 Tailwind CSS v4 示例原样复制到 Tailwind CSS v3 项目。
- 组装弹层族时不要忘记 Portal。
- 不要用站点导航原语替换操作菜单，反之亦然。
- 通过 render 组合时不要破坏 ref 转发或 prop 展开。
- 使用 v1.0.0 之后引入的文档功能（如 Drawer、CSPProvider、Select.Label、Combobox.InputGroup、Tooltip 的 closeOnClick 或预览版 OTPField）时，不要跳过版本检查。
适用场景
适用于在 React 项目中使用或维护 Base UI 组件库的开发者，包括新功能引入、组件选型、样式移植、表单集成、动效添加、版本迁移和代码审查等任务。
暂未提供
资料未提供该技能的收费、价格、平台支持范围或具体效果数据。