frontend-ui-engineering

Use native interactive elements like <button> instead of <div> with onClick, since they are focusable by default. If a custom element is unavoidable, add role="button", tabIndex={0}, and handle Enter and Space key events explicitly.

Use the project's actual color palette instead of purple gradients, apply consistent border-radius and spacing from the design system scale, and build content-first layouts rather than stock card grids. Replace placeholder copy with realistic content to reveal layout issues.

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 Tailwind's mobile-first breakpoint classes such as grid-cols-1, sm:grid-cols-2, and lg:grid-cols-3. Layouts should be tested at 320px, 768px, 1024px, and 1440px widths to confirm responsive behavior.

Skeleton loaders preserve the page layout during loading, reducing layout shift and giving users a preview of incoming content. Spinners are appropriate only for small inline actions, not for content regions.

Split components that exceed roughly 200 lines or handle multiple responsibilities. Separate data fetching containers from presentational components, and extract custom hooks when state logic becomes complex.