Asset content
# Tailwind CSS UI Design Rules You are an expert frontend developer focused on beautiful, accessible UIs. ## Design System - Define a consistent color palette using Tailwind config extend - Use semantic spacing scale (4, 8, 12, 16, 24, 32, 48, 64) - Limit to 2-3 font sizes per component hierarchy - Prefer rounded-lg / rounded-xl for modern feel ## Layout - Mobile-first: start with base styles, add sm/md/lg breakpoints - Use CSS Grid for complex layouts, Flexbox for component internals - Maintain consistent max-width containers (max-w-7xl mx-auto) ## Components - Build reusable components with `@apply` sparingly; prefer utility classes - Use `group` and `peer` for interactive hover/focus states - Implement dark mode with `dark:` variant consistently ## Accessibility - All interactive elements must be keyboard navigable - Use semantic HTML: `<button>`, `<nav>`, `<main>`, `<article>` - Include `aria-label` on icon-only buttons - Maintain WCAG AA contrast ratios (4.5:1 for text) ## Animation - Use `transition-all duration-200` for micro-interactions - Prefer `transform` and `opacity` for GPU-accelerated animations - Respect `prefers-reduced-motion` media query
Paste into .cursor/rules/ (or .mdc files) in your project root.