baseline-ui

baseline-ui 技能是前端开发架构的守护者，确保 UI 实现维持极高的无障碍性、性能与视觉一致性。专为现代 React 与 Tailwind CSS 项目的开发者与 AI 代理设计，通过系统化的组件构建与交互规则，消除了设计中的不一致（如随意的间距、不连贯的焦点状态与管理不当的动画），确保所有 UI 成果符合业界标准。

• 强制执行组件原始基准，使用 Radix UI、Base UI 或 React Aria 来实现键盘导航与屏幕阅读器兼容性。

• 实施严格的动画准则，优先使用复合属性 (transform, opacity) 并限制动画影响排版属性，以维持 60fps 的性能。

• 通过 'cn' 工具 (clsx + tailwind-merge) 标准化类逻辑，避免样式冲突并维护整洁的 CSS。

• 提供命令行界面 (/baseline-ui <file>)，针对指定文件自动审核是否符合规范，指出违规事项并提供具体修复建议。

• 规定无障碍设计模式，例如图标按钮必须包含 aria-label，并确保用户操作错误时有明确的显示逻辑。

• 确保响应式 UI 的安全性，强制使用 h-dvh 取代 h-screen，并正确遵循 safe-area-inset。

• 通过规范 text-balance、text-pretty 与固定 z-index 比例，统一字体排版与层级，防止设计失控。

• 适用于管理复杂的 Astro/React 项目 UI 开发，确保样式与性能的一致性。

• 在交互对话中使用 '/baseline-ui' 指令套用规范，使用 '/baseline-ui <file>' 进行具体的代码审计。

• 在 Tailwind CSS 4.x 与 Framer Motion 环境下执行效果最佳，应避免使用自定义曲线或大型排版动画。

• 确保所有交互反馈均保持在 200ms 延迟阈值内，以达成最佳用户体验。

• 严格禁止使用 'useEffect' 处理本应在渲染阶段完成的逻辑，以提升应用程序性能。