tailwind-best-practices by mastra-ai/mastra
npx skills add https://github.com/mastra-ai/mastra --skill tailwind-best-practicesMastra Playground UI 的样式指南,包含 3 个类别共 5 条规则。规则按影响优先级排序,以指导自动化重构和代码生成。这些规则确保设计系统的一致性,防止令牌漂移,并维护组件库的完整性。
packages/playground-uipackages/playground在以下情况下参考本指南:
规则按影响优先级排序:
| 优先级 | 类别 | 影响 |
|---|---|---|
| 1 | 组件使用 | 关键 |
| 2 | 设计令牌 | 关键 |
| 3 | ClassName 使用 |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 高 |
组件使用:
@playground-ui/ds/components/ 的现有组件 (component-use-existing)ds/ 文件夹中创建新组件设计令牌:
@playground-ui 中 tailwind.config.ts 的令牌 (tokens-use-existing)tailwind.config.ts (tokens-no-modification)ClassName 使用:
height 和 width 外,不使用任意的 Tailwind 值 (classname-no-arbitrary)DialogContent 和 Popover 上的 h-/w- 外,不在 DS 组件上使用 className 属性 (classname-no-ds-override)包含代码示例的完整文档位于:
references/tailwind-best-practices-reference.md - 包含所有模式的完整指南references/rules/ - 按类别组织的单个规则文件要查找特定模式,请 grep 规则目录:
grep -l "component" references/rules/
grep -l "token" references/rules/
grep -l "className" references/rules/
references/rules/ 中的规则类别component-* - 组件使用规则(1 条规则)tokens-* - 设计令牌规则(2 条规则)classname-* - ClassName 使用规则(2 条规则)每周安装量
287
代码仓库
GitHub 星标
22.2K
首次出现
2026年1月21日
安全审计
安装于
opencode253
gemini-cli247
codex246
github-copilot243
cursor230
claude-code212
Styling guidelines for the Mastra Playground UI, containing 5 rules across 3 categories. Rules are prioritized by impact to guide automated refactoring and code generation. These rules ensure design system consistency, prevent token drift, and maintain component library integrity.
packages/playground-uipackages/playgroundReference these guidelines when:
Rules are prioritized by impact:
| Priority | Category | Impact |
|---|---|---|
| 1 | Component Usage | CRITICAL |
| 2 | Design Tokens | CRITICAL |
| 3 | ClassName Usage | HIGH |
Component Usage:
@playground-ui/ds/components/ (component-use-existing)ds/ folderDesign Tokens:
tailwind.config.ts in @playground-ui (tokens-use-existing)tailwind.config.ts (tokens-no-modification)ClassName Usage:
height and width (classname-no-arbitrary)className prop on DS components except h-/w- on DialogContent and Popover (classname-no-ds-override)Full documentation with code examples is available in:
references/tailwind-best-practices-reference.md - Complete guide with all patternsreferences/rules/ - Individual rule files organized by categoryTo look up a specific pattern, grep the rules directory:
grep -l "component" references/rules/
grep -l "token" references/rules/
grep -l "className" references/rules/
references/rules/component-* - Component usage rules (1 rule)tokens-* - Design token rules (2 rules)classname-* - ClassName usage rules (2 rules)Weekly Installs
287
Repository
GitHub Stars
22.2K
First Seen
Jan 21, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode253
gemini-cli247
codex246
github-copilot243
cursor230
claude-code212
Perl安全编程指南:输入验证、注入防护与安全编码实践
786 周安装