baseline-ui

基线 UI

强制执行一套有明确主张的 UI 基线，以避免 AI 生成的界面杂乱无章。

使用方法

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

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

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

技术栈

• 除非已存在自定义值或另有明确要求，否则 MUST 使用 Tailwind CSS 默认值
• 需要 JavaScript 动画时 MUST 使用 motion/react（以前称为 framer-motion）
• SHOULD 使用 tw-animate-css 实现 Tailwind 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）添加动画
• SHOULD 避免对绘制属性（background、color）添加动画，小范围局部 UI（文本、图标）除外
• 入场动画 SHOULD 使用 ease-out
• 交互反馈时长 NEVER 超过 200ms
• 循环动画在视口外时 MUST 暂停
• SHOULD 遵循 prefers-reduced-motion
• 除非另有明确要求，NEVER 引入自定义缓动曲线
• SHOULD 避免对大型图像或全屏界面添加动画

字体排版

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

布局

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

性能

• NEVER 对大型 blur() 或 backdrop-filter 界面添加动画
• NEVER 在动画未激活时应用 will-change
• 对于可以用渲染逻辑实现的内容，NEVER 使用 useEffect

设计

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