Feature-Sliced Design (FSD) provides a methodology for structuring code in layers based on usage. It's designed for teams to implement a practical structure in their projects, emphasizing simplicity and gradual complexity.
$ npx skills add https://github.com/feature-sliced/skills --skill feature-sliced-designFeature-Sliced Design (FSD) v2.1 is an official methodology for structuring frontend projects across six standardized layers: app, pages, widgets, features, entities, and shared. The approach follows a 'start simple, extract when needed' philosophy, allowing teams to begin with minimal layers and add complexity only when code is actively reused across multiple locations. FSD enforces strict import rules—modules may only import from layers below them—preventing circular dependencies and maintaining clear separation of concerns. The skill guides decisions on where code belongs, how to define public APIs, resolve cross-imports, manage static assets, integrate with frameworks like Next.js and Nuxt, and migrate from non-FSD codebases. It's designed for teams building scalable frontend applications who need practical structure without premature abstraction.
Install using the command provided below.
Structuring large-scale applications efficiently.
Maintaining codebase organization as project grows.
Facilitating team collaboration with clear boundaries of responsibility.
$ npx skills add https://github.com/feature-sliced/skills --skill feature-sliced-designgit clone https://github.com/feature-sliced/skillsCopy the install command above and run it in your terminal.
Launch Claude Code, Cursor, or your preferred AI coding agent.
Use the prompt template or examples below to test the skill.
Adapt the skill to your specific use case and workflow.
Check the GitHub repository or documentation for usage examples.
Take a free 3-minute scan and get personalized AI skill recommendations.
Take free scan