Frontend vocabulary — the UI-pattern terms a backend engineer keeps not knowing
The owner kept hitting basic frontend terms (toast, banner) and not knowing them. The deck had React fundamentals but no everyday UI-pattern vocabulary, so added 26 verified cards with TS/React/CSS code (not Java).
The owner, a backend/AI engineer, kept running into basic frontend terms — toast, banner, modal — and not knowing them, which is normal but worth fixing for breadth. The deck's frontend domain had 12 React-fundamentals cards (component/state/effect, data fetching, routing, accessibility, performance, testing, design system) but none of the small UI-pattern vocabulary you actually hear day to day.
Added 26 cards in the frontend domain, with code in TypeScript/React/CSS rather than the Java the rest of the deck uses — the right language for the topic. UI patterns: toast/snackbar, banner, modal/dialog, tooltip/popover, dropdown, badge/chip, skeleton loader, spinner/progress, tabs, accordion, drawer, breadcrumb, pagination-vs-infinite-scroll, empty state, client-side form validation. Core concepts: DOM & virtual DOM, hydration, debounce/throttle, lazy loading & code splitting, CSS box model + flex/grid, responsive design, z-index/stacking context, Core Web Vitals, cookies vs localStorage vs sessionStorage, optimistic UI, and client state management. Generated then fact-verified — 26/26 passed (the verifier specifically checked for real React/DOM/CSS/ARIA APIs and no Java). CONCEPTS 258 → 284, frontend domain 12 → 38.
These are explicitly low-priority for the owner's backend/AI interviews (Opendoor, Google) — a pairing round won't ask what a toast is — but they're worth having for literacy and for the rare full-stack or system-design moment where the frontend rung comes up.