Next.js

Color contrast is the measurable difference in luminance between foreground text (or UI elements) and their background. WCAG guidelines require a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text to ensure readability for users with visual impairments. Tools like Chrome DevTools, Stark, and WebAIM's contrast checker help developers verify compliance during development.

Infinite scroll is a UX pattern where new content loads automatically as the user scrolls toward the bottom of the page, eliminating traditional pagination. It's commonly used in social media feeds and content discovery interfaces. While it increases engagement and feels seamless, it can hurt performance without virtualization and makes it difficult for users to reach footer content or bookmark specific positions.

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.

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 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.

CSS-in-JS is an approach where styles are written directly in JavaScript files, often co-located with the components they style. Libraries like Styled Components, Emotion, and Stitches generate unique class names at build time or runtime, eliminating style conflicts. While it enables dynamic styling based on props and full encapsulation, the trend has shifted toward zero-runtime solutions and utility-first CSS due to performance concerns.