用途:baseline-ui 用于快速“去杂乱”UI 代码,修复间距、层级、排版和小型布局问题,适合界面需要一次快速清理或润色时使用。它提供一套有主见的基线约束,但现有产品设计、无障碍要求、框架选择和用户明确偏好优先,不应为满足清单而迁移技术栈或新增依赖。
主要能力与约束:技术栈方面要求使用 Tailwind CSS 默认值、需要 JS 动画时用 motion/react、类逻辑用 cn(clsx + tailwind-merge)。组件方面要求键盘或焦点行为使用无障碍原语(Base UI、React Aria、Radix),优先项目已有原语,同一交互面不混用原语系统,图标按钮加 aria-label。交互方面破坏性操作使用 AlertDialog,加载用结构骨架,用 h-dvh 而非 h-screen,固定元素尊重 safe-area-inset,错误就近显示,不阻止粘贴。动画方面非明确要求不加动画,只动画 transform 与 opacity,交互反馈不超过 200ms,尊重 prefers-reduced-motion。排版要求标题用 text-balance、正文用 text-pretty、数据用 tabular-nums。布局要求固定 z-index 尺度。设计上非明确要求不用渐变、不用紫色或多色渐变、不用发光作为主要可供性,空状态给出一个明确下一步。
使用方式:在对话中输入 /baseline-ui 将约束应用到本次 UI 工作;输入 /baseline-ui <file> 会对照全部约束审查该文件,并输出违规处(引用具体行或片段)、原因(一句话)和具体修复建议(代码级)。
限制:仅在任务与上游来源及本地项目上下文明确匹配时使用;应用变更前需验证命令、生成代码、依赖、凭据和外部服务行为;示例不能替代环境相关测试、安全审查,破坏性或高成本操作需用户批准。