frontend-fundamentals

Frontend Fundamentals — Stack-Agnostic UI Patterns

Universal guidance for every component-based UI framework: React, React Native, Vue, Svelte, Solid. Framework-specific layering (Next.js App Router, React Native navigation, Vue composition API) lives in the stack-specific skill that depends_on: [frontend-fundamentals].

Loaded automatically when enforce-skill.sh routes a file under frontend/ that matches a stack skill.

0. Every async UI is three-state

Every screen or section that fetches data MUST explicitly handle three states. Missing any of them is a bug:

State	Required UI
Loading	skeleton or spinner; indication of progress
Error	actionable message + retry affordance; never a blank screen
Empty	explains why it's empty + suggests next action; never an ambiguous zero rows

A fourth state — stale/refreshing while data exists — is a common polish item. Render the previous data with a subtle loading indicator; don't blank the UI.

Anti-pattern: {data && <List data={data} />}. This silently hides error AND empty AND loading behind a single falsy check.

1. Server components vs. client components (React 19+ / Next 15+)

Default everything to server components. Convert to client only when one of these is present:

• Interactive state (useState, useReducer, form state).
• Event handlers (onClick, onChange, onSubmit).
• Browser-only APIs (window, localStorage, navigator, document, IntersectionObserver).
• Hooks that require a client (useEffect, useLayoutEffect, most third-party hooks).

Server components don't ship JS to the browser and can fetch directly. This is the single biggest first-load perf win in modern React. A component that's "use client" without a reason is accidental bundle bloat.

2. Hydration safety

Anything whose output differs between the first server render and the first client render causes a hydration mismatch. Common culprits:

• new Date(), Math.random() at top level of a client component.
• window.matchMedia(...) defaulting to different value.
• Reading localStorage synchronously during render.