Feature-Sliced Design
0Feature-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.
7580Updated Today
Design
Quick InstallView Source
$ npx skills add https://github.com/feature-sliced/skills --skill feature-sliced-designOverview
About This Skill
Feature-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.
How to Use
Install using the command provided below.
Use Cases
Structuring large-scale applications efficiently.
Maintaining codebase organization as project grows.
Facilitating team collaboration with clear boundaries of responsibility.
Tags
Setup & Installation
Quick Install
Terminal
$ npx skills add https://github.com/feature-sliced/skills --skill feature-sliced-designAlternative Install (Git Clone)
git clone https://github.com/feature-sliced/skillsRequirements
- Claude Code or compatible AI agent
Quick Start Guide
1
Install the Skill
Copy the install command above and run it in your terminal.
2
Open Your AI Agent
Launch Claude Code, Cursor, or your preferred AI coding agent.
3
Try It Out
Use the prompt template or examples below to test the skill.
4
Customize
Adapt the skill to your specific use case and workflow.
Usage Examples
Prompt Template
Act as a software architecture consultant specializing in Feature-Sliced Design (FSD). Help me restructure my [COMPANY]'s [PROJECT_NAME] project using FSD principles. Analyze the current architecture and suggest improvements. Focus on: 1) Identifying core features and slices, 2) Defining layer boundaries (app, processes, features, entities, shared), 3) Proposing a migration plan from the current structure to FSD. Current architecture overview: [CURRENT_ARCHITECTURE]. Target domain: [DOMAIN_E.G., E-COMMERCE, FINTECH].
Example Output
# Feature-Sliced Design (FSD) Restructuring Proposal for Acme Corp's ShopSphere
## Current Architecture Analysis
Your current monolithic frontend structure mixes domain logic with UI components. Key pain points:
- Shared state management in `store/` couples unrelated features
- Feature components like `Cart.tsx` contain both UI and business logic
- No clear boundaries between user flows (browsing vs. checkout)
## FSD Structure Recommendation
### Layer Breakdown
```
app/
├── processes/
│ ├── auth/ (login, registration)
│ └── checkout/ (cart → payment flow)
├── features/
│ ├── product-catalog/ (browse, search)
│ ├── wishlist/ (save items)
│ └── reviews/ (rating system)
├── entities/
│ ├── product/ (core data model)
│ ├── user/ (auth data)
│ └── order/ (purchase history)
└── shared/
├── ui/ (buttons, modals)
└── lib/ (utils, constants)
```
### Migration Steps
1. **Week 1-2**: Extract shared UI components to `shared/ui/`
2. **Week 3-4**: Refactor auth flow into `processes/auth/`
3. **Week 5-6**: Migrate product catalog to `features/product-catalog/`
### Key Benefits
- **Team Autonomy**: Each feature team owns their slice
- **Scalability**: New features can be added without touching core logic
- **Testability**: Slices can be unit tested in isolation
Would you like me to elaborate on any specific slice or provide code examples for the migration?Find the right skills for your stack
Take a free 3-minute scan and get personalized AI skill recommendations.
Take free scan