Container Queries

A modal (or modal dialog) is a UI element that overlays the main content to demand user attention and interaction before they can return to the underlying page. Modals are used for confirmations, forms, alerts, and content previews. Proper implementation requires focus trapping, keyboard accessibility (Escape to close), and preventing background scroll — making accessible modals more complex than they appear.

A controlled component is a form element in React whose value is driven by React state rather than the DOM's own internal state. The component's value is set through a `value` prop and updated via an `onChange` handler, giving React full control over the form data. This pattern enables validation on every keystroke, conditional disabling of submit buttons, and enforcing input formats, making it the recommended approach for most form handling in React applications.

CSS Animation uses `@keyframes` rules and the `animation` property to create complex, multi-step animations entirely in CSS without JavaScript. Combined with CSS transitions for simple state changes, these tools handle most UI animation needs performantly since browsers can optimize them on the GPU compositor thread. Properties like `transform` and `opacity` are particularly efficient to animate because they don't trigger layout recalculations or repaints.

A skeleton screen is a placeholder UI that mimics the page layout with simple shapes and animated gradients while content is loading. Unlike spinners, skeletons give users an immediate sense of the page structure, reducing perceived loading time. They are widely used in apps like Facebook, YouTube, and LinkedIn to create a smoother transition from loading to loaded state.

A WebView is an embeddable browser component that renders web content (HTML, CSS, JavaScript) inside a native mobile application. It allows developers to reuse existing web code within a native app shell, commonly used for displaying rich content, integrating web-based features, or building hybrid apps. While convenient, WebView-heavy apps typically have worse performance and a less native feel compared to truly native or React Native/Flutter approaches.

Atomic Design is a methodology by Brad Frost for creating design systems by breaking interfaces into five hierarchical levels: atoms (basic HTML elements), molecules (simple component groups), organisms (complex UI sections), templates (page-level layouts), and pages (specific instances with real content). This approach provides a consistent mental model for organizing component libraries in React, React Native, or Flutter projects and ensures systematic scalability of the UI.