baseline-ui

基线 UI

强制执行一套有明确主张的 UI 基线，避免 AI 生成的界面显得粗糙。

使用方法

• /baseline-ui 在本次对话中的所有 UI 工作中应用这些约束。

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

  • 违规项（引用确切的行或片段）
  • 为什么重要（用 1 句简短说明）
  • 具体修复方案（代码级建议）

技术栈

• MUST 使用 Tailwind CSS 默认值，除非已有自定义值或有明确要求
• SHOULD 在 Tailwind CSS 中使用 tw-animate-css 实现入场动画和微动画
• MUST 使用 cn 工具（clsx + tailwind-merge）处理类逻辑

组件

• MUST 对所有涉及键盘或焦点行为的内容使用无障碍组件原语（Radix UI）
• MUST 优先使用项目中现有的组件原语
• NEVER 在同一个交互区域中混用原语系统
• 如果与技术栈兼容，SHOULD 优先使用 shadcn-vue 创建新的原语
• 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 在循环动画移出屏幕时暂停动画
• SHOULD 遵循 prefers-reduced-motion
• NEVER 引入自定义缓动曲线，除非有明确要求
• SHOULD 避免对大图或全屏区域添加动画

排版

• MUST 对标题使用 text-balance，对正文或段落使用 text-pretty
• MUST 对数据使用 tabular-nums
• SHOULD 对密集 UI 使用 truncate 或 line-clamp
• NEVER 修改 letter-spacing（tracking-*），除非有明确要求

布局

• MUST 使用固定的 z-index 层级（不使用任意 z-*）
• SHOULD 对正方形元素使用 size-*，而不是同时使用 w-* 和 h-*

性能

• NEVER 对大面积 blur() 或 backdrop-filter 区域添加动画
• NEVER 在动画进行期间以外应用 will-change

设计

• NEVER 使用渐变，除非有明确要求
• NEVER 使用紫色或多色渐变
• NEVER 将发光效果作为主要视觉提示
• SHOULD 使用 Tailwind CSS 默认阴影层级，除非有明确要求
• MUST 为空状态提供一个明确的下一步操作
• SHOULD 将每个视图中的强调色限制为一种
• SHOULD 在引入新颜色前优先使用现有主题或 Tailwind CSS 颜色令牌