
关于
验证动画时长、强制排版比例、检查组件无障碍性,并防止 Tailwind CSS 项目中的布局反模式。适用于构建 UI 组件、审查 CSS 工具类、样式化 React 视图或强制设计一致性。
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颜色令牌
限制
- 仅在任务明确匹配上述范围时使用此技能。
- 不要将输出视为环境特定验证、测试或专家审查的替代品。
- 如果缺少必需的输入、权限、安全边界或成功标准,请停下来要求澄清。
兼容工具
Claude CodeCursor
标签
前端开发