ui-skills

UI 技能

调用时，应用这些经过斟酌的约束，以构建更出色的界面。

使用方法

• /ui-skills
  在本次对话中的任何 UI 工作中应用这些约束。

• /ui-skills <file>
  根据以下所有约束审查该文件，并输出：

  • 违规项（引用准确的行或片段）
  • 重要原因（1 句简短说明）
  • 具体修复方法（代码级建议）

技术栈

• 除非已存在自定义值或有明确要求，否则必须使用 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）添加动画
• 除了小范围的局部 UI（文本、图标）外，应避免对绘制属性（background、color）添加动画
• 入场动画建议使用 ease-out
• 交互反馈时长绝不能超过 200ms
• 循环动画在元素移出视口时必须暂停
• 建议遵循 prefers-reduced-motion
• 除非有明确要求，否则绝不能引入自定义缓动曲线
• 建议避免对大型图片或全屏区域添加动画

排版

• 标题必须使用 text-balance，正文或段落必须使用 text-pretty
• 数据必须使用 tabular-nums
• 对于密集型 UI，建议使用 truncate 或 line-clamp
• 除非有明确要求，否则绝不能修改 letter-spacing（tracking-*）

布局

• 必须使用固定的 z-index 层级（不能使用任意的 z-*）
• 对于正方形元素，建议使用 size-*，而不是组合使用 w-* 和 h-*

性能

• 绝不能对大型 blur() 或 backdrop-filter 区域添加动画
• 除非动画正在进行，否则绝不能应用 will-change
• 任何可以通过渲染逻辑实现的内容，都绝不能使用 useEffect

设计

• 除非有明确要求，否则绝不能使用渐变
• 绝不能使用紫色渐变或多色渐变
• 绝不能将发光效果作为主要的交互提示
• 除非有明确要求，否则建议使用 Tailwind CSS 默认阴影层级
• 空状态必须提供一个明确的后续操作
• 建议每个视图只使用一种强调色
• 在引入新颜色前，建议优先使用现有主题或 Tailwind CSS 颜色令牌