structurelisted

# Feature-Sliced Design For a Vite + React Router SPA: standard `pages` layer, **not** the `views` layer some generic guides use. ## Layers ``` app → pages → widgets → features → entities → shared ``` - Import **downward only**. Never upward, never sideways within a layer — a feature must not import another feature, an entity must not import another entity. - Cross-layer imports go through `@/`; relative imports only within one module. External code enters a module only through its `index.ts` barrel. The one exception is UI primitives (`@/shared/ui/[name]`), imported by direct path so the bundle doesn't pull the whole barrel. The import direction and the naming rules below are enforced by this plugin's PreToolUse hooks — a violating write is blocked, so don't spend effort re-checking them by hand. ## Which layer? - **entity** — a domain resource, read side: `api/[name].api.ts` + `api/[name].queries.ts`, `model/`, `index.ts`. No mutations. - **feature** — a user action, write side: `api/[name].api.ts` + `api/[name].mutations.ts`, `hooks/`, `model/`, optional `ui/`, `index.ts`. - **widget** — a composite reusable block: `ui/`, optional `config/` and `model/`, `index.ts`. - **page** — one route-level file, `[name]-page.tsx`. Composes widgets and features; holds no business logic. - **shared** — infrastructure only: http client, query client, storage, config, UI primitives. Nothing domain-specific. If a thing does not fit a layer, it is usually two things. Split it before