FSD (Feature-Sliced Design) Pattern Analyzer

Feature-Sliced Design organizes code by features into layers (app, processes, pages, features, entities, shared, widgets) with clear dependency rules. This Skill analyzes your current structure, identifies layer boundaries, and generates a step-by-step migration plan with code scaffolds and guidelines to transform your project systematically.

Feature-Sliced Design (FSD) is an architecture pattern that structures frontend projects by feature slices with strict layering, eliminating tangled dependencies and unclear responsibilities. It improves scalability, maintainability, and team collaboration by making code organization and module boundaries explicit and enforceable.

Yes. This Skill evaluates your project's current structure against FSD compliance, identifies architectural gaps, assesses migration difficulty, and produces a diagnostic report highlighting specific areas for improvement and actionable refactoring steps.

This Skill automatically validates your existing code against FSD dependency rules by detecting layer and slice boundaries, enforcing inter-module access patterns, and flagging violations. It produces validation output with specific violations and compliance recommendations.

Feature-Sliced Design is framework and language agnostic; it applies to any frontend project structure. This Skill generates TypeScript code scaffolds as examples, but the architectural pattern and migration guidance work with JavaScript, Vue, Angular, or other frontend stacks.

Migration plans include folder structure mappings, detailed refactoring steps, generated boilerplate code for features and entities, public API index templates, dependency diagrams, and best-practice guidelines for organizing and maintaining your FSD-compliant codebase.