baseline-ui

基础 UI

适用场景

当你需要通过修复间距、层级、排版和细微布局问题，快速改善 UI 代码时，使用此技能。适用于需要快速清理或润色界面的情况。

此技能会为范围明确的润色工作应用一套有明确倾向的基线。现有产品设计、无障碍要求、框架选择和明确的用户偏好优先级更高；不要仅为满足此列表而迁移技术栈或添加依赖。

使用方法

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

• /baseline-ui <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 颜色令牌

示例

用户请求：

使用 @baseline-ui 检查此界面，找出影响最大的设计问题，并提出可直接实施的改进方案。

限制

• 仅当任务与其上游来源和本地项目上下文明确匹配时，才使用此技能。
• 应用更改前，请验证命令、生成的代码、依赖项、凭据和外部服务的行为。
• 不要将示例视为环境特定测试、安全审查，或执行破坏性或高成本操作前征得用户批准的替代方案。