frontend-ui-engineering

Make every interactive element keyboard accessible using native elements like button, add ARIA labels to icon-only controls, manage focus when dialogs open, and never rely on color alone to convey state. Test by tabbing through the page and running axe-core checks.

Colocate component files, tests, and hooks in a single folder per component. 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, URL search params for shareable filters, React Query for server data, and Zustand or Redux only for complex app-wide state.

AI defaults to purple gradients, excessive rounding, uniform card grids, and oversized padding. Fix this by using the project's actual color palette, a consistent spacing scale, semantic color tokens, and content-first layouts instead of template patterns.

Use skeleton placeholders with aria-busy instead of spinners for content areas, and render meaningful empty states with an icon, explanation, and call-to-action. Apply optimistic updates with React Query mutations for perceived speed, rolling back on error.