The interface is where every system promise becomes real.

We do not choose a frontend framework from a preference list. We choose it from the application’s rendering profile, deployment target, interaction density, existing team and the systems it has to sit beside. The useful decision is not React versus Svelte in the abstract. It is which runtime leaves the product with the fewest accidental seams — between server and browser, content and interaction, the API contract and the component consuming it.

SvelteKit and Next.js are choices, not boundaries. We can dig into any serious frontend framework, inherit one already in production, and become useful without first replacing it. The decision checklist travels; the framework name does not.

A design system is not a gallery of buttons. It is the contract between design decisions and product code: tokens that carry intent, accessible primitives that own interaction, domain components that understand the product, and compositions that let a new screen feel native without copying the old one. We keep those layers distinct so a visual change lands once, while business behaviour stays close to the workflow that owns it.

• Semantic tokens for colour, type, spacing, motion and elevation CSS custom propertiesDesign tokens
• Accessible primitives for focus, keyboard control, overlays and form semantics shadcn/uiBits UIRadix UI
• Variants expressed as typed component APIs rather than class-name conventions CVATailwind Variants
• Domain components for the repeated product decisions Typed propsComposition
• Loading, empty, error, disabled and destructive states designed with the default state State matrix
• Responsive behaviour owned by the component that changes Container queriesMobile first

The frontend should not discover the API by failing against it. We generate typed clients from the schema, keep server data in a query layer with explicit cache and invalidation rules, and separate it from URL state, local interaction state and durable application state. That separation is what lets a screen remain predictable when requests overlap, tabs are restored, permissions change or an optimistic update is rejected.

• Generate request, response and error types from the API contract OpenAPIOrval
• Give every server read a stable key, lifetime and invalidation path TanStack QueryQuery keys
• Cancel stale requests when navigation or filters move on AbortSignal
• Keep filters, pagination and shareable selections in the URL URL state
• Model complex forms with typed validation and field-level errors TanStack FormZod
• Use optimistic updates only when the reconciliation path is defined Optimistic UIRollback
• Preserve one error envelope from transport to the component rendering it Structured errors

Generated types do not replace product judgement. They remove contract drift so that judgement can stay focused on what the interface should do when the data is late, partial, forbidden or wrong.

Static, server-rendered and client-rendered are not competing application architectures. They are delivery modes we assign to routes. A marketing page can be generated once, an authenticated workspace can assemble its first response on the server, and the interaction after hydration can stay entirely in the browser. The backend-for-frontend sits where the browser should not: holding credentials, translating sessions, aggregating calls and enforcing cache boundaries.

A BFF is a trust boundary, not a second backend by habit. If it only forwards every request unchanged, it has added a network hop without earning one.

Internal tools are where edge cases become the normal workload. The interface has to keep context across filters, edits and long-running operations; make partial failure legible; and let a person understand what will change before a consequential action lands. We model these workflows explicitly rather than stretching CRUD screens until they almost fit.

• Data tables with URL-backed filters, sorting and pagination TanStack TableSaved views
• Multi-step workflows that can be resumed without re-entering known data WizardsDraft state
• Bulk operations that preview scope before mutation Dry runsSelection models
• Long-running imports, exports and processing shown as durable jobs Background jobsPolling
• Review queues that preserve provenance and the reason something needs attention Review stateAudit trail
• Partial failures reported per item, with a safe retry path IdempotencyRetry
• Empty, stale, forbidden and degraded states treated as product states State matrix

The happy path is usually the shortest part of an operational application. The quality of the product shows up in what it lets a person understand, recover and safely try again.

A browser test is too expensive for every branch of logic, and a unit test cannot tell us whether a keyboard user can finish the workflow. We layer tests by responsibility, then make the API simulation work on both sides of the rendering boundary. That last part matters: mocking browser fetch while an SSR loader still reaches a real backend is not an isolated test suite.

We keep traces, screenshots and failure artifacts because a red gate without inspectable evidence only moves debugging from CI to somebody’s laptop.

Responsive engineering is not shrinking the desktop layout. It is choosing what remains visible, what changes interaction model, and what the device should not download at all. Images, video, uploads and streamed interfaces each need their own delivery and recovery contract; otherwise the screen works only on the connection and device it was built on.

• Components own the breakpoint where their interaction changes Container queriesMedia queries
• Images carry dimensions, responsive sources and modern formats srcsetCDN transformsPlaceholders
• Large uploads use signed destinations, checksums and resumable transfer Signed URLsSparkMD5tus
• Adaptive video playback follows connection and device capability HLS.jsMedia sessions
• Structured UI streams recover from interruption without losing the resolved state ReadableStreamEvent protocol
• Animation responds to reduced motion and never blocks the task RiveGSAPprefers-reduced-motion
• The same web surface can run inside an explicit native bridge WebView bridgeShared tokens

The smallest screen is not a lesser product, and the fastest connection is not the baseline. Both are constraints the component should be able to explain in code.

A frontend has production infrastructure even when it deploys as static files. It has secrets and public configuration, browser caches, third-party scripts, security headers, release artifacts and errors that only exist on a customer’s device. We instrument that surface, set budgets before it slows down, and make each deployment small enough to inspect and quick enough to reverse.

The frontend is not finished when the build passes. It is finished when a failed release is visible, attributable and reversible.