Getting Started with FSD v2.1 (Feature-Sliced Design)

What Is This Article?

The best way to understand Feature-Sliced Design is to read the official docs, tutorials, and examples, but I'm writing this down as a personal reference. In particular, the Skills and Steiger tools covered later are handy to have when developing, so I'll touch on those as well.

What Is FSD?

FSD (Feature-Sliced Design) is a frontend architecture.

Unlike architectures that split code by responsibility, FSD is easiest to think of as an architecture that splits code by pages and entities.

Before we get into how the code is actually separated, there are three foundational concepts in FSD you need to understand:

• Layers
• Slices
• Segments

Let's go through each of them.

Layers

There are ways to break things down further, but since this article is just an introduction, I'll only cover three layers:

• app
• pages
• shared

The higher you go (toward app), the more application-specific the code becomes; the lower you go (toward shared), the more generic it becomes.

As a rule, higher layers can use lower layers, but lower layers must never depend on higher layers.

The recommended way to start is small, adding more layers only when you actually need them.

Slices

For a blog app, the pages layer would contain

• pages
  • blog-list
  • blog-detail
  • user

Since the app naturally breaks down into these pages, the structure ends up looking like this. Here, blog-list, blog-detail, and user are the slices. Slices are divided by pages and entities.

Segments

• pages
  • blog-list
    • model
    • ui
    • index.ts
  • blog-detail
    • model
    • ui
    • index.ts
  • user
    • model
    • ui
    • index.ts
• shared
  • ui
  • api
  • model
  • lib
  • config

The model and ui parts here are the segments, and they correspond to responsibilities. Note that the shared layer contains segments directly, rather than slices.

The key idea in FSD 2.1 is Pages First: start by building everything in Pages, and extract things into lower layers only when they need to be broken out.

Steiger

Steiger is an architecture linter. You can install it with:

pnpm add -D steiger @feature-sliced/steiger-plugin

For AI-Assisted Coding

Claude Skills

https://github.com/feature-sliced/skills?utm_source=chatgpt.com

This repository is officially published.

npx skills add feature-sliced/skills

Adding these Skills lets you share FSD design knowledge with Claude.