Organize large Next.js frontends into Feature-Slice Design layers.
npx skills add https://github.com/Ezequielpereyraa/ai-config --skill feature-slice
Please help me install this Agent Skill. Skill: feature-slice Source: https://github.com/Ezequielpereyraa/ai-config/tree/main/skills/feature-slice Command: npx skills add https://github.com/Ezequielpereyraa/ai-config --skill feature-slice
Feature-Slice Design (FSD) provides an optional pattern to reorganize frontend architecture for large Next.js projects, reducing cross-feature coupling and enabling scalable growth.
Outline a plan to refactor a large Next.js project to adopt Feature-Slice Design when the project exceeds ten features and cross-feature coupling is significant.
High-intent search queries and answers about installing and using this skill.
You refactor a large Next.js frontend with Feature-Sliced Design by migrating code step-by-step into the app, pages, widgets, features, entities, and shared layers, reducing cross-feature coupling without requiring a full rewrite.
You need Feature-Sliced Design when your Next.js project exceeds 10 features and cross-feature dependencies become problematic, requiring isolated stores and explicit cross-layer imports to control architectural coupling.
FSD layering rules enforce a strict dependency hierarchy: app → pages → widgets → features → entities → shared. This layered architecture controls dependencies by ensuring upper layers import lower ones, but never the reverse.
Yes, you can migrate an existing Next.js project to FSD without a full rewrite by following a step-by-step migration approach that progressively moves features into isolated slices and shared layers while maintaining application functionality.
You should avoid Feature-Sliced Design when a Next.js project has fewer than 10 features or minimal cross-feature coupling, as the overhead of maintaining strict layering rules and isolated stores outweighs the modularization benefits.
chicago-joeMap a codebase into feature-grouped flowcharts with mermaid diagrams.
jhlee0409Detect FSD import boundary violations in TypeScript/JavaScript codebases.
addisualemuManage Expo application state with Zustand stores and AsyncStorage persistence.
diarworldGuide software architecture pattern selection with Clean Architecture, DDD, and microservices.
