Engineering Vocabulary

Engineering Vocabulary

Overview

Bridge the gap between casual engineering descriptions and precise technical terms. When a user describes a frontend pattern loosely, look it up here to pick the right implementation approach.

When to use

• User describes a pattern informally ("yang nge-cache itu", "biar gak nge-lag")
• You need the precise term to search docs or pick the right library
• Communicating architecture decisions clearly

When to skip

• User already uses the correct term
• Non-frontend (backend, DevOps, database) concepts

Lookup table

State Management

| Description (loose) | Term | Definition | |---------------------|------|------------| | Share data without passing through every component | Context / Provider pattern | React Context or equivalent for cross-tree state | | Data cached so it doesn't fetch again | SWR / Stale-while-revalidate | Return cached data, revalidate in background | | Store that any component can read | Global store (Zustand/Redux) | Centralized client state container | | State in the URL (filters, tabs) | URL state / Search params | Shareable, bookmarkable state via URL | | Pass data down without prop chains | State hoisting / Lifting state | Move state to nearest common ancestor | | Optimistic update before server confirms | Optimistic UI / Optimistic mutation | Show expected result immediately, rollback on error | | Undo/redo support | Command pattern / History stack | Stack of reversible actions | | Form state that tracks dirty/touched | Form state management | Libraries like React Hook Form, Formik | | Derived value computed from other state | Computed / Derived state / Selector | Value calculated from source state, memoized |

Data Fetching & Async

| Description (loose) | Term | Definition | |---------------------|------|------------| | Loading skeleton before data | Skeleton screen / Placeholder UI | Shimmer placeholders mimicking final layout | | Retry on failure | Retry with backoff | Re-attempt failed requests with increasing delay | | Cancel request when leaving page | Abort controller / Request cancellation | AbortController signal to cancel in-flight fetch | | Load more as you scroll | Infinite scroll / Cursor pagination | Fetch next page when nearing scroll bottom | | Fetch once, use everywhere | Query cache / React Query | Centralized async state with cache + revalidation | | Pre-fetch data before user navigates | Prefetching / Preloading data | Anticipate next route, start fetching early | | Debounce search input | Debounced input | Delay execution until user stops typing (~300ms) | | Show stale data while loading new | Stale-while-revalidate (SWR) | Display cached result, refresh in background | | Parallel requests instead of sequential | Promise.all / Parallel fetching | Fire independent requests simultaneously | | Server sends updates without polling | WebSocket / Server-Sent Events | Real-time push from server to client |

Rendering & Performance

| Description (loose) | Term | Definition | |---------------------|------|------------| | Render only visible list items | Virtualization / Windowing | Render only viewport-visible items (react-virtual, etc.) | | Component doesn't re-render unnecessarily | Memoization (React.memo/useMemo) | Skip re-render when props/deps unchanged | | Load component only when needed | Lazy loading / Code splitting | Dynamic import() + Suspense for deferred loading | | Render on the server first | SSR (Server-Side Rendering) | Generate HTML on server, hydrate on client | | Static HTML at build time | SSG (Static Site Generation) | Pre-render pages at build time | | Mix of server and client components | Islands architecture / Partial hydration | Static shell + interactive client islands | | Avoid layout thrashing | Layout batching / Read-write separation | Batch DOM reads before writes | | Animate without jank | Compositor-friendly animation | Use only transform/opacity for smooth 60fps | | Heavy computation off main thread | Web Worker | Run CPU-intensive work in background thread | | Throttle scroll/resize handlers | Throttling | Limit handler execution to N times per second |

Component Architecture

| Description (loose) | Term | Definition | |---------------------|------|------------| | Component that renders its children | Compound component | Parent + children share implicit state (Tabs + Tab) | | Component that accepts a render function | Render props | Pass rendering logic as a function prop | | Wrap component to add behavior | HOC (Higher-Order Component) | Function that returns an enhanced component | | Reusable logic extracted from component | Custom hook | useXxx() function encapsulating stateful logic | | Component that just displays, no logic | Presentational component / Dumb component | Pure UI, receives all data via props | | Component that fetches and manages state | Container component / Smart component | Handles data, passes to presentational children | | Slot where parent injects content | Children / Slots / Composition | props.children or named slots for flexible layouts | | Component that handles its own errors | Error boundary | Catches render errors, shows fallback UI | | Forwarding ref to inner element | forwardRef | Expose inner DOM node to parent via ref | | Polymorphic "render as" different element | Polymorphic component / as prop | Component that can render as different HTML elements |

CSS & Styling

| Description (loose) | Term | Definition | |---------------------|------|------------| | Styles scoped to one component | CSS Modules / Scoped styles | Class names hashed to prevent collision | | CSS variables for theming | Design tokens / CSS custom properties | --color-primary etc. in :root for systematic theming | | Responsive without media queries | Container queries | Style based on parent size, not viewport | | Apply styles based on parent state | :has() selector | Parent selector — style parent based on child state | | Dark/light mode toggle | Color scheme / Theme switching | prefers-color-scheme + manual toggle | | Utility classes like Tailwind | Utility-first CSS | Single-purpose classes composed in markup | | CSS-in-JS at build time | Zero-runtime CSS-in-JS | Styles extracted at build (Vanilla Extract, Panda) | | Smooth number transitions | tabular-nums / CSS counter animation | Fixed-width numerals for stable layout | | Balanced heading line breaks | text-wrap: balance | Browser-native even line distribution |

Architecture & Patterns

| Description (loose) | Term | Definition | |---------------------|------|------------| | Folder per feature, not per type | Feature-based architecture | features/auth/, not components/ + hooks/ + utils/ | | One source of truth for routes | Centralized routing | Route config in one place (React Router, Next.js pages) | | Shared UI library across features | UI primitives / Design system | Reusable base components (Button, Input, Card) | | API calls in one place | API layer / Service layer | Centralized API functions, not fetch() in components | | Types shared between FE and BE | Shared types / Contract-first | TypeScript interfaces shared or generated from schema | | Feature flags | Feature toggle / Remote config | Enable/disable features without deploy | | Event-driven communication | Event bus / Pub-sub | Loosely coupled component communication | | Guard routes based on auth | Route guard / Protected route | Redirect unauthenticated users | | Micro frontend | Module federation / Micro-frontend | Independent deployable frontend modules | | Monorepo with shared packages | Monorepo (Turborepo/Nx) | Multiple apps/packages in one repository |

Testing

| Description (loose) | Term | Definition | |---------------------|------|------------| | Test one component in isolation | Unit test / Component test | Render + assert on single component | | Test user flows end-to-end | E2E test (Playwright/Cypress) | Simulate real user interaction in browser | | Test visual appearance | Visual regression / Snapshot test | Compare screenshots against baseline | | Test accessibility automatically | axe-core / a11y audit | Automated WCAG violation detection | | Mock API responses | MSW (Mock Service Worker) | Intercept network requests with mock responses | | Test from user perspective | Testing Library philosophy | Query by role/label, not implementation details |

Workflow

1. Listen for informal engineering descriptions
2. Match against the lookup table above
3. Return the proper term + brief definition
4. Implement using the named pattern/library

Checklist

• [ ] Loose description identified
• [ ] Correct engineering term applied
• [ ] Right library/approach chosen based on the pattern
• [ ] Implementation follows established conventions for that pattern

Depth

Cross-reference with:

• State architecture: references/architecture.md
• FE architecture: fe-architecture skill + references/fe-architecture.md
• Data patterns: data-fetching skill + references/data-fetching.md
• Performance: web-performance skill + references/performance.md
• Testing: frontend-testing skill + references/testing.md

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: sukirman1901
• Source: sukirman1901/frontend-expert
• License: MIT
• Homepage: https://github.com/sukirman1901/frontend-expert

Install and usage instructions live in the source repository linked above.