Tailwind乱写样式被review打回？这个Skill让你的代码一次过🔥-Skill优仓

这个Skill是干嘛的

做过Mastra Playground UI开发的同学应该都懂那种痛——Tailwind类名随手一写，设计token用错了，组件自己造了一个，结果review被打回来改三遍。tailwind-best-practices这个Skill就是专门解决这个问题的，它把Mastra Playground UI的Tailwind样式规范全部固化成可执行的规则，让AI编程助手在你写代码的时候就帮你把关，而不是等到review才发现问题。

核心功能

这个Skill覆盖了3大类、共5条规则，按影响程度排了优先级，AI会优先处理最关键的问题。

组件复用强制检查（CRITICAL）：只允许使用@playground-ui/ds/components/下已有的组件，禁止在ds/目录下新建组件。这条规则直接杜绝了组件库碎片化的问题。
Design Token合规校验（CRITICAL）：所有token必须来自@playground-ui的tailwind.config.ts，同时禁止任何人去修改这个配置文件。token漂移的问题从根源上被锁死。
ClassName使用规范（HIGH）：除了height和width，禁止使用任意值（arbitrary values）。DS组件上也不允许传className，只有DialogContent和Popover可以接受h-/w-这两个例外。

规则本身不复杂，但在实际开发中很容易在赶进度的时候忽略，这个Skill的价值就在于把这些规范变成AI的”本能”。

适用平台

tailwind-best-practices完美适配当前主流的AI编程助手。无论你用的是Cursor、GitHub Copilot、Claude Code，还是OpenAI Codex、Gemini Code Assist，甚至是国内的文心快码、腾讯云CodeBuddy、华为云CodeArts，把这个Skill加载进去之后，AI就能理解你项目的设计系统约束，生成的代码直接符合规范，不再需要你手动对照文档逐条检查。

对于packages/playground-ui和packages/playground这两个包的开发者来说，这个Skill相当于给AI装了一个专属的”代码审查员”，上下文理解能力直接拉满。

实操代码示例

下面是几个典型的对比场景，一眼就能看出规范和不规范的区别：

❌ 错误写法——使用了任意值和自定义组件：

// 禁止：arbitrary value
<div className='w-[347px] bg-[#1a1a2e]'>...</div>

// 禁止：在ds/目录新建组件
// ds/components/MyNewButton.tsx ← 不允许创建这个文件

✅ 正确写法——使用token和已有组件：

// 正确：使用tailwind.config.ts中定义的token
<div className='w-full bg-surface-1'>...</div>

// 正确：复用已有DS组件
import { Button } from '@playground-ui/ds/components/Button'

// 正确：DialogContent可以接受h-/w-
<DialogContent className='w-[600px]'>...</DialogContent>

如果需要查找某类规则，可以直接用grep快速定位：

grep -l 'component' references/rules/
grep -l 'token' references/rules/
grep -l 'className' references/rules/

优势分析

市面上有很多Tailwind相关的lint工具，但tailwind-best-practices的定位不一样。它不是通用的Tailwind规范，而是专门为Mastra Playground UI量身定制的设计系统约束，这意味着它理解你项目的具体组件库结构和token体系，而不是给你一堆通用建议。

规则按影响程度排了优先级，AI处理时会先解决最关键的问题，不会在低优先级的细节上浪费时间。
规则文件按类别组织在references/rules/目录下，方便团队扩展和维护，不是一个黑盒。
同时覆盖”写新代码”和”重构旧代码”两个场景，不只是代码生成工具，也是重构助手。

应用场景

新人上手：刚加入Mastra项目的开发者不需要把设计规范文档背一遍，AI会在写代码时实时提示。
快速迭代：赶需求的时候最容易出现token乱用、组件随手造的情况，这个Skill帮你在源头把关。
代码重构：存量代码里有大量不规范的样式写法，用AI批量重构时加载这个Skill，输出结果直接符合规范。
Code Review辅助：reviewer可以让AI对照这个Skill检查PR，减少人工逐行核对的时间。

最佳实践

用好这个Skill有几个关键点值得注意。首先，不要试图修改tailwind.config.ts来”适配”你的需求，规则明确禁止这个操作，正确做法是和设计团队沟通，通过正式流程更新token。

其次，DialogContent和Popover的className例外规则是有原因的——这两个组件需要根据内容动态调整尺寸，但也只允许传h-和w-，其他样式覆盖依然不允许。搞清楚例外的边界，避免把例外当成突破口。

另外，在团队协作场景下，建议把这个Skill的加载方式写进项目的CONTRIBUTING.md，让每个贡献者的AI工具都使用同一套规范，而不是靠个人自觉。

如果你在管理多个项目的Skill资源，Skill优仓是个不错的统一管理入口，把团队用到的各类Skill集中存放、按需取用，比散落在各个repo里好维护得多。Skill优仓上也有大量类似的工程化Skill可以直接复用，不用每个项目都从零写规范。

文章版权归作者所有，未经允许请勿转载。

THE END

Tailwind乱写样式被review打回？这个Skill让你的代码一次过🔥