architecturelisted

The four-layer frontend architecture — infrastructure → domain → view → routes — with its dependency rules, file layout, naming conventions, and the recurring patterns that hold it together (serialization boundary, initial-data hook ladder, flow state machines, typed domain errors). Use whenever adding or changing a feature, page, API call, hook, form, or component in a React app laid out as src/infrastructure + src/domain + src/view + src/pages; whenever deciding which layer a piece of code belongs in; whenever reviewing a diff for layering violations; and whenever structuring a greenfield React frontend that wants a proven shape. Reach for it even when a request sounds purely local — "add a field to this form", "call this new endpoint", "show a spinner here" — because those are precisely the changes that quietly leak business rules into components.
jv-vogler/skills · ★ 1 · Web & Frontend · score 70

Install: claude install-skill jv-vogler/skills

# Layered Frontend Architecture ## The one idea **Everything the app _means_ lives in one layer that neither the network nor React can corrupt.** `domain/` holds the app's types, rules, and state transitions. It does not know it is rendered by React, and it does not know the server speaks JSON over HTTP. Every other layer is an adapter sitting on one side of it: ``` src/pages/ routes URL → fetch → serialize → provider → view page (thin) ↓ src/view/ React components, hooks, providers, view models ↓ src/domain/ meaning types, rules, transitions ← no React, no URLs ↓ src/infrastructure/ world HTTP clients, response schemas, cookies ← no rules ``` This costs a few extra files per feature. What it buys: - **The API's ugliness stops at one file.** `snake_case`, nullable-everything, an endpoint that returns a bare object where it swore it returned an array — all of it gets normalized in one domain function instead of being re-handled in nine components. - **Components read as layout.** When a decision has a name (`checkIfCanProceedToPayment`) the JSX stops being a place where rules hide. - **The rules are the cheapest thing in the app to test.** Pure functions, no DOM, no mocking a fetch. Colocate `thing.test.ts` beside `thing.ts`. ## What goes where | Layer | Owns