UI Skills 是一套用于指导 AI 智能体构建界面的约束规范，定位为“用智能体构建更好界面的有主见约束”。当用户提出“构建 UI”“创建界面”“设计组件”“实现前端”等需求，或需要前端构建指导时，应使用该技能。
技术栈方面：必须优先使用 Tailwind CSS 默认值（间距、圆角、阴影），再考虑自定义值；需要 JavaScript 动画时必须使用 motion/react（原 framer-motion）；在 Tailwind CSS 中做入场与微动画时建议使用 tw-animate-css；类名逻辑必须使用 cn 工具（clsx + tailwind-merge）。
组件方面：任何涉及键盘或焦点行为的部分，必须使用可访问的组件原语（Base UI、React Aria、Radix）；必须优先使用项目已有的组件原语；绝不在同一交互面上混用不同原语体系；若与现有技术栈兼容，新原语建议优先选择 Base UI；纯图标按钮必须添加 aria-label；除非明确要求，绝不手工重建键盘或焦点行为。
交互方面：破坏性或不可逆操作必须使用 AlertDialog；加载状态建议使用结构化骨架屏；绝不使用 h-screen，应使用 h-dvh；固定元素必须尊重 safe-area-inset；错误必须显示在操作发生的位置附近；绝不在 input 或 textarea 中阻止粘贴。
动画方面：除非明确要求，绝不添加动画；只能对合成器属性（transform、opacity）做动画；绝不对布局属性（width、height、top、left、margin、padding）做动画；应避免对绘制属性（background、color）做动画，除非是小型局部 UI（文本、图标）；入场建议使用 ease-out；交互反馈绝不超过 200ms；循环动画在离屏时必须暂停；必须尊重 prefers-reduced-motion；除非明确要求，绝不引入自定义缓动曲线；应避免对大图或全屏表面做动画。
排版方面：标题必须使用 text-balance，正文/段落必须使用 text-pretty；数据必须使用 tabular-nums；密集 UI 建议使用 truncate 或 line-clamp；除非明确要求，绝不修改字距（tracking-）。
布局方面：必须使用固定的 z-index 层级（不使用任意 z-x）；方形元素建议使用 size-x 而非 w-x + h-x。
性能方面：绝不对大面积的 blur() 或 backdrop-filter 表面做动画；绝不在非活动动画之外应用 will-change；绝不用 useEffect 处理任何可表达为渲染逻辑的事情。
设计方面：除非明确要求，绝不使用渐变；绝不使用紫色或多色渐变；绝不将发光效果作为主要可供性；除非明确要求，建议使用 Tailwind CSS 默认阴影层级；空状态必须给出一个明确的下一步操作；每个视图建议只使用一种强调色；在引入新颜色前，建议优先使用已有主题或 Tailwind CSS 颜色令牌。
适用场景为前端界面与组件开发、AI 智能体辅助编码时的 UI 规范约束。限制方面：该技能为约束性规范，具体项目适配、版本兼容与实现细节需结合实际情况判断；资料未提供安装命令、收费与价格、平台支持范围等信息。