新闻详情

新闻详情

首页 / 资讯中心 / 详情

【研发类-前端开发Skills】baseline-ui 技能

发布时间:2026/9/29 6:51:06来源:尧图网络
【研发类-前端开发Skills】baseline-ui 技能
验证动画持续时间、强制排版比例、检查组件可访问性并防止Tailwind CSS项目中的布局反模式。适用于构建UI组件、审查CSS实用程序、样式化React视图或强制设计一致性。技能概述baseline-ui 技能强制执行有主见的UI基线以防止AI生成的界面混乱。该技能为可访问性、运动、排版和布局提供严格的基线约束。下载地址https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/baseline-ui触发条件构建或审查基于Tailwind的UI需要可访问性、运动、排版和布局的严格基线防止通用或草率的AI生成界面决策在代码库中传播需要将具体的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应该避免动画绘制属性background、color小局部UI除外文本、图标应该在入场时使用ease-out永不超过200ms用于交互反馈必须在屏幕外暂停循环动画应该尊重prefers-reduced-motion永不引入自定义缓动曲线除非明确请求应该避免动画大图像或全屏表面排版规则必须为标题使用text-balance为正文/段落使用text-pretty必须为数据使用tabular-nums应该为密集UI使用truncate或line-clamp永不修改letter-spacingtracking-*除非明确请求布局规则必须使用固定的z-index比例无任意z-*应该为方形元素使用size-*而不是w-* h-*性能规则永不动画大blur()或backdrop-filter表面永不在活动动画之外应用will-change永不使用useEffect处理可以表示为渲染逻辑的任何内容设计规则永不使用渐变除非明确请求永不使用紫色或多色渐变永不使用发光效果作为主要启示应该使用Tailwind CSS默认阴影比例除非明确请求必须为空状态提供一个明确的下一步操作应该将强调色使用限制为每个视图一个应该在引入新颜色之前使用现有主题或Tailwind CSS颜色标记最佳实践可访问性优先使用可访问组件原语性能优先仅动画transform和opacity一致性使用Tailwind默认值和固定比例用户体验尊重用户偏好和设备限制简洁设计避免不必要的装饰效果错误处理在操作位置显示错误加载状态使用结构骨架注意事项限制仅在任务明确匹配上述范围时使用此技能不要将输出视为环境特定验证、测试或专家审查的替代品如果缺少必需的输入、权限、安全边界或成功标准请停止并请求澄清
网站建设高端定制企业官网
RELATED

相关资讯

更多精彩内容,欢迎继续阅读

较早相关资讯

最新相关资讯

Token 烧钱?OpenClaw 这几个配置让我省了一半开销:TaoToken 统一 Key 接入与 config.toml 骨架实测 2026/9/29 8:37:32

Token 烧钱?OpenClaw 这几个配置让我省了一半开销:TaoToken 统一 Key 接入与 config.toml 骨架实测

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

阅读更多 →
Avalonia图表开发实战:用LiveCharts2搞定四类核心图表 2026/9/29 8:37:31

Avalonia图表开发实战:用LiveCharts2搞定四类核心图表

跨平台桌面端做数据可视化,这几年我踩的坑比写的代码都多。尤其是从 WPF 迁移到 Avalonia 之后,第一个头疼的问题就是图表:以前在 WPF 里用 WinForms 的 Chart 控件、或者老牌库,放到 Avalonia 里要么直接崩,要么渲染出…

阅读更多 →
vLLM 与 SGLang 架构决战:双引擎调度器与执行模型的底层解剖 2026/9/29 8:37:06

vLLM 与 SGLang 架构决战:双引擎调度器与执行模型的底层解剖

vLLM 与 SGLang 架构决战:双引擎调度器与执行模型的底层解剖在大语言模型(LLM)推理服务进入工业化成熟期的今天,vLLM 与 SGLang 已然成为高性能开源推理运行时(Inference Runtime)的绝代双骄。两者的核心目…

阅读更多 →
Agent之Tool–手写cursor 最小版本:用 TaoToken 统一 Key 跑通 Cline 配置骨架 2026/9/29 8:36:59

Agent之Tool–手写cursor 最小版本:用 TaoToken 统一 Key 跑通 Cline 配置骨架

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

阅读更多 →
OpenClaw 接入微信的保姆级教程:TaoToken 统一 Key 配置与 webhook 验证 2026/9/29 8:36:59

OpenClaw 接入微信的保姆级教程:TaoToken 统一 Key 配置与 webhook 验证

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

阅读更多 →
GitHub 46k+ Star 的 OpenMontage:Windows 上 AI 视频制作环境配置与验证 2026/9/29 8:36:59

GitHub 46k+ Star 的 OpenMontage:Windows 上 AI 视频制作环境配置与验证

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

阅读更多 →

今日资讯

本周资讯

本月资讯

看完文章仍有疑问?

联系尧图顾问,获取一对一建站咨询

立即免费咨询 📞 400-888-8888
📞 ✉