addy-frontend-ui-engineering

Use native interactive elements like button instead of div, associate every form input with a label, manage focus in dialogs, and ensure 4.5:1 text contrast. The included accessibility checklist covers keyboard navigation, screen readers, forms, and ARIA live regions.

Avoid purple/indigo palettes, excessive gradients, maximum border rounding, and stock card grids. Instead use the project's actual color tokens, a consistent spacing scale, content-first layouts, and realistic placeholder content that reveals real layout problems.

Choose the simplest option that works: 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 or SWR for server data, and Zustand or Redux only for complex app-wide state.

Yes, it uses mobile-first Tailwind responsive classes such as grid-cols-1 with sm and lg breakpoints. Layouts should be tested at 320px, 768px, 1024px, and 1440px widths to confirm they adapt correctly.

Skeleton screens preserve layout structure and set accurate expectations while content loads, whereas spinners cause layout shifts and feel slower. Mark skeletons with aria-busy and an aria-label so screen reader users know content is loading.

Split components that exceed roughly 200 lines or handle more than one responsibility. Separate data fetching containers from presentational components, and extract complex state logic into custom hooks colocated with the component.