frontend-ui-engineering

Use native interactive elements like <button> instead of <div> with onClick, since they are focusable by default. If you must use a div, add role="button", tabIndex={0}, and handle both Enter and Space key events. Always verify by tabbing through the page.

Colocate component files (implementation, tests, stories, hooks) in a single folder, prefer composition over configuration props, and separate data-fetching container components from presentational components. Keep components under 200 lines and focused on one responsibility.

Use useState for local UI state, Context for read-heavy values like theme or auth, URL search params for shareable filters and pagination, React Query or SWR for remote server data, and Zustand or Redux only for complex client state shared app-wide.

WCAG 2.1 AA requires a 4.5:1 contrast ratio for normal text and 3:1 for large text. Use semantic color tokens rather than raw hex values, and never rely on color alone to convey state—pair it with icons or text.

AI defaults to purple/indigo palettes, excessive gradients, maximum border rounding, and stock card grids. Avoid this by using the project's actual design system tokens, consistent spacing scales, realistic content instead of lorem ipsum, and purpose-driven layouts.

Test at 320px, 768px, 1024px, and 1440px. Design mobile-first using progressive enhancement—for example, Tailwind's grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 pattern—rather than retrofitting desktop layouts for small screens.