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