用途
ui-skills 是一套面向 AI 智能体的界面构建意见约束，用于在编写 UI 代码、实现设计方案或审查前端组件时应用。根据资料，它在 DevDocs 流程的开发阶段实现 UI 相关任务时生效。
语言约定
- 接受中文和英文提问。
- 始终使用中文回答。
技术栈约束
- 必须（MUST）优先使用 Tailwind CSS 默认值（间距、圆角、阴影），再考虑自定义值。
- 需要 JavaScript 动画时，必须（MUST）使用 motion/react（原 framer-motion）。
- 在 Tailwind CSS 中实现入场与微动画时，应当（SHOULD）使用 tw-animate-css。
- 类名逻辑必须（MUST）使用 cn 工具（clsx + tailwind-merge）。
组件约束
- 任何涉及键盘或焦点行为的部分，必须（MUST）使用无障碍组件原语（Base UI、React Aria、Radix）。
- 必须（MUST）优先使用项目已有的组件原语。
- 禁止（NEVER）在同一交互界面混用不同原语系统。
- 新原语若与技术栈兼容，应当（SHOULD）优先选择 Base UI。
- 纯图标按钮必须（MUST）添加 aria-label。
- 除非明确要求，禁止（NEVER）手动重建键盘或焦点行为。
交互约束
- 破坏性或不可逆操作必须（MUST）使用 AlertDialog。
- 加载状态应当（SHOULD）使用结构化骨架屏。
- 禁止（NEVER）使用 h-screen，应使用 h-dvh。
- 固定元素必须（MUST）尊重 safe-area-inset。
- 错误必须（MUST）展示在操作发生的位置附近。
- 禁止（NEVER）阻止 input 或 textarea 元素中的粘贴。
动画约束
- 除非明确要求，禁止（NEVER）添加动画。
- 必须（MUST）仅对合成属性（transform、opacity）做动画。
- 禁止（NEVER）对布局属性（width、height、top、left、margin、padding）做动画。
- 除小型局部 UI（文本、图标）外，应当（SHOULD）避免对绘制属性（background、color）做动画。
- 入场应当（SHOULD）使用 ease-out。
- 交互反馈禁止（NEVER）超过 200ms。
- 循环动画在离屏时必须（MUST）暂停。
- 必须（MUST）尊重 prefers-reduced-motion。
- 除非明确要求，禁止（NEVER）引入自定义缓动曲线。
- 应当（SHOULD）避免对大图片或全屏表面做动画。
排版约束
- 标题必须（MUST）使用 text-balance，正文/段落必须（MUST）使用 text-pretty。
- 数据必须（MUST）使用 tabular-nums。
- 密集 UI 应当（SHOULD）使用 truncate 或 line-clamp。
- 除非明确要求，禁止（NEVER）修改字距（tracking-）。
布局约束
- 必须（MUST）使用固定的 z-index 层级（禁止任意 z-x）。
- 方形元素应当（SHOULD）使用 size-x，而不是 w-x + h-x。
性能约束
- 禁止（NEVER）对大面积 blur() 或 backdrop-filter 表面做动画。
- 禁止（NEVER）在非活动动画之外应用 will-change。
- 禁止（NEVER）将可表达为渲染逻辑的内容使用 useEffect。
设计约束
- 除非明确要求，禁止（NEVER）使用渐变。
- 禁止（NEVER）使用紫色或多色渐变。
- 禁止（NEVER）将发光效果作为主要可操作提示。
- 除非明确要求，应当（SHOULD）使用 Tailwind CSS 默认阴影尺度。
- 空状态必须（MUST）提供一个明确的下一步操作。
- 每个视图应当（SHOULD）将强调色使用限制为一种。
- 在引入新颜色之前，应当（SHOULD）优先使用已有主题或 Tailwind CSS 颜色 token。
适用场景与限制
该 skill 适用于需要 AI 代理辅助完成前端 UI 编码、设计实现与组件审查的场景，尤其是使用 Tailwind CSS 与 React 相关生态的项目。其规则以 MUST/SHOULD/NEVER 分级，部分规则仅在明确请求时才放宽。资料未说明其收费、价格、平台支持范围或具体效果数据。