SuperAPI AI 工具集

base-ui

前端与建站

查看项目

更新于 10-15 21:11

技能介绍

用途:Base UI 是一个无样式、可访问的 React 原语层,用于构建、审查、迁移或调试使用 @base-ui/react 的界面。使用时应保留语义、焦点、标签、键盘行为与样式钩子,并把各部件适配到宿主应用的设计系统。

主要能力与用法:改代码前先从项目确认已安装包与版本,使用 @base-ui/react,而非已废弃的 @base-ui-components/react。实现前阅读 references 下的参考:source-map.md(文档来源、包状态、清单与 1.7–1.8 变更)、core-patterns.md(初始化、样式、组合、状态、TypeScript、动画、无障碍与工具)、component-patterns.md(各组件族的解剖与实现说明)。需要确切 prop 名、事件原因、发布行为或组件 API 时,优先查阅已安装包内随附文档 node_modules/@base-ui/react/docs/index.md,其次 Context7 库 /mui/base-ui,或 https://base-ui.com/llms.txt 中的 .md 页面。先从文档化的复合部件构建,再通过 render prop 或保留 props 与 refs 的薄包装接入本地设计系统组件。

实现规则:从组件子路径导入,如 @base-ui/react/dialog、@base-ui/react/combobox、@base-ui/react/field;按文档装配部件,不要臆造组件或捷径;多数浮层需要 Root、触发器、portal、positioner 或 viewport、popup、标签/标题/描述以及 close/actions。Base UI 为无样式,使用 className、感知状态的 className/style 函数、data 属性与 CSS 变量进行样式化。保持可访问名称显式;自定义 render 元素必须转发 ref 并展开所有接收的 props。除非产品需要外部状态,优先非受控组件。留意 eventDetails.cancel() 与 allowPropagation()。Combobox ID 选择使用 Combobox.createItems 与 Combobox.Root.Props;Autocomplete 没有 createItems。不要把 Tailwind v4 专有语法复制到 v3 项目。

验证:检查角色、标签、禁用/只读状态与 focus-visible 样式;键盘导航覆盖方向键、Home/End、Enter/Space、Escape、Tab 顺序与焦点返回;浮层层级、多种关闭方式;表单提交名值及校验错误;动画使用 data-starting-style/data-ending-style 或 keepMounted,并保留 reduced-motion 可用性;TypeScript 包装暴露正确 Props 类型且不丢失 refs、handlers 或 data 属性。

限制:资料未提供收费、价格、平台与效果信息。