SuperAPI AI 工具集

baseline-ui

通用与其它

查看项目

更新于 10-15 20:12

技能介绍

用途:Baseline UI 用于约束 AI 参与的前端 UI 工作,避免出现风格随意、可访问性差或动画滥用等界面问题。它可对整段对话中的 UI 工作应用规则,也可评审指定文件。

主要能力:涵盖技术栈、组件、交互、动画、排版、布局、性能和设计约束。例如要求优先使用 Tailwind CSS 默认值、使用 motion/react 处理 JavaScript 动画、使用 cn 工具处理类名逻辑;键盘与焦点行为须用可访问组件原语;图标按钮须有 aria-label;破坏性操作须用 AlertDialog;禁用 h-screen 改用 h-dvh;仅动画 transform 与 opacity,交互反馈不超过 200ms;标题用 text-balance,正文用 text-pretty,数据用 tabular-nums;固定 z-index 层级;避免渐变、发光和滥用 will-change 等。

使用方式:在对话中输入 /baseline-ui 应用约束;输入 /baseline-ui <file> 评审文件,输出违规位置、原因和代码级修复建议。

适用场景:使用 Tailwind CSS 与 React 生态的前端项目,尤其是需要 AI 辅助生成或修改 UI 代码时。

限制:规则带有明确倾向性,部分约束在特定项目或明确要求下可能不适用;资料未提供安装方式、收费信息或平台支持细节。