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.

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

01Enforcement of architectural dependency and import rules

02Modular segment organization for UI, API, Model, and Lib

03Project folder structure optimization and design

04Step-by-step migration paths for legacy frontend projects

05Automated FSD layer and slice generation

063 GitHub stars

Use Cases

01Validating architectural integrity and import directions during code reviews

02Designing a new React, Vue, or Next.js project structure from scratch using FSD

03Refactoring a monolithic frontend codebase into modular, maintainable slices

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jeongsk/claude-skills applying-fsd-architecture

For use in Claude.ai and ChatGPT

Download Skill