Engineering Surface

Engineering surface is the chunk of any TSX file that runs the machinery instead of defining the look. It shows up as useState and useReducer hooks that hold internal values, useEffect blocks that attach listeners or trigger updates after render, async functions that call APIs or databases, and any logic sitting outside the return statement such as route handlers or server actions. In 2026 this surface appears in every production React codebase from Linear to Vercel. The four shapes are reliable. A line starting with const and ending in useState. A useEffect call followed by a dependency array in square brackets. Any function prefixed with async. Any fetch call or query hook from TanStack Query or SWR. Spot those shapes, register their purpose at a high level, then move on. The surface exists to make the pixels respond to clicks, load fresh data, and talk to the backend without polluting the visual decisions that live higher in the file.

Engineering surface is not the design surface. It has nothing to do with variant props typed as primary secondary ghost or destructive. It ignores Tailwind strings that set flex gap-6 p-8 text-lg font-semibold. It stays clear of the ternary operators and short circuit logic that swap entire states such as loading skeletons error banners or empty placeholders. Those patterns map pixel for pixel to Figma components variants and states. The 2026 Brainy article maps the split with two voxel slabs on a studio floor. The coral slab labeled FIGMA and the cyan slab labeled TSX both carry identical carved component trees. Everything that controls how the tree behaves when data arrives or a button is clicked lives under the slab in engineering territory. Confuse the layers and you waste hours editing hooks that introduce runtime bugs no design file could ever catch.

Concrete example. Open the new ProjectSwitcher component in the Linear 2026 codebase. The top twenty lines are pure engineering surface. Two useState hooks track selected project and dropdown open state. A useEffect fetches fresh projects on mount and again whenever the workspace changes using a custom useQuery hook wrapped in error boundaries. An async submit handler posts updates to their internal GraphQL endpoint before calling a parent callback. A designer runs the five-glance scan, notes the engineering shapes, then shifts to the returned JSX. They confirm the avatar stack uses the exact border-radius token from the design system. They check that the active row applies surface-tertiary exactly as drawn last sprint. They verify the menu item spacing matches the 12-pixel scale instead of an arbitrary value. Using Cursor they paste the file and prompt list every conditional render in this file and the design state each one represents. The model spits back loading empty error and permission states. The designer realizes the permission state was never drawn in Figma, adds it in five minutes using the existing illustration library, then leaves three surgical PR comments. Change the empty illustration to the new 2026 empty-state asset. The error banner should use the red-600 token not the generic error color. Wire the retry button to the onRetry prop instead of retrying inside the effect. The engineer owns the hook changes. The designer stays on the design surface.

Second concrete example. The checkout flow at Stripe in Q4 2025 uses Next.js server components. The file starts with an async server function that fetches pricing tiers from an edge cache then runs fraud checks before returning props to the client component. All of it is engineering surface. The designer ignores the entire block and opens the client-side OrderSummary that receives those props. They audit the pricing card variants, confirm the gap between tiers matches the eight-pixel scale, and verify the success confetti uses the exact brand animation defined in the motion library. When they discover the rate-limit state is missing they run the compare prompt inside Claude Code against the Figma frame. The model lists every mismatch in under thirty seconds. The designer updates the Figma file first then comments please surface the rate-limit UI we added to the spec. This exact workflow cut average handoff time from three days to four hours across the Stripe design team.

Use the engineering surface lens on every frontend PR you review in a React Tailwind org. Run the twelve-point checklist knowing items eight through twelve sit on the border between surfaces. Drop comments that translate missing states or token mismatches into clear engineering tasks. Never edit the hooks yourself unless you have agreed to own the ticket end to end. Do not hide behind the term as an excuse to avoid the codebase. The winning teams treat TSX as shared territory with clear fences. Designers read the engineering shapes so they know exactly where to stay out. Skip the lens on pure backend repos, infrastructure changes, or database migration PRs. Those live so far downstream that even senior frontend engineers treat them as black boxes.

Engineering surface is the part you name so you stop fearing every file and start shipping design that actually reaches production.