better-ui 是一个用于打磨和改进项目 UI 的技能，其核心观点是：精致感来自大量小细节的叠加，因此它充当一份参考，说明哪些细节值得保留、应取什么数值。
用途 该技能用于审查和提升界面质量。审查时建议放慢界面节奏——在 10% 速度下感觉不对的地方，就是全速下微妙出错的地方。使用时应保留项目自身的组件库、设计令牌（tokens）和密度，并匹配其动效语言，除非规则中明确规定了某个精确交互。
主要能力
- 同心圆角：外层圆角 = 内层圆角 + 内边距。嵌套元素圆角不匹配是让界面感觉不对的最常见原因。圆角、阴影和描边配方见 surfaces.md。
- 视觉对齐优先于几何对齐：当几何居中看起来不对时，改用视觉对齐。带图标的按钮、播放三角形和不对称图标都需要手动微调。
- 阴影表达层级，边框表达结构：若边框仅用于制造深度，优先使用分层的透明 box-shadow；保留传达结构或状态的边框，如分隔线、分隔符以及选中或聚焦状态。
- 可中断动画：交互状态变化使用 CSS transition，因为其可在动画中途被打断；keyframes 保留给只运行一次的分阶段序列。
- 入场动画的分组与错峰：对于不频繁、且顺序能传达层级的分阶段入场，将内容拆成语义块并以约 100ms 错峰。动画单个容器在同等成本下效果更差。高频交互不要错峰。详见 enter-exit.md。
- 克制的退场动画：使用小的固定 translateY，而非完整高度。退场应比入场更柔和，两个方向都用 ease-out。
- 图标的情境化动画：用透明度、缩放和模糊来动画图标，而不是切换可见性。精确数值为：scale 0.25 到 1，opacity 0 到 1，blur 4px 到 0px。若项目使用动效库（package.json 中的 motion 或 framer-motion），匹配该包的导入路径，或在两者都存在时使用就近导入。使用 transition: { type: "spring", duration: 0.3, bounce: 0 }，bounce 始终为 0。若没有动效库，则将两个图标都保留在 DOM 中，其中一个绝对定位，用 cubic-bezier(0.2, 0, 0, 1) 交叉淡入淡出，从而无需依赖即可实现进入与退出。两种配方见 icon-transitions.md。
- 图片描边：给图片加 1px 低透明度描边以获得一致的深度。浅色模式用纯黑（oklch(0 0 0 / 0.1)），深色模式用纯白（oklch(1 0 0 / 0.1)）。绝不用 slate 或 zinc 这类近黑色，也绝不用带色调的中性色——带色调的描边会吸收下方表面，看起来像图片边缘的污渍。
- 按压缩放：点击时 scale(0.96) 给按钮触觉反馈。始终为 0.96；低于 0.95 会显得夸张。在动效会造成干扰处添加静态 prop 将其关闭。CSS、Tailwind 和 Motion 的配方见相关文档。
- 页面加载时跳过动画：在 AnimatePresence 上使用 initial={false}，使首次渲染不播放入场动画。检查它是否保留了有意的页面入场效果。
- 主题切换时抑制过渡：主题翻转会同时改变几乎所有元素的颜色、背景、边框和阴影，这些属性上的每个过渡会一起触发，导致切换被涂抹而非干脆利落。注入 ,::before,*::after{transition:none !important}，强制重排，然后在下一帧移除。配方见相关文档。
- 只过渡会变化的属性：始终写明具体属性，如 transition-property: scale, opacity。Tailwind 的 transition-transform 覆盖 transform、translate、scale、rotate。
- 谨慎使用 will-change：仅用于 transform、opacity 和 filter 这些 GPU 可合成的属性。绝不用 will-change: all。在出现首帧卡顿时才添加，而非提前添加。详见 performance.md。
- 图标描边与文字字重匹配：文字旁的图标承载文字的视觉重量——常规（400）文字旁用 1.5px 描边，半粗（600）文字旁用 2px。每套图标集只用一种描边粗细，每个界面只用一种图标库。尺寸与 RTL 翻转见 icons.md。
- 单一 SVG 按状态重新着色：图标使用 currentColor，悬停、选中和禁用状态取自 CSS 颜色和透明度，绝不使用单独资源。轮廓是默认变体，填充标记激活状态。
- 动效克制：高频交互给予即时反馈，或对透明度和颜色使用 150ms 或更短的过渡。自定义动画会在每次触发时收取注意力成本。每个动画状态变化还需要静态提示：颜色、图标或标签。动效绝不能是唯一的反馈渠道。
使用方式 该技能以审查和报告形式运作。严重程度定义：HIGH 表示破坏交互、使动效不可用，或使状态变化仅在动画运行时可见；MEDIUM 表示表面、图标或动效上的可见不一致；LOW 表示孤立的打磨问题。
验证方式：无浏览器时，检查组件定义的每个状态（悬停、聚焦、激活、加载和空状态），以及从代码中读取的动效时长和缓动；有浏览器时，走查每个状态，并在浏览器 Animations 面板中以 10% 速度重放动效。无法运行的每项检查都报告为 Not verified。
报告格式：按违反的原则分组，按严重程度排序，每个根因一行，列出其出现的所有位置，包含列：Severity、Location、Before、After、Why。Location 为 path/to/file:line。Why 说明原则和用户影响。最后，若仍有任何 HIGH 则给出 Block，否则给出 Approve，其余留在表格中作为待办工作。绝不 Approve 未检查的覆盖范围。若无问题可报告，则声明 "No actionable UI-polish findings" 并报告验证情况。
适用场景 适用于需要提升界面精致度的前端项目，尤其是涉及圆角嵌套、图标与文字搭配、动效设计、主题切换、图片展示和交互反馈等细节的界面打磨与代码审查。
限制 该技能不覆盖文字换行、字体渲染、表格数字和文字间距（属于 better-typography）；不覆盖点击区域、聚焦、键盘支持、ARIA 和减少动效（属于 better-accessibility）；不覆盖分组、区块间距、断点和空间 RTL（属于 better-layout）。所有时长、曲线、缩放和模糊均为具体数值而非可近似范围，必须按所写使用。