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.

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

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 gradients, excessive rounding, uniform card grids, and oversized padding. Avoid this by using the project's actual color palette, consistent spacing scale, design-system border radii, and realistic content instead of placeholder text.

Test at 320px, 768px, 1024px, and 1440px using a mobile-first approach. Start with a single-column layout and expand with responsive utilities like sm:grid-cols-2 and lg:grid-cols-3 as screen width increases.