frontend-ui-engineering

Use semantic HTML elements like button instead of div for interactions, add aria-label to icon-only controls, and manage focus when dialogs open. Verify by tabbing through the page and testing with a screen reader against WCAG 2.1 AA criteria.

Start with useState for local UI state, lift state for 2-3 sibling components, and use Context for read-heavy values like theme or auth. Use URL search params for shareable filters, React Query for server data, and Zustand or Redux only for complex app-wide state.

Container components handle data fetching, loading, and error states, while presentational components only render props. Separating them keeps rendering logic testable and lets you swap data sources without changing the UI.

Yes, the guidance uses Tailwind-style utility classes for responsive mobile-first layouts and semantic tokens. The principles of spacing scales, type hierarchy, and color tokens apply regardless of the styling solution.

Models default to purple palettes, heavy gradients, uniform card grids, and oversized padding regardless of the actual design system. Avoiding these patterns and using the project's real tokens and spacing scale produces interfaces that match the product's identity.

Split components that exceed roughly 200 lines, handle multiple responsibilities, or require prop drilling deeper than three levels. Composition and focused single-purpose components keep the tree maintainable.