---

name: baseline-ui description: 验证动画时长、强制排版比例、检查组件无障碍性，并防止Tailwind CSS项目中的布局反模式。在构建UI组件、审查CSS工具类、样式化React视图或强制设计一致性时使用。 risk: unknown source: community

Baseline UI

强制执行固执己见的UI基线，防止AI生成的界面粗制滥造。

何时使用

• 你正在构建或审查基于Tailwind的UI，并希望对无障碍性、动效、排版和布局有严格的基线。
• 任务是在通用或粗糙的AI生成界面决策扩散到代码库之前阻止它们。
• 你需要具体的UI约束来应用于文件审查或正在进行的前端实现。

如何使用

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

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

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

技术栈

• 必须使用Tailwind CSS默认值，除非自定义值已存在或被明确要求
• 需要JavaScript动画时必须使用 motion/react（前身为 framer-motion）
• 应该使用 tw-animate-css 用于Tailwind 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颜色令牌

限制

• 仅在任务明确匹配上述范围时使用此技能。
• 不要将输出视为环境特定验证、测试或专家审查的替代品。
• 如果缺少必需的输入、权限、安全边界或成功标准，请停下来要求澄清。