frontend-ui-engineering

Use semantic HTML elements like button instead of div, add aria-label to icon-only controls, associate form inputs with labels, and manage focus in dialogs. Verify with keyboard-only navigation and tools like axe-core or Lighthouse accessibility audits.

Choose the simplest approach: useState for local state, lifted state for a few siblings, Context for read-heavy values like theme or auth, URL search params for shareable filters, and React Query or SWR for server data. Avoid prop drilling deeper than three levels.

Skeleton loading renders placeholder shapes matching the content layout with aria-busy and aria-label attributes, preserving layout stability. Spinners are generic indicators better suited for short actions, while skeletons work better for content-heavy regions.

Yes, designing mobile-first and expanding upward with breakpoints like Tailwind's sm and lg prefixes produces cleaner layouts than retrofitting. Test at 320px, 768px, 1024px, and 1440px widths to confirm behavior across devices.

AI output defaults to purple gradients, excessive rounding, uniform card grids, and oversized padding. Avoid this by using the project's actual color palette, spacing scale, border-radius tokens, and content-first layouts tied to real user needs.