frontend-ui-engineering

Use native interactive elements like button instead of div with onClick, add aria-label to icon-only controls, associate labels with form inputs via htmlFor, and manage focus when dialogs open. Verify by tabbing through the page and testing with a screen reader.

Colocate each component with its tests, stories, hooks, and types in a single folder. Separate data-fetching container components from presentational components, prefer composition over heavy configuration props, and split components exceeding roughly 200 lines.

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, React Query or SWR 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. Avoid this by using the project's actual color palette, a consistent spacing scale, semantic color tokens, content-first layouts, and realistic placeholder content.

Design mobile-first, then add breakpoints for larger screens, such as Tailwind's sm and lg grid column utilities. Test layouts at 320px, 768px, 1024px, and 1440px widths to confirm content reflows without overflow or broken hierarchy.

Use skeleton placeholders shaped like the expected content when loading lists, cards, or page sections, since they preserve layout and reduce perceived wait time. Reserve spinners for short indeterminate actions like button submissions.