Feature-Sliced Design

Feature-Sliced Design organizes frontend code into layers—app, pages, widgets, features, entities, shared—with import rules that prevent lower slices from depending on higher product concepts. It scales teams by colocating feature code and enforcing public APIs per slice segment.

On interviews: explain allowed imports between layers and why `shared` must not import `features`. Compare with folder-by-type structures.

Common pitfalls: layers existing only as empty folders; cross-imports bypassed via relative paths; shared layer becoming a junk drawer.

The trade-off is flexibility versus complexity—know when the simpler path is enough.

Checklist:

• Slice public API via index exports.
• Lint import boundaries between layers.
• Colocate feature UI, model, and API code.
• Document slice naming for new contributors.