介绍
# UI Skills
在使用 Agent 构建更好的界面时的规范性约束。
## 技术栈
- 必须在自定义值之前使用 Tailwind CSS 默认值（间距、圆角、阴影） - 必须在需要 JavaScript 动画时使用 `motion/react`（原名 `framer-motion`） - 应该在 Tailwind CSS 中使用 `tw-animate-css` 处理入场动画和微交互 - 必须使用 `cn` 工具函数（`clsx` + `tailwind-merge`）处理 class 逻辑
## 组件
- 对于任何具有键盘或焦点行为的内容，必须使用可访问的组件原语（`Base UI`、`React Aria`、`Radix`） - 必须优先使用项目现有的组件原语 - 永远不要在同一交互界面内混用原语系统 - 如果与技术栈兼容，应该优先使用 [`Base UI`](https://base-ui.com/react/components) 作为新原语 - 必须为仅包含图标的按钮添加 `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 颜色 token