frontend-ui-engineering

Use semantic HTML elements like button instead of div, add ARIA labels to icon-only controls, manage focus when dialogs open, and ensure every interactive element works with keyboard alone. Test by tabbing through the page and running axe-core checks.

Colocate each component with its tests, stories, hooks, and types in a single folder. Separate container components that fetch data from presentational components that render UI, and prefer composition over heavily configured props.

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

Yes, Tailwind is mobile-first by default. Base classes apply to all screens, and prefixed variants like sm: and lg: apply at larger breakpoints. Test layouts at 320px, 768px, 1024px, and 1440px widths.

Models default to safe patterns like purple gradients, excessive border radius, uniform card grids, and oversized padding. Avoid this by using the project's actual color tokens, spacing scale, and type hierarchy instead of inventing values.

Common mistakes include clickable divs without keyboard handlers, missing labels on form inputs, color as the only state indicator, skipped heading levels, and blank screens instead of empty or error states. Each violates WCAG 2.1 AA requirements.