用途
better-ui 用于打磨界面中的视觉细节，主要覆盖三类对象：表面（surfaces）、图标（icons）与动效（motion）。它提供每个细节应取的精确值，并规定打磨应在底层交互已经可靠之后进行，且打磨类问题不应优先于交互缺陷。
主要能力
- 精确数值规范：圆角、阴影、动画曲线、缩放、位移、模糊等均给出精确值，例如 cubic-bezier(0.2, 0, 0, 1)、按下缩放 0.96、进场 12px translateY、退出 -12px translateY，并声明这些值不是近似范围。
- 嵌套圆角规则：外层圆角等于内层圆角加内边距加边框宽度；超过 24px 内边距或不对称内边距时，视为独立表面并各自使用圆角令牌。
- 光学对齐：几何居中看起来不对时允许目测微调，例如按钮图标侧减少 2px 内边距、移动播放三角形、修正 SVG 中不对称字形。
- 阴影与边框分工：边框仅用于结构时替换为分层透明 box-shadow；分隔线、表格单元格、选中态、表单输入框保留边框。强制颜色模式下需保留 1px solid transparent 边框。
- 图片描边：内容图片使用 1px 内缩描边，浅色模式 oklch(0 0 0 / 0.1)，深色模式 oklch(1 0 0 / 0.1)，不使用调色板近黑色、染色中性色或强调色。透明艺术图（如 logo、插画）跳过。
- 动效规则：交互状态变化使用 CSS transition 或动效库弹簧；关键帧只用于一次性序列。高频交互不做动画；动画状态变化必须同时保留静态提示（颜色、图标或标签）；动效需在 prefers-reduced-motion: no-preference 下运行，减弱动效时替换为透明度交叉淡入。
- 进场与退场：非频繁进场按 100ms 错开，使用透明度、4px 模糊、12px translateY、300ms ease-out；退场更短更小，使用透明度、4px 模糊、-12px translateY、150ms ease-out。首次渲染跳过状态动画。
- 图标过渡：上下文图标交叉淡入，缩放 0.25 到 1，透明度 0 到 1，模糊 4px 到 0px；使用动效库时 spring 参数 duration 0.3、bounce 0；无动效库则双图标保留在 DOM 中，300ms cubic-bezier(0.2, 0, 0, 1) 交叉淡入。
- 性能与主题：仅过渡实际变化的属性，不使用 all；will-change 在出现首帧卡顿后使用，且只命名正在动画的属性；主题切换时抑制过渡并强制样式刷新。
- 悬停与滚动：悬停效果仅在 @media (hover: hover) 下应用；可滚动覆盖层使用 overscroll-behavior: contain。
- 图标规范：图标描边粗细匹配旁边文字字重（400 为 1.5px，700 为 2.5px）；每个表面使用一个图标库；图标使用 currentColor，状态由 CSS color 和 opacity 驱动，轮廓为默认变体，填充表示激活；RTL 下仅镜像含义跟随阅读方向的图标。
使用方式
该技能通过检查清单和修复对照表使用：列出常见问题（如父子同圆角、阴影环无边框、outline-slate 等、transition-all、悬停动画、按下缩放小于 0.96、bounce 非 0、缺少 reduced-motion 保护、图标硬编码颜色、悬停未包在 hover 查询中、覆盖层缺少 overscroll-behavior）并给出对应修复。报告时按严重程度分组，列出严重程度、位置、修改前、修改后、原因；位置格式为 path/to/file:line。若存在 HIGH 则给出 Block，否则 Approve，未检查覆盖范围不得 Approve。
适用场景
适用于已经具备可靠交互、需要进一步统一视觉细节的项目；尤其适合需要一套一致动效语言、可访问性友好且细节精确的界面打磨工作。
限制
- 文本换行、字体渲染、表格数字、文字间距属于 better-typography。
- 点击区域、键盘支持、ARIA、减弱动效要求属于 better-accessibility。
- 分组、区块间距、断点、空间 RTL 属于 better-layout，方向性图标镜像除外。
- 颜色令牌和对比度测量属于 better-colors。
- 必须保留项目既有组件库、令牌、密度与动效语言；项目中有意且一致的约定（如无阴影风格）视为偏好而非问题，同一细节两种做法才是问题。
- 无浏览器时只能从代码读取状态和时长缓动；有浏览器时可在 Animations 面板以 10% 速度回放。未能运行的检查需报告为“Not verified”。
- 官方文本未提供时，价格、平台、版本等信息暂未提供。