frontend-ui-engineering

Use semantic HTML elements like button instead of div, 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.

Replace default purple/indigo palettes, excessive gradients, and rounded-2xl corners with the project's actual design system tokens. Use realistic content instead of lorem ipsum, consistent spacing scales, and purpose-driven layouts rather than stock card grids.

Choose the simplest option that fits: useState for local UI state, lifted state for 2-3 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 Tailwind breakpoints such as grid-cols-1 scaling to sm:grid-cols-2 and lg:grid-cols-3. Layouts should be tested at 320px, 768px, 1024px, and 1440px widths.

A div with onClick is not keyboard focusable and lacks built-in Enter/Space key handling, breaking accessibility. A native button element provides focus, key events, and screen reader semantics for free.

Split components exceeding roughly 200 lines, when props are drilled more than three levels deep, or when data fetching and presentation are mixed. Separate container components that fetch data from presentational components that render it.