UI 技能

为使用智能体构建更好界面而制定的指导性约束。

技术栈

• 在使用自定义值之前，必须优先使用 Tailwind CSS 的默认值（间距、圆角、阴影）
• 必须使用motion/react（前身为framer-motion）来处理需要 JavaScript 动画的情况
• 在 Tailwind CSS 中，对于入场动画和微动画，建议使用tw-animate-css 必须使用
• cn工具函数（clsx与tailwind-merge的组合）来处理类名逻辑组件

对于任何涉及键盘或焦点行为的组件，必须使用具备无障碍访问功能的基础组件（例如

• Base UI、,React Aria,Radix)
• **必须** 优先使用项目中现有的组件基元
• **严禁** 在同一交互界面内混合使用不同的基元系统
• **应** 优先考虑Base UI作为新的基元，如果它与技术栈兼容
• **必须** 为纯图标按钮添加aria-label属性
• **严禁** 手动重建键盘或焦点行为，除非有明确要求

交互

• **必须** 使用AlertDialog来处理破坏性或不可逆的操作
• **应** 为加载状态使用结构化的骨架屏
• **严禁** 使用h-screen，应使用h-dvh
• **必须** 遵循安全区域插入对于固定元素
• 必须在操作发生位置旁边显示错误
• 切勿阻止粘贴到输入框或文本域元素中

动画

• 除非明确要求，切勿添加动画
• 必须仅对合成器属性进行动画处理（变换、不透明度）
• 切勿对布局属性进行动画处理（宽度、高度、顶部、左侧、边距、填充)
• 应避免对绘制属性（背景、颜色）进行动画处理，除非是针对小范围的局部UI（如文本、图标）
• 在元素进入时应使用缓出效果对于交互反馈，时长
• 绝不应超过200毫秒当元素离开屏幕时，必须暂停循环动画
• 必须尊重
• 偏好减少运动设置除非明确要求，否则绝不引入自定义缓动曲线
• 应避免对大图像或全屏表面进行动画处理
• 排版

对于标题必须使用

• 文本平衡对于正文/段落则使用文本美化 text-prettyfor body/paragraphs
• 必须使用等宽数字字体处理数据
• 应当使用截断或多行截断处理密集界面
• 禁止修改字符间距(字距调整) 除非明确要求

布局

• 必须使用固定的层级索引尺度（禁止随意使用z-x）
• 应当使用尺寸-x处理方形元素，而非宽度-x加高度-x

性能

• 禁止对大面积元素添加动画模糊()或背景滤镜表面
• 切勿应用will-change在活跃动画之外
• 切勿使用useEffect处理任何可以表达为渲染逻辑的内容

设计

• 除非明确要求，否则切勿使用渐变
• 切勿使用紫色或多色渐变
• 切勿将发光效果用作主要交互提示
• 除非明确要求，否则应使用Tailwind CSS默认阴影尺度
• 必须为空白状态提供一个明确的下一个操作
• 应将强调色的使用限制在每个视图一个
• 在引入新颜色标记前，应使用现有主题或Tailwind CSS颜色标记