AgentSkillsCN

using-tailwind-design-tokens

严格遵循 globals.css 中定义的 Tailwind 设计令牌使用规范。适用于生成或审查 TSX/CSS 时使用，以防止硬编码颜色、间距、排版、圆角、阴影或内联样式。

SKILL.md
--- frontmatter
name: using-tailwind-design-tokens
description: >
  Enforces strict usage of Tailwind design tokens defined in globals.css.
  Use when generating or reviewing TSX/CSS to prevent hardcoded colors,
  spacing, typography, radius, shadows, or inline styles.

Tailwind Design Tokens

Always use Tailwind design tokens defined in @/styles/globals.css and never hardcode design values. If a token doesn't exist, add it to the design system first.

Core Principle

NEVER hardcode values. ALWAYS use design tokens.

  1. •Colors: Always use semantic color tokens (bg-primary, text-foreground, etc.)
  2. •Spacing: Use Tailwind spacing scale (p-4, m-6) or custom tokens (h-19, w-100)
  3. •Typography: Use Typography component or Tailwind text utilities (text-sm, text-base)
  4. •Radius: Use defined radius tokens (rounded-sm, rounded-md, rounded-lg)
  5. •New Values: Add to design system, never use arbitrary values in components
  6. •Inline Styles: Avoid for design values, use Tailwind classes
  7. •Exceptions: Only for one-off micro-adjustments, prefer scale when possible