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. Prefer composition over configuration props, keep components under 200 lines, and separate data-fetching container components from presentational components.

Choose the simplest option that fits: useState for local UI state, lifted state for a few siblings, Context for read-heavy values like theme or auth, URL search params for shareable filters, and React Query or SWR for server data.

Yes, 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 or information.

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

Test at 320px, 768px, 1024px, and 1440px widths. Design mobile-first with a single-column layout, then expand to multi-column grids at larger breakpoints using responsive utility classes.