applying-fsd-architecture_skill

Overview

This skill helps apply Feature-Sliced Design (FSD) to frontend projects by guiding layer, slice, and segment structure design and enforcing dependency rules. It supports creating scalable, maintainable codebases and assists during migration or refactor to FSD. The guidance targets practical folder layout, import directions, and role separation within slices.

How this skill works

The skill inspects your intended or existing project structure and maps files into FSD layers: app, pages, widgets, features, entities, and shared. It advises segmenting each slice into ui, api, model, lib, and config and checks for dependency violations (upper layers importing only lower layers and no cross-slice imports within the same layer). For migrations it provides stepwise strategies and concrete refactor suggestions to move code into FSD-compliant slices and segments.

When to use it

• Designing a new frontend project structure with FSD principles
• Planning or executing a migration from existing architecture to FSD
• Deciding where to place components, utilities, or state logic
• Resolving import direction and dependency rule questions
• Creating or naming slices and their internal segments

Best practices

• Keep layer imports one-directional: app → pages → widgets → features → entities → shared
• Avoid cross-slice imports inside the same layer; create shared slices instead
• Put UI and styles under ui/, business state under model/, and API calls under api/
• Start migration by isolating entities and shared utilities before moving features
• Prefer small focused slices for single responsibility and easier testing

Example use cases

• Designing folder layout for a multi-page app with reusable widgets and features
• Refactoring a monolithic components folder into feature-scoped slices
• Guiding team conventions for import rules and segment naming
• Converting global state and APIs into entity and api segments
• Reviewing pull requests to detect FSD dependency rule violations