feature-sliced-design

Feature-Sliced Design structures frontend projects into app, views, shared, features, and entities layers. This enforces a bottom-up import policy and domain-based naming to reduce coupling and accelerate team collaboration.

Feature-Sliced Design enforces a public API through per-slice index.ts exports to create stable, framework-agnostic boundaries. This discipline prevents direct internal access and maintains scalable, maintainable frontend architecture.

Migrate to FSD v2.1 by progressively reorganizing existing code into the defined layers and establishing public API contracts. The approach provides specific migration guidance for moving from v2.0 or non-FSD baselines.

Feature-Sliced Design works with Next.js, Vite, and Nuxt by providing specific framework integration guidance. It applies framework-agnostic layering rules and boundary enforcement to maintain a scalable frontend architecture.

Handle cross-imports in a layered frontend architecture by merging features, extracting shared logic to entities, or composing them at a higher layer. These strategies minimize tight coupling and maintain import boundary rules.

Limitations of using FSD include the strict overhead of maintaining per-slice public APIs and managing import boundaries. Teams must carefully navigate cross-import strategies to avoid tight coupling when scaling complex frontend projects.