UI Component Skill

Component Design Principles

1. Design Token Integration

Use CSS custom properties from design tokens:

// ✅ Use CSS variables
const variantStyles = {
  primary: "bg-primary text-primary-foreground hover:bg-primary-hover",
  secondary: "bg-secondary text-secondary-foreground hover:bg-secondary-hover",
}