---
description: UI Best Practices
globs: packages/design-system/**/*.(ts|tsx)
---
- Use Tailwind CSS 4
- Use Shaden UI components with proper composition and customization
- Leverage Radix UI primitives for accessible interactive components
- Follow Tailwind CSS class naming conventions and utility patterns
- Implement mobile-first responsive design with Tailwind breakpoints
- Maintain consistent spacing and layout using Tailwind's spacing scale
- Use Tailwind's color system for consistent theming
- Implement dark mode support using Tailwind's dark variant
- Ensure components are accessible following WCAG 2.2 guidelines
- Keep component styles modular and reusable
- Optimize component bundle size through proper code splitting