Enforces design system consistency when building UI components. Use when creating React/Vue/Svelte components, styling with Tailwind/CSS, or when the user mentions design tokens, component patterns, or UI consistency.
Ensure consistent, accessible UI components that follow design system principles.
Before writing any component:
Always use semantic naming over raw values:
// Good - semantic tokens
className="text-primary bg-surface-elevated shadow-md"
// Bad - hardcoded values
className="text-blue-600 bg-white shadow-[0_4px_6px_rgba(0,0,0,0.1)]"
interface ButtonProps {
variant?: 'primary' | 'secondary' | 'ghost';
size?: 'sm' | 'md' | 'lg';
disabled?: boolean;
children: React.ReactNode;
}
// Prefer composition over prop explosion
<Card>
<Card.Header>Title</Card.Header>
<Card.Body>Content</Card.Body>
<Card.Footer>Actions</Card.Footer>
</Card>
Use consistent spacing based on a scale (typically 4px base):
gap-1 = 4pxgap-2 = 8pxgap-4 = 16pxgap-6 = 24pxgap-8 = 32pxUse semantic typography classes:
text-xs - Caption, labelstext-sm - Body small, secondary texttext-base - Body defaulttext-lg - Body large, emphasistext-xl to text-4xl - Headings| Purpose | Light Mode | Dark Mode |
|---|---|---|
| Primary action | bg-blue-600 | bg-blue-500 |
| Surface | bg-white | bg-gray-900 |
| Elevated | bg-gray-50 | bg-gray-800 |
| Border | border-gray-200 | border-gray-700 |
| Text primary | text-gray-900 | text-white |
| Text secondary | text-gray-600 | text-gray-400 |
Before completing a component, verify:
dark: variants