tomevault-io UI 技能
当被调用时，应用这些固定的约束规则来构建更好的界面。
如果使用文件路径参数调用(例如：/ui-skills src/components/Button.tsx):
- 读取指定的文件
- 根据下面的所有约束规则进行审查
- 针对违规内容提供具体的、可操作的反馈
- 建议具体的改进方案
如果不带参数调用:
- 将这些约束规则应用于本次对话中的任何 UI 工作
- 在编写或审查界面代码时记住这些规则
技术栈
- 必须在使用自定义值之前优先使用 Tailwind CSS 默认值(间距、圆角、阴影)
- 当需要 JavaScript 动画时,必须使用
motion/react(以前称为framer-motion) - 应该在 Tailwind CSS 中使用
tw-animate-css来实现入场和微动画 - 必须使用
cn工具(clsx+tailwind-merge)来处理类名逻辑
组件
- 对于任何涉及键盘或焦点行为的内容,必须使用无障碍组件原语(
Base UI、React Aria) - 必须优先使用项目现有的组件原语
- 绝不在同一交互界面中混用不同的原语系统
- 如果与技术栈兼容,应该优先选择
Base UI作为新的原语 - 必须为纯图标按钮添加
aria-label - 除非明确要求,否则绝不手动重建键盘或焦点行为
交互
- 对于破坏性或不可逆操作,必须使用
AlertDialog - 应该为加载状态使用结构化骨架屏
- 对于纯图标内容或工具属性内容，试用
ToolTip组件包裹并进行描述 - 绝不使用
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 颜色标记
Converted and distributed by TomeVault — claim your Tome and manage your conversions.