frontend-ui-engineering

Use useState for component-specific UI state, lift state for 2-3 sibling components, and Context for read-heavy values like theme or auth. Choose server state libraries like React Query for remote data and Zustand or Redux only for complex client state shared app-wide.

Colocate everything in a component folder: the implementation file, tests, Storybook stories, custom hooks for complex state, and component-specific types. Separate data fetching containers from presentational components and prefer composition over configuration.

WCAG 2.1 AA requires a 4.5:1 contrast ratio for normal text and 3:1 for large text. Use semantic color tokens like text-primary and bg-surface rather than raw hex values, and never rely solely on color to convey meaning.

Trap focus inside dialogs while they are open and move focus programmatically when content changes. Prefer native button elements over div onClick handlers, and add ARIA labels to interactive elements lacking visible text.

AI defaults to purple palettes, excessive gradients, uniform rounded corners, and stock card grids. Fix this by using the project's actual design tokens, consistent spacing scales, realistic content instead of lorem ipsum, and purpose-driven layouts.

Use skeleton loading for content areas, matching the skeleton shape to the real layout with a shimmer effect rather than blinking. Spinners are acceptable only for short indeterminate actions, while optimistic updates improve perceived speed for mutations.