用途:审查使用 Mantine UI 库的 React 组件,覆盖无障碍合规、Styles API 正确性、组件模式遵循与常见陷阱检测。不适用于非 Mantine 的 React 组件、后端代码、Mantine v6 及更早版本(模式不同),初次开发应改用 mantine-developing 技能。
主要能力与检查项:无障碍(ActionIcon 需 aria-label、CloseButton 需 aria-label 或父级 closeButtonLabel、标题层级、焦点可见、键盘导航);嵌套交互元素(Accordion.Control 内不得含 Button/ActionIcon/Link);Styles API(用 classNames/styles 定位内部元素,避免 !important 与仅作用于根节点的内联样式);Tooltip 包裹禁用元素需用 data-disabled 并阻止默认事件;ActionIcon.Group 仅接受直接子级;Select 与 Autocomplete 的选用;表单建议用 @mantine/form 的 useForm 与 getInputProps;暗色模式避免硬编码颜色;性能(稳定引用、useMemo/useCallback、虚拟化、代码分割);多态组件 ref 类型。
使用方式:先定位 Mantine 文件,例如 grep -r "from '@mantine" --include=".tsx" --include=".ts" -l;再运行 npm run typecheck 与 npm run lint,并用 grep 检索常见问题;随后按 CHECKLIST.md 人工复核,最后按 CRITICAL/HIGH/MEDIUM/LOW 分级输出报告。
限制:仅针对 Mantine v7 及相近版本模式;不覆盖后端;报告模板与检查清单需参考随附文件。相关技能包括 mantine-developing 与 hermes-code-reviewer,可配合 mantine-ui-expert 智能体使用。