frontend-architecture
Installation
SKILL.md
Frontend Architecture
How to organize frontend code so it scales. Separation of concerns over file-type folders. Applies to React/Next and Vue. For directory layout, follow app-builder. For visual design, see frontend-design. For React/Next performance, see nextjs-react-expert.
1. Separation of Concerns — the core rule
Split code into four layers by responsibility. A unit of code does ONE of these, not several:
| Layer | Holds | Lives in |
|---|---|---|
| UI | Rendering, markup, presentational state | components/ |
| Logic | State, effects, data transforms, reusable UI logic | hooks/ (React) · composables/ (Vue) |
| Data | API calls, fetch/axios, cache keys | lib/ / service files (*.api.ts) |
| Type | TypeScript types, domain models | types.ts / *.types.ts |
| Validation | Form/data schemas | *.schema.ts (zod/yup/valibot) |