名称： ui-skills
描述： 一套用于通过智能体构建更优界面的、带有明确主张的约束规范。

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 进行文本截断
• 禁止 修改 letter-spacing（tracking- 类），除非有明确要求

布局

• 必须 使用固定的 z-index 层级体系（禁止随意使用 z-x）
• 应当 对正方形元素使用 size-x，而非 w-x + h-x

性能

• 禁止 对大面积使用 blur() 或 backdrop-filter 的表面进行动画处理
• 禁止 在非活动动画之外使用 will-change
• 禁止 对任何可以用渲染逻辑表达的内容使用 useEffect

设计

• 禁止 使用渐变，除非有明确要求
• 禁止 使用紫色或多色渐变
• 禁止 将发光效果作为主要的交互提示
• 应当 使用 Tailwind CSS 默认的阴影等级，除非有明确要求
• 必须 为空状态提供一个清晰的下一个操作指引
• 应当 将强调色的使用限制在每个视图中仅一种
• 应当 在引入新颜色之前，优先使用现有主题或 Tailwind CSS 的颜色令牌