Is this skill compatible with modern frameworks?

Yes, FSD is framework-agnostic and this skill supports implementation in React, Vue, Angular, Svelte, and Next.js environments.

Can it help me migrate an existing project?

Absolutely. The skill provides specific patterns for identifies features and entities within legacy code to facilitate a gradual migration to FSD.

How does this skill enforce dependency rules?

The skill applies the 'top-down' rule where higher layers (like pages) can import from lower layers (like entities), but never vice-versa, preventing spaghetti code.

What is Feature-Sliced Design (FSD)?

FSD is an architectural methodology for frontend applications that organizes code into layers, slices, and segments based on business responsibility and technical scope.

Feature-Sliced Design Architect

Name: Feature-Sliced Design Architect
Author: jeongsk

byjeongsk

•

Design Tools

Implements and maintains Feature-Sliced Design (FSD) architecture to build scalable, modular, and maintainable frontend applications.

About

This skill provides expert guidance on the Feature-Sliced Design (FSD) architectural methodology, helping developers organize frontend code into standardized layers like app, pages, widgets, features, entities, and shared. It enforces strict dependency rules to prevent circular imports, assists in the creation of slices and segments, and provides actionable migration strategies for refactoring legacy codebases into a production-grade modular structure.

Key Features

Enforcement of architectural dependency and import rules
Modular segment organization for UI, API, Model, and Lib
Project folder structure optimization and design
Step-by-step migration paths for legacy frontend projects
Automated FSD layer and slice generation
3 GitHub stars

Use Cases

Validating architectural integrity and import directions during code reviews
Designing a new React, Vue, or Next.js project structure from scratch using FSD
Refactoring a monolithic frontend codebase into modular, maintainable slices

About

Key Features

Enforcement of architectural dependency and import rules
Modular segment organization for UI, API, Model, and Lib
Project folder structure optimization and design
Step-by-step migration paths for legacy frontend projects
Automated FSD layer and slice generation
3 GitHub stars

Use Cases

Validating architectural integrity and import directions during code reviews
Designing a new React, Vue, or Next.js project structure from scratch using FSD
Refactoring a monolithic frontend codebase into modular, maintainable slices