## Engineering terms: web interface

From Vibe Coding 101 (https://vibe-coding-101.brighteng.org/). When a request describes one of these problems, use the named technique, say its name, and run its check. Each term's page has the full entry and a prompt.

- **URL state**: Put shareable navigation state in the URL. Use when: Reloading or sharing a filtered page loses the selected view. Do: Define supported parameters and defaults. Check reload, shared links, and browser back navigation. Avoid: Private or sensitive values are exposed in URLs and history.
- **reduced motion**: Respect the user’s preference for less interface animation. Use when: A transition uses large motion or persistent animation. Do: Offer a restrained alternative while preserving state changes and feedback. Test with the preference enabled. Avoid: Removing an animation also removes the only indication that an action completed.
- **layout shift**: Visible content moves unexpectedly as the page loads or updates. Use when: Text or buttons jump when images, fonts, or embeds arrive. Do: Trace the moving elements, reserve appropriate space, and compare before and after under delayed loading. Avoid: A fixed placeholder height clips content on a smaller viewport.
- **accessibility**: Accessibility makes an interface usable by people with varied abilities and assistive tools. Use when: A feature works with a mouse but is difficult to use otherwise. Do: Use semantic controls and verify the complete task with keyboard and assistive technology. Avoid: Passing an automated scan while the main workflow remains unusable by keyboard.
- **empty state**: An empty state explains why expected content is absent and what action is available. Use when: A list appears blank and users cannot tell what happened. Do: Model the relevant states separately and keep the next useful action clear. Avoid: Displaying no records as if a failed request completed successfully.
- **progressive disclosure**: Reveal secondary choices when they become relevant. Use when: A form overwhelms users with rarely used options. Do: Separate required choices from optional detail and test the basic path without opening every section. Avoid: Hiding a required decision until after submission fails.
- **destructive action**: A destructive action removes or invalidates user value. Use when: A delete or revoke action can affect the wrong object or cannot be reversed. Do: Name the affected object and distinguish reversible actions from irreversible ones. Avoid: Showing an undo option when the underlying state cannot actually be restored.
- **undo**: Undo reverses a supported action according to a defined history and lifetime. Use when: A user needs to recover from an accidental reversible edit. Do: Define which actions are reversible and test recovery across the supported lifecycle. Avoid: Overwriting the only undo record when a second action happens.
- **skeleton screen**: A skeleton screen reserves the shape of content while it loads. Use when: A loading region appears blank or shifts substantially when content arrives. Do: Match the content’s layout and test slow, empty, and failed loads. Avoid: Animating an indefinite placeholder after the request has already failed.
- **error copy**: Error copy explains a failure in terms useful to the user. Use when: Users receive raw exceptions or the same message for unrelated failures. Do: Map known failures to actionable messages and keep diagnostic detail in the appropriate logs. Avoid: Offering retry for an operation that will repeat a successful side effect.
- **design tokens**: Design tokens name reusable visual decisions such as spacing and colors. Use when: The same visual role has many slightly different hardcoded values. Do: Define a small semantic set and replace the values for the targeted components. Avoid: Creating tokens but continuing to use raw values at the call sites.
- **split pane**: A split pane divides a workspace with an adjustable separator. Use when: Users need to resize a sidebar and primary work area. Do: Define size constraints, keyboard behavior, and narrow-window fallback. Avoid: Allowing a pane to collapse until its recovery control is unreachable.