baseline-ui

Baseline UI

强制执行一套有主见的UI基线，防止AI生成的界面出现杂乱问题。

如何使用

• /baseline-ui
  将以下约束应用于本次对话中的所有UI工作。

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

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

技术栈

• 必须使用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-*）
• 对于正方形元素，应使用size-*代替w-* + h-*

性能

• 切勿对大型blur()或backdrop-filter表面进行动画
• 不要在非活跃动画之外应用will-change
• 不要使用useEffect处理任何可以用渲染逻辑表达的事情

设计

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