以 skill 自身的术语
Baseline UI 是一个审查类 skill,通过强制执行一套明确的 UI 基线来阻止代码库中出现 AI 生成的界面粗糙感。它面向使用 React primitive 的 Tailwind CSS 项目,可作为对话中所有 UI 工作的常驻约束安装,也可作为文件级审查流程使用。
它的独特之处在于词汇的精确性:它明确指出应使用或避免的具体 utility 与 prop,从用 h-dvh 替代 h-screen、为标题使用 text-balance,到仅使用合成器动画且时长上限为 200ms、禁止使用任意 z-index 值。当界面需要快速清理或打磨时,可使用它。
它产出什么
- 用一句话解释每条违规为何重要。
- 针对每项发现给出具体到代码层面的修复方案。
工作方式
- 01将其作为整段对话的约束集来调用
直接运行该命令,会将此文件中的所有约束应用于该对话中进行的所有 UI 工作,而不仅是某一个文件。
- 02或将其指向单个文件
传入一个文件目标会将 skill 切换为审查模式,用下方列出的所有约束对该文件进行检查。
- 03返回一份分三部分的违规报告
每项发现都会引用违规代码片段,用一句简短的话说明其重要性,并给出代码层面的修复方案。
- 04按顺序逐一处理各约束组
该文件将规则组织为 Stack、Components、Interaction、Animation、Typography、Layout、Performance 和 Design,每组内混合了 MUST、SHOULD 和 NEVER 条目。