用途
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-）；方形元素应使用 size- 而非 w-* 加 h-*。
- 性能：绝不对大面积 blur() 或 backdrop-filter 表面做动画；绝不在非活动动画之外应用 will-change；绝不用 useEffect 表达本可作为渲染逻辑的内容。
- 设计：除非被明确要求，绝不使用渐变；绝不使用紫色或多色渐变；绝不把发光效果作为主要可供性；除非被明确要求，应使用 Tailwind CSS 默认阴影层级；空状态必须给出一个明确的下一步操作；每个视图的强调色使用应限制为一种；引入新颜色前应优先使用已有主题或 Tailwind CSS 颜色令牌。
使用方式
/ui-skills：将上述约束应用到本次对话中的任何 UI 工作。/ui-skills <file>：针对指定文件逐条对照全部约束进行审查，并输出三部分内容：违规项（引用确切的代码行或片段）、为什么重要（一句简短说明）、具体修复（代码级建议）。
适用场景
适合在 AI 辅助的前端界面开发流程中使用，尤其是需要统一技术栈选型、可访问性、动画性能与视觉规范的项目。也可作为代码审查清单，对已有 UI 文件做规则化检查。
限制
资料未提供该技能的具体安装方式、依赖版本、支持的框架范围、收费模式或平台信息，暂未提供。规则本身为“有倾向的约束”，部分条目允许在“明确要求”或“已有自定义值”时例外，实际执行需结合项目现状判断。