Storybook

A microinteraction is a small, contained moment in a user interface that accomplishes a single task — a button animation on click, a toggle switch, a pull-to-refresh gesture, or a "like" heart animation. These subtle design details provide feedback, guide users, and add personality to an interface. Well-crafted microinteractions make products feel polished and responsive without overwhelming users.

A wireframe is a low-fidelity visual representation of a user interface that outlines structure, layout, and content hierarchy without detailed styling or colors. Wireframes focus on what elements appear on a page and how they are arranged, serving as a blueprint before visual design begins. They help teams align on functionality and user flow early in the process, when changes are cheapest to make.

Styled Components is a popular CSS-in-JS library for React and React Native that uses tagged template literals to style components. It automatically generates unique class names, supports dynamic styling based on props, handles vendor prefixing, and provides full theming capabilities. The library colocates styles with components, making it easy to understand what each component looks like and to delete styles safely when removing components.

Orchestration is the automated coordination of multiple services, tasks, or systems to execute a complex workflow. An orchestrator acts as a central controller that manages the sequence, parallelism, error handling, and retries of individual steps. In the context of AI agents, orchestration involves chaining LLM calls, tool use, and decision-making steps; in DevOps, it coordinates container deployment, scaling, and service discovery.

A design system is a collection of reusable components, guidelines, and standards that ensure visual and functional consistency across a product or suite of products. It typically includes a component library, design tokens, typography rules, color palettes, and documentation. Design systems bridge the gap between designers and developers, enabling teams to build interfaces faster while maintaining a unified look and feel.

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.