UI Skills精选：把界面审美工程化

是什么 这是一份面向设计工程师的UI Skills精选。十项内容覆盖界面细节、动效、无障碍、组件体系、React性能、代码健康、测试、包管理与浏览器验证，串起从体验设计到前端交付的工作链。它不是单一教程，而是把经验拆成Agent和工程师可执行的规则。

核心论点 界面质感来自小细节累积：先识别项目既有样式系统，再逐一检查hover、focus、active、loading、empty等状态，并在原体系内做最小修复。make-interfaces-feel-better聚焦嵌套圆角、光学对齐、阴影层次、可中断过渡、文字排版、命中区域与克制动效；动画技能以时长、缓动、物理和舞台调度约束运动；无障碍技能优先处理可访问名称、键盘、焦点、语义和表单错误。shadcn强调复用、组合和语义token，React best practices、React Doctor、Vitest与pnpm则补上性能、质量、测试和依赖管理。

关键洞察 其核心价值是把“感觉不够好”转译成代码级检查与验证动作，连接设计意图、实现细节和工程质量，适合用于组件评审、设计系统维护及Agent编码后的质量门禁。

边界与风险 这是策展清单与规范摘要，不代表十项技能都已完整验证；材料未提供emil-design-eng、playwright-cli的正文。固定时长、动效数值和组件约束需结合产品语境、品牌、设备与无障碍目标判断，不能机械套用。