feature-sliced-design

Official Feature-Sliced Design (FSD) v2.1 skill for applying the methodology to frontend projects. Use when the task involves organizing project structure with FSD layers, deciding where code belongs, placing static assets (images, icons, fonts, PDFs), grouping closely related slices, defining public APIs and import boundaries, resolving cross-imports or evaluating the @x pattern, deciding whether to create or remove an entity, evaluating whether the entities layer is needed at all, deciding whe

35stars4forksUpdated 5/26/2026

Web Development #react #frontend-architecture #typescript #feature-sliced-design #javascript #code-organization

Security Assessment

Medium Risk(60/100)

Detected risks:

Secret Exposure([references/practical-examples.md] Token =, [references/practical-examples.md] token =)

Sensitive File Access([references/practical-examples.md] .env)

Security Score60/100

About feature-sliced-design

The feature-sliced-design skill provides guidance for applying Feature-Sliced Design (FSD) v2.1 to frontend applications. It helps developers organize project architecture using standardized layers such as app, pages, widgets, features, entities, and shared while following strict import boundaries and modular design principles. The skill focuses on solving common frontend architecture problems including unclear code ownership, excessive coupling, premature abstractions, and scaling issues in growing codebases. Its core philosophy emphasizes starting with simple page-level organization and extracting reusable modules only when real reuse and stable boundaries emerge.

The skill includes recommendations for layer placement, import rules, reusable infrastructure organization, and architectural decision-making. It supports workflows such as determining where business logic belongs, deciding whether features or entities should exist, structuring static assets, evaluating cross-import violations, and defining public APIs between slices. It also includes migration guidance for projects moving from FSD v2.0 or non-FSD architectures, and explains how to integrate FSD with frameworks including Next.js, Nuxt, Vite, and Astro. The methodology discourages unnecessary abstraction and avoids creating unused layers or speculative architecture.

This skill is intended for frontend developers, technical leads, and engineering teams building scalable JavaScript or TypeScript applications. It is especially useful for teams adopting modular frontend architecture, improving maintainability, or standardizing project structure across large codebases. It can also help teams refactor legacy applications, establish architectural consistency, and enforce clearer boundaries between business logic, UI, and infrastructure.

FAQ

When should code be extracted from pages into features or entities?

Code should only be extracted when it is actively used in multiple places, has stable boundaries, and represents a focused responsibility. If code is used in only one page, it should usually remain in that page.

Does Feature-Sliced Design require all layers to be present?

No. The methodology explicitly states that not all layers are required. Many projects can start with only app, pages, and shared layers, adding widgets, features, or entities only when they provide real value.

Can this skill be used with modern frontend frameworks?

Yes. The skill includes guidance for integrating Feature-Sliced Design with frameworks and tooling such as Next.js App Router, Next.js Pages Router, Nuxt, Vite, and Astro.

What architectural rules does the skill enforce?

The skill follows the FSD import rule where modules may only import from layers below them. Cross-imports between slices on the same layer are forbidden.

Does the skill support migration from older architectures?

Yes. The content includes migration considerations for projects using FSD v2.0 or non-FSD codebases, including notes about deprecated layers such as processes.