SuperAPI AI 工具集

tailwind

前端与建站

查看项目

更新于 10-16 08:10

技能介绍

用途:审查代码库中的 Tailwind CSS 反模式并给出修复建议,属于代码审查类技能。

主要能力:强制六条规则——间距方向只用底部(禁止 mt-、pt-,改用 mb-、pb- 或 gap);宽高相等时用 size-* 替代 h-* 与 w-* 组合;移动优先的响应式写法;优先使用逻辑简写(如 m-4、py-2、px-4);动画使用 GPU 加速的 transform 属性;遵循 8px 栅格(有效类为 2、4、6、8、10、12、14、16、20、24、32)。

使用方式:先用 grep 命令审计代码,例如查找顶部间距 grep -rE '\bmt-[0-9]' --include=".tsx",查找冗余宽高对,以及查找 8px 栅格违规(奇数如 1、3、5、7 等)。随后列出文件路径、行号、当前代码与建议修复,再用编辑工具替换。输出格式包含顶部间距违规、冗余 h-/w-* 对、8px 栅格违规与汇总统计。

适用场景:React/JSX/TSX、HTML 项目中的 Tailwind 代码审查与重构。

限制:间距原则的完整定义位于 design-system-helper 代理,本技能只负责 Tailwind 语法层面;未提供安装命令、收费与平台支持等信息。