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.

Colocate each component with its tests, stories, hooks, and types in a single folder. Separate container components that fetch data from presentational components that render UI, and prefer composition over heavily configured props.

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, the guidance uses Tailwind's mobile-first breakpoint utilities such as grid-cols-1 sm:grid-cols-2 lg:grid-cols-3. Layouts should be verified at 320px, 768px, 1024px, and 1440px widths.

Models default to purple palettes, excessive gradients, uniform rounded corners, and stock card grids. Avoid this by using the project's actual design tokens for color, spacing, and typography, and by writing realistic content instead of placeholder text.

Split components exceeding roughly 200 lines or handling multiple responsibilities. Warning signs include prop drilling deeper than three levels, inline styles with arbitrary pixel values, and missing loading, error, or empty states.