popiart-website-new/.cursor/skills/react-best-practices/SKILL.md

description	alwaysApply
React best practices	true

React Architecture

• Use functional components only
• Use hooks instead of class components
• Keep components focused and small
• Extract reusable logic into custom hooks
• Prefer composition over inheritance

TypeScript

• Do not use any
• Define explicit props interfaces
• Prefer type inference when possible
• Use utility types instead of duplicated types

State Management

• Keep state as local as possible
• Avoid unnecessary global state
• Avoid deeply nested props drilling
• Use useReducer for complex state logic

Performance

• Use useMemo only for expensive calculations
• Do not overuse useCallback
• Avoid premature optimization
• Avoid unnecessary re-renders

Effects

• Avoid unnecessary useEffect
• Do not derive state inside useEffect
• Keep effects focused and clean

Component Design

• Keep JSX readable
• Avoid large render blocks
• Extract complex UI into subcomponents
• Use semantic naming

Styling

• SCSS nesting must follow DOM structure
• Avoid deeply nested selectors
• Use semantic class names

i18n

• Do not hardcode user-facing text
• All UI text must support i18n

Code Quality

• Prefer early return
• Avoid duplicated logic
• Keep files maintainable
• Prioritize readability over abstraction