react

Requirements

• Always use destructured props in function parameters
• Define TypeScript types inline with the destructured props
• Avoid creating separate interfaces for component props
• Avoid non-destructured props that require additional destructuring inside the component
• Use available UI components from the component library
• Use CSS variables from globals.css for consistent theming
• Use Tailwind v4 syntax (see Tailwind v4 Syntax)
• DO NOT add icon margin in Button, DropdownMenuItem: use gap-2 instead
• Use useEffectEvent to extract non-reactive logic from Effects (see Separating Events from Effects)
• NEVER suppress the dependency linter with eslint-disable - use useEffectEvent instead
• Use custom breakpoint syntax for responsive design (see App-Specific Rules)

Tailwind v4 Syntax

• Inline opacity: Use / for opacity (bg-black/50 text-white/80)
  • v3: bg-black bg-opacity-50 text-white text-opacity-80
  • Removed: bg-opacity-*, text-opacity-*, border-opacity-*