Platform
    • FSD Layers
    • Import Boundaries
    • Entity Structure
    • Widget Structure
    • Project Structure
    • Shared Patterns
Projects
  • API Connections & Tools
  1. Documentation
  3. Architecture (FSD)

Feature-Sliced Design Rules

Establishing a strict hierarchy of layers and dependency boundaries to ensure horizontal and vertical decoupling.

01Mental Hierarchy

app
Can use ↓
pages
Can use ↓
widgets
Can use ↓
features
Can use ↓
entities
Can use ↓
shared
Foundation

02Dependency Boundaries

entities
accesses:
shared
features
accesses:
entities
shared
features
widgets
accesses:
features
entities
shared
pages
accesses:
widgets
features
entities
shared
app
accesses:
pages
widgets
features
entities
shared

03Standard Entity Structure

Each entity is a self-contained module. We use strict subfolder separation for predictability and maintainability.

  • api: RTK Query definitions for backend interaction.
  • types: Separation into interfaces and types for clean code.
  • converters: Data transformation layer (Data Mapping).
  • handlers: Logic not tied to UI state.
  • mock: Ability to work without a backend.
  • index.ts: Entry point for access from upper layers.

04Widget: Model & UI Separation

Widgets are "smart" blocks. We separate logic (model) from the visual part (ui) to simplify testing and refactoring.

Why it's important: The model/ folder contains everything that makes the widget functional (Zod schemas, form configs, local types). The ui/ folder contains only display components.

05Practical Examples

✅ Correct
src/features/auth/ui/login-form.tsx
1import { useAuthStore } from "@/entities/session"; // OK: feature -> entity 2import { Button } from "@/shared/ui"; // OK: feature -> shared
❌ Violation
src/entities/user/model/user.ts
1import { logoutFeature } from "@/features/auth"; // ERROR: entity -> feature (LAYER VIOLATION)

06Global Settings

no-cross-layer-imports
Enforced
enforce-directory-structure
Enforced
no-private-imports
Enforced
enforce-barrel-exports
Enforced