GitHub Actions

CSS Grid is a two-dimensional layout system that lets you define rows and columns simultaneously, making it ideal for complex page layouts. Unlike Flexbox which works in one axis at a time, Grid allows you to place items precisely in both horizontal and vertical directions using named areas or line numbers. Features like `grid-template-areas`, `auto-fill`, and `minmax()` make it possible to create responsive layouts with minimal code.

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 Custom Properties (also called CSS Variables) let you define reusable values with `--my-variable` syntax and reference them anywhere using `var(--my-variable)`. Unlike preprocessor variables in Sass or Less, they are live in the browser, cascade through the DOM, and can be updated dynamically with JavaScript. They're essential for theming systems, dark mode implementations, and maintaining consistent design tokens across large stylesheets.

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.

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.