frontend-ui-engineering

Use semantic HTML elements like button instead of div for interactions, 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 testing with a screen reader.

Choose the simplest approach: 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.

The AI aesthetic includes purple gradients, excessive border rounding, stock card grids, and oversized uniform padding. Avoid it by using the project's actual color palette, spacing scale, and border-radius tokens instead of inventing arbitrary values.

Yes, the examples use Tailwind utility classes with mobile-first responsive breakpoints like grid-cols-1 sm:grid-cols-2 lg:grid-cols-3. The same principles apply to any styling approach as long as spacing and color values come from a consistent design system scale.

Blank screens confuse users and hide failures. Every list or data view should render a meaningful empty state with a call to action, an error state with retry, and a skeleton loading state, so the interface communicates status at all times.

Split components exceeding roughly 200 lines, components doing both data fetching and rendering, or components passing props more than three levels deep. Separate container components that fetch data from presentational components that render it.