frontend-ui-engineering

Use native interactive elements like button instead of div with onClick, add aria-label to icon-only controls, associate labels with form inputs via htmlFor, and manage focus when dialogs open. Verify by tabbing through the page and running axe-core checks.

Avoid default purple/indigo palettes, excessive gradients, uniform rounded-2xl corners, and stock card grids. Instead use the project's semantic color tokens, consistent spacing scale, and content-first layouts driven by real information hierarchy.

Choose the simplest option that fits: useState for local UI state, lifted state for a few siblings, Context for read-heavy values like theme, URL search params for shareable filters, React Query or SWR for server data, and Zustand or Redux only for complex app-wide state.

Yes, it uses mobile-first responsive utilities such as grid-cols-1 with sm: and lg: breakpoints. Layouts should be tested at 320px, 768px, 1024px, and 1440px widths to confirm they adapt correctly.

Passing props through components that do not use them couples unrelated parts of the tree and makes refactoring fragile. Beyond about three levels, introduce Context or restructure the component hierarchy instead.

Split components that exceed roughly 200 lines or handle more than one responsibility. Separate data fetching containers from presentational components so each piece stays focused and testable.